Javascript fullcalendar事件呈现性能问题

因此，基本上我所有的活动（至少有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:function（事件，元素）{
$（元素）.append（（event.teams[0]！=null？event.teams[0]：'-'）+'
vs.
'+（event.teams[1]！=null？event.teams[1]：'-'）；
如果（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）
，我认为有一个bug，因为它会自动转到
eventAfterRender
或
eventRender
，再次迭代整个事件集合

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

有人对此有什么建议吗？
在fullcalendars源代码中（至少在我的版本中），有一个renderEvent处理程序，它调用reportEvents函数，这是性能的瓶颈。我通过在源代码中添加对大规模渲染事件的处理来解决这个问题

我写了一个简短的函数：

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);
}

现在，对于每一批渲染事件，只调用一次重载和慢速reportEvents。请注意，massRenderEvents-函数与原始renderEvent-函数非常相似。
我已更改

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

到

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

renderEvent
和
addEventSource
之间的主要区别在于，即使创建单个事件，第一个事件也会尝试与日历进行交互，因为常规回调函数会花费很多时间，第二个向calendar发送一组JSON事件，这些事件只需要一个回调函数，可以提高性能并节省时间。
Fullcalendar现在支持
renderEvents
方法：

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

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

我知道这是一个老问题，但我在fullcalendar的v5中使用此配置选项解决了相同的性能问题：



它基本上会在触发渲染事件的每个操作之后添加延迟。
如果框架在该延迟内检测到另一个操作，它将在一个操作中呈现这些事件，从而提高性能

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

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

您可能使用了错误的函数。你的要求是什么？你能详细说明一下吗？我遇到了一个非常类似的问题，结果做了几乎完全相同的事情。谢谢你的发帖。
$("#calendar").fullCalendar('renderEvents', events, true);

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