Fullcalendar 渲染 2000 个事件答案

【问题标题】：Fullcalendar rendering 2000 eventsFullcalendar 渲染 2000 个事件
【发布时间】：2013-05-26 13:49:17
【问题描述】：

我有一个完整的日历脚本正在运行，但我需要渲染大约 2000 到 3000 个事件。

我已经read this post 并且已经完成了（仅加载开始日期和结束日期之间的事件）。然后我进行了 JSON 调用，以便 Javascript 只需将其发送到 fullcalender。另外，我不使用 renderEvent。

但是事件的渲染仍然很慢。成功调用后，ajax 调用大约需要 400 毫秒，浏览器需要大约 5 到 10 秒来呈现所有事件。

我还能在哪里获得速度？

【问题讨论】：

嗨 :)，你解决了这个问题吗？
我只用一个带有文本的 div 制作了服装元素：
Label
然后点击元素的父元素的日历，我获取点击检查如果 id 是正确的，然后做事。

标签： javascript jquery performance fullcalendar

【解决方案1】：

您可以使用eventLimit 限制每天呈现的事件数量

【讨论】：

但挑战不是限制事件，而是限制事件中的元素。

【解决方案2】：

假设在几百毫秒内检索到数据，连接没有瓶颈。根据我的经验，如果您的页面包含超过 4000 个 DOM 元素，浏览器将显着变慢，因为浏览器渲染引擎无法渲染如此大量的元素。因此，对于 2000 到 3000 个事件，它乘以 3 或更多取决于您如何为每个事件（如 DIV、SPAN、BR ......）构建 html，这将是页面上至少 12000 个 DOM 元素。

解决方案是对数据进行分段。将其分解为更小的部分，并在必要时显示事件。

【讨论】：

我明白你的意思，但我想我已经这样做了，还是你说我应该分解 fullcalender？就像删除事件 div 中的 .content div 一样？
其他问题（我只是在考虑）如果我检索 json 数据，我将它放在 javascrupt 数组中，所以如果我点击日历，我会检查我是否点击了一个事件 en，而不是添加 tiptop（ jq 插件）使用我之前创建的数组中的数据。这个数组会减慢速度吗？
如果数组中有大量数据，它可能会很慢，因为它存储在内存中。我认为您应该制定如何在日历上显示事件的策略，即：按人、组或类别显示事件。
这可能是一个解决方案。但其中一个类别是每周超过 2000 个事件。
还有css？渐变边框等？这个贵吗？