优化 Ext.tree.TreePanel 性能

发布于 2024-08-21 03:37:48 字数 176 浏览 10 评论 0 原文

我有一个与 AsyncTreeNodes 一起使用的 Ext.tree.TreePanel 。问题是最初 根节点需要有超过 1000 个后代。我成功地优化了 DB 性能,但 JavaScript 性能很糟糕 - 添加和渲染 1200 个节点需要 25 秒。我知道操作页面的 DOM 是一个缓慢的操作,但也许有一些方法可以优化初始渲染过程。

I have an Ext.tree.TreePanel used with AsyncTreeNodes. The problem is that initially the
root node needs to have more than 1000 descendants. I succeeded at optimizing the DB performance, but the JavaScript performance is terrible - 25 seconds for adding and rendering 1200 nodes. I understand that manipulating the page's DOM is a slow operation, but perhaps there is some way to optimize the initial rendering process.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

看春风乍起 2024-08-28 03:37:48

您可以创建具有较低 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.

别低头,皇冠会掉 2024-08-28 03:37:48

我不认为你会很幸运地优化具有这么多节点的树。有什么方法可以使用网格来传递信息吗?你至少可以用它来设置分页,而且可能会快很多。您还可以在网格上实现行扩展器 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文