FullCalendar 提高渲染事件的性能答案

【问题标题】：FullCalendar improve performance for rendering eventsFullCalendar 提高渲染事件的性能
【发布时间】：2017-05-17 14:39:55
【问题描述】：

到目前为止我一直在使用

.fullCalendar("renderEvent",event,true)

逐个渲染每个事件，这在性能方面有点糟糕，添加 50 个事件时加载时间超过 10 秒。然后我在stackoverflow上查看了一个建议使用

的线程

.fullCalendar("addEventSource", events) // events is an array of events to be added.

这大大提高了性能，但我想知道是否可以进一步改进？我查看了 FullCalendar 文档，发现了这个函数 renderEvents (https://fullcalendar.io/docs/event_rendering/renderEvents/)，但对我来说，它不会在日历上呈现事件。它是在最新版本 3.1 中添加的，所以它可能仍然存在错误？在纸面上，它应该更好地提高性能，因为它需要一个事件数组，而不是必须为每个事件调用 renderEvent。

我还优化了代码，因此我只对数据库进行了 1 次 ajax 调用，所有事件都编码为单个 json 字符串。

任何人对如何提高渲染事件的速度有经验？

编辑：

对于.fullCalendar("renderEvents",events,true)，我输入了像events[i].id = _id 这样的事件的ID，并且renderEvents 调用有效:) 以防这对任何人都有用

【问题讨论】：

为感兴趣的人编辑零件解决方案
另外，在后端性能方面要小心，这也是我遇到的大多数使用 Fullcalendar 的应用程序的瓶颈。这可能很明显，但想提一下有些人返回所有数据源，即数据库字段（示例 20+），并且只使用返回的 JSON 有效负载中的 3-5 个字段。仅返回日历消耗的字段值也将加快 JSON 的客户端浏览器在消耗之前所需的检索/内存。预先格式化数据值中的值，而不是在客户端中单步执行事件。

标签： javascript json performance fullcalendar

【解决方案1】：

使用 Fullcalendar “events” 方法，该方法为将事件传递给 fullcalendar 渲染提供回调。这种方法非常快，我用它来为每个视图渲染多达 2000 个事件。

下面的 sn-p 显示了在 angular 2 环境中执行此操作的相关代码。但是概念可以很容易地适应纯 javascript。

var calendarDiv: any;
var self = this;

calendarDiv = $(this.elementRef.nativeElement).find('#calendar');
calendarDiv.fullCalendar({
        defaultView:    "agendaWeek",
        ...
        events: function (start: any, end:any, timezone:any, callback:any) {
            calendarDiv.fullCalendar('removeEvents');
            self.reloadCalendarObjects(start, end, timezone, callback);
        },
        ...
      });

 // Fetch data from remote source (AJAX)
 reloadCalendarObjects(start, end , timezone, fcCallback)  {
    // Do your Axax here
    this.dataService.getRecords('MT_CalObjects')
        .subscribe((data: any[]) => {
           self.fillCalendar(data, fcCallback);
     });
   }

 // Evaluate fetched objects, create fullcalendar events and pass them to FullCalendar Callback)
 fillCalendar(data, fcCallBack) {
    this.fcevents = [];
    for (let entry of data) {
                     this.fcevents.push({
                title: data.eventame,
                start:  data.calstartDate,
                end:    data.calendDate,
                object_id: data.id,
            });
    }
    fcCallBack(this.fcEvents);  // pass back to FullCalendar
 }

【讨论】：

有点混乱，因为它不是 js，而且我对它不太熟悉。加载时间的主要问题是当您将事件拖到日历并使其在下一年重复发生时，而不是在您最初尝试加载页面时。

【解决方案2】：

我在 FullCalendar 中发现的最大差异是 JSON 源负载数据集的大小。确保 JSON 是交付快速数据库调用，支持在服务器配置中使用压缩 gzip/inflating，并且只返回将使用的数据。如果未使用字段，许多人会返回整个选择数据集。

用于获取数据的连续调用。我相信您正在寻找 refetchEvents() ，它可以在回调函数之后或您想要刷新数据时随时使用。并且只返回给定视图所需的日期范围。例如，我只在周视图中逐周返回，而不是整个月。

Calendar::refetchEvents

所以比如你提到的拖拽回调事件函数完成后。这只会更新数据元素，而不是 DOM 中的整个日历。

【讨论】：