jstree 性能问题答案

【问题标题】：jstree performance issuesjstree 性能问题
【发布时间】：2012-10-02 14:53:14
【问题描述】：

我正在使用 jsTree 大约 1500 个节点，最多嵌套 4 级（大多数只有 1 级深），并且我得到 Internet Explorer 的 “此脚本运行缓慢” em> 错误。我从一个直接的 html_data <li> 结构开始，由 ASP.NET 生成。树根本无法完成加载。然后我尝试了xml_data和json_data，效果好一点，但最终出错了。我最后的努力是异步加载。这解决了初始加载问题，但现在当我展开其中一个较大的分支时出现 IE 错误。

更多细节：我正在使用checkbox 插件，我还需要搜索功能。不幸的是，在搜索时，用户可能只输入一个字符，所以我正在查看大量搜索结果。

有人对这么大的数据集做过类似的事情吗？关于加速 jsTree 的任何建议？或者，我是否最好为我的 GUI 探索其他选项？

我意识到我没有发布任何代码，但欢迎任何一般技术/陷阱。

【问题讨论】：

对于大型数据集，您最好使用一个组件，该组件仅对视口中可见的部分进行延迟渲染。 SlickGrid 在这方面做得非常好。您可以使用自定义单元格渲染器使用图标 + 缩进（通过填充）轻松引入树状外观。或者只是为 SlickGrid 获取一个树渲染插件。

标签： javascript jquery performance jstree

【解决方案1】：

我还没有完全解决我的问题，但我做了一些改进，以便我认为它可能可用（我仍在测试）。我认为它可能对其他人有用：

首先，我在 jQuery 对话框中使用 jsTree，但这似乎会影响性能。如果可能，不要混合使用大型 jsTree 和 Dialog。
延迟加载绝对是处理大树的方法。我试过json_data 和xml_data，它们都很容易实现。它们的表现似乎大致相同，但这只是基于基本观察。
最后，我实现了一个穷人的寻呼。在我的服务器端 JSON 请求处理程序中，如果一个节点有超过 X 个子节点，我会简单地分成许多节点，每个节点都有一部分这些子节点。例如，如果节点 X 有 1000 个子节点，我给 X 个子节点 X1、X2、X3、...、X10，其中 X1 有前 100 个子节点，X2 有下 100 个子节点，依此类推。这对某些人来说可能没有意义，因为您正在修改树结构，但我认为它对我有用。

【讨论】：

【解决方案2】：

jsTree 支持您的所有需求

在分支太大的情况下使用 json_data plugin 和 ajax 支持。
search plugin也支持ajax调用

【讨论】：

"哪里的分支会太大"...你的意思是你可以加载一个分支的一部分吗？我已经在做延迟加载了，但有些节点有几百个孩子，我认为这是导致问题的原因。
Ajax 调用在 "state": "closed", 用于节点时进行。因此，如果不想为任何特定节点加载任何子节点，只需为此节点使用"state": "closed",。
是的，这就是我正在做的。问题是当用户扩展节点 X 并且 X 有 300 个孩子时，jstree croaks。
300 并不算多。这很奇怪。它一定是关于别的东西。一共有多少个节点？什么操作系统？什么浏览器？多少内存？
大约 300 - 总共约 1500 个，单个分支上可能有 1000 个。在没有减速的情况下，您看到的最大值是多少？ Windows 7、IE 8、4GB RAM、英特尔 i5 处理器。

【解决方案3】：

我自己对它的表现有点失望。

听起来您需要尝试延迟加载：不要一次加载整个树，只根据需要加载。

也就是说，最初只加载树的主干（因此所有节点都“关闭”），然后仅在用户单击打开时加载节点的子节点。

JsTree 可以做到这一点，请参阅文档。

（你的意思是“异步加载”吗？）

【讨论】：

是的，对不起，“异步加载”是指延迟加载。

【解决方案4】：

jstree 糟透了——它是“刷新”，添加 1000 个子节点时要慢 10 秒，或者在 40 个节点中加载包含 10000 个项目的树需要一分钟多的时间。经过几天的开发，我告诉我的同事改用 slickgrid，因为每个人都会拒绝使用一个需要很长时间才能做任何事情的页面。如果你没有正确构造它会更快，例如 1000 个节点需要 3 秒，但箭头不会有任何关闭它的效果。

这是替换 ms treeview 和 ms imagelist 的组合，后者在 3 秒内跨 40 个父节点加载相同的 10000 个项目。

【讨论】：