★★★★★JS脚本性能优化: 网页Treeview优化探讨(meizz)

前段时间我的项目里要用到树，节点从几百到几千都有可能．我就开始收集web treeview
相关的资料，ASP.net自带的treeview，MSDN异步加载树，XLoadTree树，阿信的树，蓝色街
灯的树，美洲豹的树等等不下十几个版本，节点数以百为单位的时候还行，各个版的treeview
表现都还不错，节点数以千为单位时（除异步加载模式外）基本上全挂了，ASP.net自带的那个
玩意在2000节点时打开页面竟然要等 1 分多钟，若再加到5000节点，所有的一次加载模式的树
我没有等到它打开过．若再加到万级节点，那简直就是不可想象的事情了．

从这些测试结果来看，似乎一到千节点就必须用异步加载了．异步加载优点那是勿庸置疑的
理论上可以加载无穷大节点数，且每个子节点都相对独立，不过也有它的缺点：1.它是以服务器
负荷和网络传输为代价换取树的加载速度．异步加载，服务器端都有树的数据源（数据库或XML文
件等），客户端每展开一个新节点，就要从数据源里取一次数据，查库的话服务器负荷加大，加
载XML文件的话，几百上千个子节点XML文件的维护就够你头疼的了，当然这里还有网络传输量的
增加，万一网络不稳定，子节点就加载不了了．2.代码开发的模式分布要比一次性加载复杂．要
考虑B/S之间的应答等．

而我项目里不太适合用异步加载，且我也想攻一下这个关，所以我采用一次数据加载．一次
数据加载的做法大体有两种：

1.直接在服务器端生成HTML，输出到客户端．这种做法是最差的一种，网络传输量大，浏
览器端加载的时间长．没有客户端的扩展性，也没有优化的可能性．这种做法只适合于百数节点
以内的小树，不符合我的需求．

2.服务器端给定一个数据源，在客户端用ＪＳ对数据分析，用DOM方式动态生成树节点．
这种方式服务器端负荷小(没有解析过程)，网络传递量小，客户端的可扩展性比较好，因此现在
主流的树的写法都是采取这种方式．有人做过相关调察，每个人在打开网页的时候最大等待的时
间小于10秒，即超过10秒没动静，访问者就会失去耐心．而我所搜集到的树没有一个能够达到
这个标准（我用2000节点测试），那么对于多节点树是不是就此宣判了一次加载做法的死刑了
呢？我想知道这个答案．


一次性加载数据源，客户端用脚本动态分析生成树的做法，数据源有两种：

1.用一个大数组存放所有节点信息．比较流行的做法是用ＪＳ脚本封装一个treeview类，
然后循环add()．

2.加载一个XML文件作为树的数据源．这是一种非常不错的做法，因为xml文件本身的优
势（层级，排序）且XML DOM功能也比较强大．在数据源方面XML文件比大数组更具有优势．

但是就算使用了XML，可是从节点数据到页面上的HTML展示，几千个节点的分析转化时间
也远大于10秒，所以必须要采用别的解决办法！

我想到的办法是结合一次加载与异步加载的优点：异步显示．

treeview　树节点并不是说一加载就全部展开，展开的只是很少的一部分，那么树加载的
时候没有展开的节点就没有必要马上生成，举个例子：一个30*30*30的树，接近28000个节点
总数的树，若是没有特殊必要的话，加载的时候只需要生成第一级的３０个节点就够了，想想看
原来要生成２８０００节点而现在只需要生成３０个节点，这个速度快了多少倍呢？至于下面的
节点，在用户点击展开的时候再生成，这样做法每次生成的节点只有几十到几百个而已．一次加
载做法最大的瓶颈豁然开朗．

---- 待续 ----