优化 Ext.tree.TreePanel 性能
我有一个与 AsyncTreeNodes 一起使用的 Ext.tree.TreePanel 。问题是最初 根节点需要有超过 1000 个后代。我成功地优化了 DB 性能,但 JavaScript 性能很糟糕 - 添加和渲染 1200 个节点需要 25 秒。我知道操作页面的 DOM 是一个缓慢的操作,但也许有一些方法可以优化初始渲染过程。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您可以创建具有较低 DOM 占用空间的自定义树节点 UI。换句话说,将用于创建树的每个节点的 HTML 更改为一些不太冗长(并且可能不太灵活)的 HTML。
以下是执行此操作的一些参考:
http://github.com/ jjulian/ext-extensions/blob/master/IndentedTreeNodeUI.js
http://david-burger.blogspot.com/2008/09/ext-js-custom-treenodeui.html
享受吧。
You could create a custom tree node UI that has a lower DOM footprint. In other words, change the HTML that is used to create each node of the tree to some less verbose (and likely less flexible) HTML.
here are some references for doing that:
http://github.com/jjulian/ext-extensions/blob/master/IndentedTreeNodeUI.js
http://david-burger.blogspot.com/2008/09/ext-js-custom-treenodeui.html
Enjoy.
我不认为你会很幸运地优化具有这么多节点的树。有什么方法可以使用网格来传递信息吗?你至少可以用它来设置分页,而且可能会快很多。您还可以在网格上实现行扩展器 UX,其行为类似于每一行的树。
I don't think you'll have much luck optimizing a tree with that many nodes. Is there any way you could use a grid to deliver the information? You could at least set up paging with that, and it would probably be a lot faster. You could also implement the row expander UX on the grid, which behaves like a tree, sort of, for each row.