性能问题

[weeksun23]

基于avalon，我写了一个tree ui组件，但发现性能不堪入目，加载1000个节点需要5秒多，加载10000个节点就直接挂掉了
代码链接：tree.js,
刚学avalon不久，希望大家多多指教。

[RubyLouvre]

你不能直接全部加上去
第一次只加载第一层的节点，点击它加载其下一层的

[weeksun23]

我是想测试一下如果一层有大量节点的情况下加载的性能；

[weeksun23]

一层同时加载1000个节点也需要5秒多，这样有点不太正常吧

[RubyLouvre]

你用JQ加载1000个节点也卡啊

[weeksun23]

用jq不卡，以jquery easyui tree为例，在chrome下，加载1000个节点只需600+毫秒，加载10000个要7秒多，也不会卡死
var data = [];
for(var i=0,ii=1000;i<ii;i++){
data.push({
text : Math.random(0,1) * 1000
});
}
var time1 = new Date().getTime();
$("#tree").tree({
data : data
});
console.log(new Date().getTime() - time1);

[zhizhideng]

一点非官方个人意见。AngularJS的官方建议是一个页面上不要超过2000个绑定。你这里一个节点里就有二十几个绑定，加载1000个，仅仅这个tree已经两万个多绑定了，还不算页面的其他内容。市面上的MVVM框架估计没有一个能在这样的需求下保持性能的。

这种一次加载大量数据的组件不适宜用MVVM来做底层实现。当然有很多手段可以减少数据加载量，例如一次只加载一层，如果一层还是太多，可以做成滚动时动态加载。

如果一定要一下子加载这么多节点的话，建议把tree组件做成纯jq的，再用avalon在外面包一层封装为widget，你watch treeList元素的改动然后直接调用tree组件的API去更新对应的节点就是了。

[weeksun23]

@zhizhideng
原来这样子，长见识了，谢谢

[liujian16]

我发现类似的问题。我在做一个相册类应用。开始我每张照片用一个对象来描述。当改变浏览器大小时，为适应窗口尺寸需要循环修改每张照片位置、大小的属性，性能很差。后来改成每个属性用一个数组来描述，改变属性时新创建一个数组，然后整体替换原来的数组，效果好多了，但是这样代码就比较难看了。

[xufei]

@zhizhideng 树这个东西还是不适合用MVVM表达，avalon处理这个已经不错了，angular在这块的性能更差。关于怎样用MVVM做控件库，我前几天写了一篇大致的总结：

xufei/ng-control#2

[zinda2000]

@weeksun23 兄：
树数据加载的性能问题，有什么新的进展吗？
你说的加载时间，是否除开获取数据的时间。
miniui有例子，加载10000个，秒内，链接： http://www.miniui.com/BigTest/10000-tree.html 但其树数据是js生成的

[weeksun23]

@zinda2000 当然除开了获取数据的时间，miniui那种是分层加载的，就是第一次只加载第一层的节点，点击它加载其下一层的，这样只要每层节点不多的话加载10W个节点也不会卡拉。。。。。。我最后也是采取分层加载的方式。