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

没那么慢吧？
我就用M$的treeview加载一棵有6K多节点的树也只有几秒钟时间呀

要这么多节点的树没接触过
学习ing

佩服meizz (梅花雪封闭开发中) 研究学问的方法和严谨的态度。

    异步显示的技术使得一次加载多节点树成为可能，因此我就在这个思路下继续做了下去．对
于XML数据源，所要做的优化不多，本身的XML DOM已经够强大了，所以我在大数组数据源方面
再花了时间去研究，结果又发现了一个瓶颈：数据从ＪＳ语句转化到数组．    这个问题也许不会有人去注意，毕竟平常使用数组的时候数组长度难得到达 k 级．但是在
页面加载的时候，每人节点从ＪＳ语句一个个Add到内存当中，其中还要分析这些数据，把数据
按照自己封装的treeview node类实例化，这个过程一下子就是重复几千次，显然这里消耗了大
量的时间，一万节点的这种转化时间远超出了１０秒，因此这里很有必要优化，否则前功尽弃．    这里我顺道说一下另一个话题：关于函数的参数串 arguments．在通常写函数的时候我们
会定义 function funName(param1, param2, param3)，然后在函数里调用这些参数，大
家发现了其中的弊病了吗？就是参数的秩序已经严格定好，在调用的时候多传，少传，参数秩序
错位都将发生错误．如果我的函数参数有变化了，那么所有调用的地方全得改，可扩展性太差了
而用XML就没有这个问题了，可扩展性与兼容性都没得说了，那么有没有好的解决办法呢？    有一次我在用 window.open()的时候灵感来了，open()的第三个参数是新窗口的外观定
义　window.open("aa.htm", "", "width=; height=; top=; left=; toolbar=")
在这个大参数字符串中，参数多少不管，位置不管，XML的优点都有了．我哈哈大笑：）　这
个问题也解决了．这样在大数组数据给定的时候随意，兼容，再也不用瞪着眼睛数位置了．    回到原来的话题，即然大数组加载耗时间，那么就需要另一种模式，我用了哈希表（不知
道我这种称呼是否正确，望有识之士指正．var hash = {}; hash["a"] = "aaa";），将
节点数据信息组合成一个大字符串（上面已经说了），加载的时候不需要做任何的转化，直接
将字符串赋到哈希表里，然后再用异步法，用到几个节点，再实例化几个就是的．做了这步优化
之后，我的２８０００节点树终于可以在１０秒之内展开了．    以下例子摘自于【梅花雪网页控件集】Treeviw 1.0
    var tree = new MzTreeview("id=tree; text=根节点文字; icon=root; hint=提示");
        tree.nodes["nodeId1"]  = "text=节点文字; icon=节点图标名; data=data";
        tree.nodes["nodeId2"]  = "text=节点文字; hint=提示; method=alert()";
        //..........
        tree.nodes["nodeIdN"]  = "text=节点文字; url=url.asp;";
        tree.url = "treeview.asp";
        tree.target = "FrameName";
    document.write(tree.toString());    最后我又发现一个瓶颈，这里先卖个关子，希望有同感的人点出．经过这一步优化之后我
我公布一下优化的结果：    环境：(CPU)P4 1.4M (RAM)256MB  windown 2000 server 1024*768 IE6.0
    节点：30*30*30（总数27930节点）
    网页大小：2.2M
    网页打开时间：2.5±0.2秒
    第一节点展开时间：1.45±0.05秒(30 nodes)
    第二节点展开时间：0.4→2.2秒
    第三节点异型时间：2.8±0.2秒    另11*30*30（总数10240节点）打开时间最长为１秒
    ---- 待续 ----

其实节点数再加上去, 我这种模式没有问题, 但是网络的传输量上已经承受不了了.大概计算了一下, 一万个节点大小在 1 MB左右, 即使使用宽带, 网络传输时间已经超过10秒了. 一次加载数据就目前的网度下, 50000 节点算是极限了(等一分钟吧), 若节点再多则只好使用异步加载了. 欢迎大家参加Treeview终极加速探讨!!

5555555555,学习中，我的tree也有一些性能问题，不过太懒惰，没有去测试它

我解决的办法：两管齐下：
1.服务器端或整理成文件也可，主要是提供数据；
但此数据是经过整理后的html,我使用<div>形式;(使用XML数据源也得格式化，处理上没多大差别)2.客户端使用htc格式化数据；此处的格式化只是进行缩进及图标等一些格式上的处理
由于提取的数据本身就是html代码，可以忽略遍历DOM~~

只两千
http://fason.nease.net/samples/treemenu/

是个比较头疼的问题, 我一般这样情况都换用其他方法的, 其实 WIN32程序里, TREEVIEW 控件也不能加载大数据量

1、惰性加载
2、使用style.height控制展开收缩而不是style.display我的项目中只用这两点就保证了可用性。

我觉得还有另一种方法：
网页打开，加载第一个节点数据。其后在<body onLoad="">用iframe继续加载节点数据。
如果用户点击,这个节点有数据了，那就显示出来，如果没有数据就采用异步加载的方法。以上意见可能不是很成熟，仅供参考！

不用DOM分析文档，用SAX怎么样？

<OBJECT ID="theTreeView" WIDTH="500" HEIGHT="600" CLASSID="CLSID:C74190B6-8589-11D1-B16A-00C0F0283628">
</OBJECT><script>theTreeView.Nodes.Add(null, 0, "R" + 0, "ROOT" + 0);for (var i=1; i< 3000; i++)
{
theTreeView.Nodes.Add("R" + (i-1), 4, "R" + i, "ROOT" + i);
}</script>

你没试试15seconds上面的xml tree?

那就在treenode的expand事件上不刷新当前网页而去服务器上取数据就可以了吧，用一个<xml></xml>通过修改它的src来做，应该没有什么问题吧。

runmin 通过 expand 事件不断取新的xml这种做法不就是异步加载吗? MSDN, CSDN的树不都是这种模式? 这种模式有一个缺点, 后台有成百上千个XML要维护更新呀! 我头好大.

调试易

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

解决方案 »