全日历事件呈现性能问题

Question

所以，基本上我所有的事件（至少有 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 update/render 仅特定事件。

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

Answer 1

在 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" 函数下，并将其添加到 EventManagers 导出，例如：

t.massRenderEvents = massRenderEvents;

现在，对于每批呈现的事件，繁重且缓慢的 reportEvents 仅被调用一次。请注意，massRenderEvents 函数与原始 renderEvent 函数非常相似。

Answer 2

我变了

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

到

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

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

renderEvent 和 addEventSource 之间的主要区别在于，第一个尝试与日历交互，即使创建单个事件也需要很长时间，因为常规回调函数，第二个向日历发送一桶 JSON 事件，这只需要一个回调函数，可以提高性能并花费更少的时间。

Answer 3

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

只需构建您的活动列表并一次性发送：

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

Answer 4

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

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

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

全日历事件呈现性能问题

fullcalendar event rendering performance issue

javascript

performance

jquery

rendering

fullcalendar