Question

每个树节点都包含其他内部小部件，因此渲染整个500个项目需要很长时间，尤其是在IE中。

在IE中渲染树可能需要10-20秒。

我想知道如何改进它，减少渲染时间。

对此有何建议？

我发现有一个TreeGrid，一次只显示一些行，并在用户滚动时更新视图，dijit.Tree是否具有此功能？

Answer 1

如果您没有那么多根节点，可以使用延迟加载机制，例如参见this article at sitepen

但请注意，它与dojo 1.4 - 1.5.1配合使用，在dojo 1.6.1中，JsonRestStore存在一些奇怪的问题。

请参阅this question at stackoverflow

编辑以符合澄清

我认为树只能在视图区域中构建节点。至少使用标准dijit.tree无法做到这一点。

在我们的一个应用程序中，我们插入了结构节点作为解决方法，即


root
---[1..30] - structure node 
  ---item 1
  ---item 2
  ...
---[31..60] - structure node
   ---item 31
   ---item 32
   ...
...

另一方面，听起来树状网格与你想要的东西很接近，也许它可以用一些造型

Answer 2

这可能是一个迟到的响应，但我正在处理的项目有同样的问题，应用程序必须在IE7中运行，所以性能绝对不好。核心问题是当你在一个级别有很多节点时，我们处理的数百个（如果不是超过一千个），导致可怕的脚本运行对话框弹出。

我们最近用我们自己的树实现替换了dijit.Tree的使用，因为服务器已经是数据抽象层，所以不需要额外的后备存储抽象。因此，我们让服务器生成一个HTML片段，使用div和spans来表示树的结构，使用自定义属性来关联每个节点的数据。 CSS用于直观地格式化数据。

此方法利用浏览器的内在功能来处理HTML。与鼠标和键盘事件的一些连接允许我们以有效的方式获得完整的基于树的功能（包括节点的工具提示）。以下是我们的服务器生成的HTML结构类型的简化示例：

<div class="treeFolder">
   <span class="treeFolderInd">+</span>
   <span class="treeFolderLabel">Folder label</span>
   <div class="treeFolderContent">
      <div class="treeFolder">
         <span class="treeFolderInd">+</span>
         <span class="treeFolderLabel">Sub-folder</span>
         <div class="treeFolderContent">
            <div class="treeItem" my-action="doSomething"
                 my-data="{arg1:'hello', arg2:'world'"
                 my-tooltip="Goodbye">
               <span class="treeItemInd">o</span>
               <span class="treeItemContent">
                Item text
               </span>
            </div>
            <div class="treeItem" my-action="doSomethingElse"
                 my-data="{arg1:'foo', arg2:'bar'}"
                 my-tooltip="Another tip">
               <span class="treeItemInd">o</span>
               <span class="treeItemContent">
                Item text
               </span>
            </div>
            ...

类名用于CSS格式。各种my- *属性是应用程序的客户端用于将操作绑定到用户选择树节点时的自定义属性。我们使用JSON字符串来表示数据，因此可以在属性上使用dojo.fromJson（）来获取与节点关联的数据（我们在内部缓存使用DOM节点创建的对象，因此fromJson（）不必每次访问数据时都会使用。

我们的加载时间已经大大改善，现在浏览器本身就是花费大量时间来解析HTML的浏览器，但它并不比加载大型网页更糟糕。加载HTML数据并注册我们的事件挂钩后，使用5,000个项目扩展节点相当快。我们基本上只是将CSS显示设置切换为展开/折叠文件夹，因此您基本上只限于浏览器本身的执行方式。

当然，人们可以创建替代结构来表示树数据，但我认为你明白了。我们将树的核心功能封装在一个类中，其中包含一些虚拟事件，以表示单击项目和其他树操作。该类的用户只使用dojo.connect（）来连接感兴趣的树事件。

备注：为所有项目创建dijit.Tooltip实例是性能降低的重要因素。为了解决这个问题，我们通过直接使用dijit.showTooltip（）和dijit.hideTooltip（）来创建dijit.Tooltip实例来管理工具提示。

对我们来说，一个不幸的事情是陷入IE7。即使系统有足够的RAM，IE7在处理大型数据集时也会降低整体性能。 IE8和IE9在这方面有了很大改进。

Answer 3

您可以尝试使用Lazy Tree Grid和Query Read Store。这可以满足您的需求。在父母急切加载之后懒惰装载儿童。使用grid.rowsPerPage

也可以控制需要加载的父元素数

Dijit树，如何提高root下500个子节点的大树的性能

3 个答案: