Javascript FullCalendar可提高渲染事件的性能

到目前为止，我一直在使用

.fullCalendar("renderEvent",event,true) 

要以1乘以1的方式渲染每个事件，这在性能上有点糟糕，在添加50个事件时，加载时间为10秒以上。然后我看了stackoverflow上的一个线程，它建议使用

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

这使性能提高了很多，但我想知道是否可以进一步改进？我查看了FullCalendar文档，发现了这个函数renderEvents（），但对我来说，它没有呈现日历上的事件。它是在最新版本3.1中添加的，所以可能它仍然有漏洞？从理论上讲，它的性能应该更好，因为它需要一个事件数组，而不必为每个事件调用renderEvent

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

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

编辑：

对于

.fullCalendar（“renderEvents”，events，true）

，我将事件的id设置为如下

events[i].id=\u id

和

renderEvents

调用有效：），以防这对任何人都有用使用fullCalendar“events”方法，该方法提供将事件传递给fullCalendar呈现的回调。这种方法非常快，我使用它渲染每个视图多达2000个事件

下面的代码片段显示了在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
 }

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

下面的代码片段显示了在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
 }

---

我在FullCalendar中发现的最大区别是JSON源有效负载数据集的大小。确保JSON正在传递快速数据库调用，支持在服务器配置中使用压缩gzip/inflating，并且只返回将要使用的数据。如果未使用字段，许多人会返回整个select数据集

用于连续调用以获取数据。我相信您正在寻找refetchEvents（），它可以在回调函数后的任何时间使用，也可以在您希望刷新数据时使用。并且只返回给定视图上所需的日期范围。例如，我只在“周”视图中每周返回，而不是整个月

---

例如，在完成您提到的拖放回调事件函数之后。这只会更新DOM中的数据元素，而不会更新整个日历。

我在FullCalendar中发现的最大区别是JSON源有效负载数据集的大小。确保JSON正在传递快速数据库调用，支持在服务器配置中使用压缩gzip/inflating，并且只返回将要使用的数据。如果未使用字段，许多人会返回整个select数据集

用于连续调用以获取数据。我相信您正在寻找refetchEvents（），它可以在回调函数后的任何时间使用，也可以在您希望刷新数据时使用。并且只返回给定视图上所需的日期范围。例如，我只在“周”视图中每周返回，而不是整个月

---

例如，在完成您提到的拖放回调事件函数之后。这将只更新DOM中的数据元素，而不是整个日历。

有点混乱，因为它不是js，我对它不太熟悉。加载时间的主要问题是当你把一个事件拖到日历上，让它在下一年重现时，而不是当你最初尝试加载一个页面时。有点混乱，因为它不是js，我对它不太熟悉。加载时间的主要问题是当您将事件拖到日历中并使其在下一年重复出现时，而不是您最初尝试加载页面时。为任何感兴趣的人编辑部分解决方案。此外，在后端处理性能问题时要小心，这也可能是我在使用Fullcalendar时遇到的大多数应用程序的瓶颈。这可能很明显，但有人会返回所有数据源a.k.a数据库字段（示例20+），并且只使用返回的JSON有效负载中的3-5个字段。仅返回日历使用的字段值也将加快JSON客户端浏览器在使用之前所需的检索/内存。预格式化数据值中的值，而不是在客户端中事后单步执行事件。为任何感兴趣的人编辑部件解决方案。此外，在后端处理性能问题时要小心，这也可能是我在使用Fullcalendar时遇到的大多数应用程序的瓶颈。这可能很明显，但有人会返回所有数据源a.k.a数据库字段（示例20+），并且只使用返回的JSON有效负载中的3-5个字段。仅返回日历使用的字段值也将加快JSON客户端浏览器在使用之前所需的检索/内存。预格式化数据值中的值，而不是在客户端中之后单步执行事件。