带选择框的JS树控件2 （为JSTree再次提速）

以前写过一个带选择框的JS树控件
但是当时发现一个问题，第一次选中根节点会明显感觉卡一下。
那是因为子节点的数据还没有生成，选中根节点的话需要初始化全部数据。(那个tree有5000个节点)

于是我思考一个问题，如何让多节点树的页面达到更快的效率。

经过测试发现，JSTree的主要效率瓶颈在两个地方。
1.页面HTMLElement的创建
2.树子节点的检索

页面创建一个HTMLElement是很耗时的，无论使用createElement或者是是innerHTML都一样。
而且这一步只能一个节点一个节点慢慢地生成，虽然可以通过减小单个节点的HTML元素量的方法提高一些速度，但是对于对于上千个节点来说仍然需要等上几十秒。
(1个节点如果有5个HTMLElement，生成1000个节点大概3秒左右)

所以只有通过异步展示的方法来进一步减少一次生成的节点数。
页面加载时并不立即生成所有节点的HTML元素，而是用户展开多少节点就生成多少节点，节点的生成发生在用户展开这个节点的时候。 这样减少了每次生成的节点数，消除了使用者的等待时间。

而对于节点的检索，这和数据的组织方式有关。
一般的组织方式是使用数组。(解析XML的话太慢，不考虑。只考虑使用json的情况)
但是在数组中检索一个节点的效率实在不敢恭维，如果节点是N个，那么全部节点数据组装起来的效率就是N*N
在节点少的时候不明显，但是如果有1000个节点，那么明显会发觉延迟了10多秒。延迟速度按指数增加。

MzTree(梅花雪)使用了另外一种方式，他没有使用数组而是使用一个简单对象来存放数组。
并且用一个字符串存放节点的索引关系（将所有的节点名（即类的属性名）join()成一个大字符串）
当需要获得子节点的时候使用正则匹配一步获得子节点ID，从而获得子节点。
经过测试发现，使用正则匹配的算法检索节点效率比使用for循环要高出很多。

这个效率已经满足一般大数据jstree的需要。
(具体算法，去参考MzTree梅花雪)



对于一般的Tree可以通过异步初始化节点数据(不是初始化节点HTML)的方法来解决延迟。
但是如果是checkbox-tree(带选择框的树)，却不能使用这个方法。因为对于带选择框的JS树，选中根节点的话，子节点应给也被选中。所以选中根节点，子节点必须存在。 所以节点数据需要一次生成。

但问题是即使使用正则匹配的算法提高了效率，仍然会需要一段初始化的时间。
（5000个节点数据全部初始化 使用for需要20-30秒，使用正则匹配算法需要6秒）

那么有没有办法进一步提高效率呢？
按照一般Tree的做法初始化一个节点数据需要初始化这个节点的子节点数据，那么也就需要检索节点的子节点数据。(有点绕口)
这个检索子节点数据看来是比较耗费时间的，而且没有更好的提高检索效率的方法。
既然检索没有办法提速，那么有没有不使用检索获得子节点的方法呢？

答案当然是有的，只要我们更改传递过去的数据结构问题迎刃而解。

于是我们直接传递一个拼装好的树结构JSON(节点包含了子节点的数据，子节点的数据中又包含了子子节点的数据....)

数据结构如下：
{
id : 0
childrean : [
  {
   id : 01
   childrean : [
    {
     id : 011
     childrean : [...]
    },
    {
     id : 012
     childrean : [...]
    }
   ]
  }
  ,
  {
   id : 02
   childrean : []
  }
]
}

对于这种结构，页面的Tree可以直接使用而无需解析，免去了子节点的检索所耗费的时间，JsTree展示速度大大提高。
一个5000节点的树，节点数据全部初始化只需要500毫秒。

(其实还有一个优点，使用这种结构的数据JSTree容易扩充，稍作修改就可以改成支持数据异步加载的Ajax-Tree) 


 
 
PS：附件中是一个演示例子，虽然不是最终版本但是可以说明问题。

 

china_2.js 和 china_2_code.js 是节点数据(UTF-8编码)

 

 

参数说明

text        显示节点内容（必须）
id           节点id
checked 选择框选中状态 0 1 2

children 子节点数据

 

创建一个新节点的方法 new TreeNode( {} );

 

 

新建节点可能存在一些问题(单选框选中等问题)，节点有checked属性的情况才会出现选择框。

 

 

 

 

 

 

感谢winner720发现的一个BUG

这部分代码要改一下(粗体部分)  TreePanel_0.5.rar

//瀑布(遍历所有子节点)
cascade : function(fn, scope, args){
  if(fn.call(scope || this, (args==null?this:args)) !== false){
    var cs = this.childNodes;
    for(var i = 0, len = cs.length; i < len; i++) {
      cs[i].cascade(fn, scope, args);
    }
  }
},

(以前是 args||this，当节点checked是0的时候可能出现返回this，虽然不影响展示结果，但是会造成一定泄露。改成(args==null?this:args)就不会出现问题了)

 

 

modify：
TreePanel_test_0.x  测试演示版本
TreePanel_all.rar      完整演示版本
TreePanel_0.5.rar    修正了一个内存泄露BUG
TreePanel_2.2.zip    增加了节点全部展开和全部折叠的方法，修正了节点显示时多余的竖线

TreePanel_2.3.zip    修复节点删除时多余的竖线

 

备注：附件请下载最新的版本。 （旧的的版本可能存在未修改BUG，没删除只是为了留作做为备份）

 

这个树最初设计目的是快速展示一颗带选择框的静态树，虽然也提供了节点增加以及删除等功能，但这些没有经过仔细测试，且不是它的长项。

评论

11 楼 joeblow 2009-10-16  

看过，感觉还挺不错的。

全选时还是会卡住几秒种，可能是浏览器要新建大量的node，导致失去响应，建议Relucent将model和DOM分开，全选时标记model中所有的节点为选中即可（而不必将所有的model初始化成DOM），只有当用户展开节点时再根据model新建DOM

10 楼 Relucent 2009-10-16  

colorless 写道

有没有源码，你给的加密啦。

加密？我不记得我加过密？

是说china_2_code.js吗？
那个是utf-8编码，和china_2.txt 内容是一样的的,其实就是个json

格式是这样的
root = {
    'text':'中国',
    'checked':'0',
    'children':[
      {'text':'北京市','checked':'0','children':[

      ]},
      {'text':'天津市','checked':'0','children':[]},
      {'text':'河北省','checked':'0','children':[]},
      {'text':'山西省','checked':'0','children':[]}
    ]
};

9 楼 colorless 2009-10-16  

有没有源码，你给的加密啦。

8 楼 olivechinese 2009-10-16  

刚才添加了两个节点后，发现前一个节点 无法选中

7 楼 lqixv 2009-10-16  

还是有问题，添加后的节点，不再有可选框，而且在其下再添加节点后，点击“-”不能收缩

6 楼 InnocentBoy 2009-10-16  

这是个好东西，有时间研究研究。

5 楼 Relucent 2009-10-16  

whaosoft 写道

这版好像不如上版啊 我点了半天删除没用呢

那个已更正了，其实都说是演示版本了。如果要用的话，稍微稍微修改下就好了。

4 楼 xuanye 2009-10-16  

曾经对Jquery 的Tree 做过一点修改，加上了Checkbox ，优化了性能。但是总归不是自己重头做的，难免在设计上原作者的想法有点怪异，另外他的异步实现也比较另类。

来看看楼主的树。。

3 楼 huangyh 2009-10-15  

非常不错，速度奇快，系统作者能提供开发文档

2 楼 lqixv 2009-10-15  

很有意思。能不能提供一个完整点的版本呢？

1 楼 whaosoft 2009-10-15  

这版好像不如上版啊 我点了半天删除没用呢