FullCalendar：事件源返回大量数据导致UI阻塞

Question

我正在使用FullCalendar插件为我的Web应用程序的用户提供日历。在FullCalendar中，我允许用户在以下视图之间进行选择：

right: 'agendaWeek,agendaDay,basicWeek,month'

我的问题目前仅在访问month视图时适用。在繁忙的月份，返回的JSON数量达到 5 MB 700KB 。

eventSources: [
   {
      url: 'calendar.php',
      type: 'POST',
      data: {
         emp_id: emp_id
      },
    }
]

获取这一大块数据不是问题 - 它不会花费超过 1.5秒 1秒。

渲染是有问题的 - 可能需要超过10秒才能阻止用户界面并且页面看起来没有响应（出于显而易见的原因 - JS的单线程特性）。 < / H3>

然后我查看了Web Workers作为一种潜在的解决方案（我对使用仅适用于较新浏览器的解决方案感到满意）。但是，这不是一个简单的修复，因为任何Web Worker的使用可能最好在插件（FullCalendar）级别完成，而不是在创建日历实例时。

I have also looked at this answer。我对建议的解决方案的评价：

1. 将服务器响应分解为多个请求：这里可能不适用 - 这是monthly视图，用户需要能够查看给定月份内的所有事件
2. 将解析分解为多个部分：可能最好在FullCalendar级别完成？
3. 将响应发送给Web工作者并在Web工作者中解析（在旧版浏览器中不起作用）。

我意识到解析大量JSON数据并呈现它非常耗时。但是，我希望能够做的至少是在呈现事件时让页面的其余部分响应。

有什么合理的方法来纠正这种情况？

---

修改

我完全忽略了这样一个事实：我没有过滤SQL级别所需的事件。我现在正在这样做，进入的数据大约是 700kb 而不是 5mb 。但是，页面仍然没有那么响应。

Answer 1

就像AndréCatita所说，你应该创建一个过滤器，可能你要回来全年的事件...猜测这里......

如果您之前发送了这样的日期限制（月份宽）：

eventSources: [
 {
    url: 'calendar.php',
    type: 'POST',
    data: {emp_id: emp_id, start: startdate, end: enddate},
  }
]

您可以设置应该返回事件的时间范围，在服务器端，您必须获得 startdate 和 enddate 并相应地获取事件

点击此链接，提示我正在谈论的内容：

events (as a json feed), start end parameters unix timestamp, are different if I change my OS time zone