fullcalendar 事件渲染性能问题答案

【问题标题】：fullcalendar event rendering performance issuefullcalendar 事件渲染性能问题
【发布时间】：2015-08-07 17:54:17
【问题描述】：

所以，基本上我所有的事件（至少有 360 个）都有 team1 vs. team2 或 - vs. team2 或 team1 vs. - 占位符。并且在最初的渲染事件中，根据事件是否有一个或两个团队来改变颜色。橙色为一队，绿色为两队。此外，事件在点击时会改变颜色。

但大多数情况下，我对通过渲染事件提高性能感兴趣。

fullCalendar 的渲染性能非常糟糕，我找不到任何解决此问题的方法。

这是我的代码：

eventRender: function (event, element) {
                $(element).append((event.teams[0] != null ? event.teams[0] : '-') + '</br> vs. </br>' + (event.teams[1] != null ? event.teams[1] : '-'));
                if (event.teams.length === 1) {
                    $(element).css('background', 'orange');
                }
                else if (event.teams.length > 1) {
                    $(element).css('background', 'green');
                }
            }

我的主要问题是，当我单击事件以更改其颜色时，脚本会自动转到 eventRender 或 eventAfterRender 事件，其行为与 for 语句完全相同 - 它迭代事件并然后它会做我想对单个事件做的事情，但只有当循环落在点击事件上时。

另外，在eventClick 中，我调用了$('#myCalendar').fullcalendar('updateEvent',event)，我认为存在一个错误，因为它会自动转到eventAfterRender 或eventRender，再次遍历整个事件集合。

即使是严格的 'updateEvent' 参数也应该指示 fullCalendar 仅更新/呈现特定事件。

有人对这个问题有什么建议吗？

【问题讨论】：

您可能使用了错误的功能。你的要求是什么，你能详细说明一下吗

标签： javascript jquery performance fullcalendar rendering

【解决方案1】：

Fullcalendar 现在支持renderEvents 方法：https://fullcalendar.io/docs/renderEvents。

只需构建您的事件列表并一次性发送它们：

$("#calendar").fullCalendar('renderEvents', events, true);

【讨论】：

【解决方案2】：

在 fullcalendars 源代码中（至少在我的版本中）有 renderEvent-handler，它调用 reportEvents -function，这是性能的瓶颈。我通过在源代码中添加对大规模渲染事件的处理来解决这个问题。

我写了一个简短的函数：

function massRenderEvents(events, stick) {
    var i;

    for (i = 0; i < events.length; i += 1) {
        normalizeEvent(events[i]);
        if (!events[i].source) {
            if (stick) {
                stickySource.events.push(events[i]);
                events[i].source = stickySource;
            }
            cache.push(events[i]);
        }
    }

    reportEvents(cache);
}

在“EventManager”-function 下，并将其添加到 EventManagers 导出中，例如：

t.massRenderEvents = massRenderEvents;

现在，对于每批渲染的事件，重且慢的 reportEvents 只调用一次。请注意，massRenderEvents -function 与原始 renderEvent -function 非常相似。

【讨论】：

我遇到了一个非常相似的问题，最终做了几乎完全相同的事情。感谢发帖。

【解决方案3】：

我知道这是一个老问题，但我在完整日历的 v5 中使用此配置选项解决了相同的性能问题：
https://fullcalendar.io/docs/rerenderDelay
它基本上在每个会触发渲染事件的操作之后添加延迟。如果框架在该延迟内检测到另一个操作，它会在一个操作中呈现这些事件，从而提高性能。

将值设置为 1（因此延迟 1 毫秒）对我有用。我只是将它添加到我的角度组件中的配置中：

  calendarOptions: CalendarOptions = {
    ...,
    rerenderDelay: 1,
  }

【讨论】：

【解决方案4】：

我变了

$("#calendar").fullCalendar('renderEvent', eventData1, true);

到

$("#calendar").fullCalendar('addEventSource', eventData1, true);

这对我有用。我已经在几个相关网站上阅读了这个问题，并且根据他们的建议我已经这样做了。

renderEvent 和 addEventSource 之间的主要区别在于，第一个尝试与日历进行交互，即使创建了单个事件，由于常规回调函数而需要很长时间，第二个发送一桶 JSON 事件到只需要单个回调函数的日历，可以提高性能并减少时间。

【讨论】：