高手请进,js执行速度随页面元素的增加越来越慢是什么原因?有什么解决方法呢?

[bingdian37]

最近在测试一段代码的时候发现的这个问题
很郁闷

以下是对1000个节点进行操作的几次重复测试
结果如下:
共有节点:10000
子节点数据:1000
清除旧数据:31毫秒

EV:BabyMap:0

EP:nodeIndex(0)
EP:haveBaby(1000)
EP:mainLoop:2031
EP:isHavebaby:80
EP:insertHtml:1344

EP:nodeIndex(9)
EP:haveBaby(1000)
EP:mainLoop:2968
EP:isHavebaby:31
EP:insertHtml:1796

EP:nodeIndex(8)
EP:haveBaby(1000)
EP:mainLoop:3578
EP:isHavebaby:15
EP:insertHtml:1813

EP:nodeIndex(7)
EP:haveBaby(1000)
EP:mainLoop:4578
EP:isHavebaby:64
EP:insertHtml:1984

EP:nodeIndex(6)
EP:haveBaby(1000)
EP:mainLoop:5485
EP:isHavebaby:16
EP:insertHtml:1968

EP:nodeIndex(5)
EP:haveBaby(1000)
EP:mainLoop:6453
EP:isHavebaby:64
EP:insertHtml:2047

EP:nodeIndex(4)
EP:haveBaby(1000)
EP:mainLoop:7547
EP:isHavebaby:95
EP:insertHtml:2250

解释一下:
EP:mainLoop:7547-----主循环的执行时间
EP:isHavebaby:95-----主循环中一段代码的执行事件(这里可以忽略)
EP:insertHtml:2250---插入HTML代码的执行时间

因为每次都是对1000个节点进行操作
计算量和需要插入的html代码长度都是基本一致的
但是结果却显示
执行事件从最初的2031+1344=3K,上升到后来的7547+2250=9K
效率下降之快......呜呜,比我花了好长时间调整来的性能优化效果可明显的多了

js的执行速度为什么与页面元素数量关系这么大呢?
我的机器1G内存,还够浏览器吃的
想不通,请高手指点

解决问题后立刻放分

还想到了以前的一个现象
最初有个html和js混合的页面
其中有一段js的循环,空循环,竟然执行的奇慢
把所有的html代码删除后
再运行那个空循环
消耗时间:0

太奇怪了

这个问题困扰了好几天了
一直找不到原因和解决方法

[bingdian37]

我是不是只能发200分的帖子啊

[SCUM]

DOM 的内部实现涉及很多字符串操作 字符串操作是比较耗时的
另外浏览器的实现方法也有一定原因 你用 Firefox 测试的话 肯定比 IE 效率高
不是必要的话 就不要在客户端做太复杂的 DOM 操作
Ajax 的出现也加重了客户端的此类负担 实际应用中若平衡得不好的话 必将弊大于利

[bingdian37]

我顶

[bingdian37]

同意楼上的
firefox下的字符串效率确实比IE要高很多

firefox下直接使用+=连接字符串 都比 IE下面 使用push 然后数组join来的快

我想字符串连接之所以耗时

是因为这个怎么优化他也要挨着拷贝的,所以时间总是有的

对于ajax,喜欢其基本原理带来的页面局部刷新的效果和数据后台载入

对有关ajax的大型框架,没有用过,暂时不感冒

PS:看了看论坛说明,我现在只能发100分的帖子,晕了,明明有不少分,竟然散不出去

[bingdian37]

希望大家帮帮我

[guoweihrh]

能不能让把循环放在server端呢，这样js就不用去耗费那么多时间了

[bingdian37]

把循环放到server端，就是在server端生成html代码了，这样传输量会增大很多的

这里就有个js循环和大传输的权衡问题了

谢谢楼上的建议

不过问题是IE的执行效率一直在下降啊
不论你的HTML代码是在客户端生成的，还是在服务端生成后传输来的
插入HTML代码的时候，基本相同的数据量，速度越来越慢
真让人头疼啊

回头我再认真测试一下

刚才登录csdn，验证码是888888，哈哈

[bingdian37]

自己顶一个

[bookshop]

如果不复杂就用.Net的回调实现局部刷新!

我比较迷惑在什么样的需求情况下需要一次加栽这么多内容呢??







-----------------------
没有最好,只有更好!
http://www.crossgo.com

[bingdian37]

楼上的问题提的好

一般来说，常见的应用也就是导航或者显示分类

用作导航的话，不出200节点吧

用作分类的话，如果是全国县市的话

有2000节点左右，并且是共有节点2000，而不是一次加载2000

但是性能下降问题是确实存在的

在网页元素增加的情况下

所有的DHTML操作，js执行效率都会下降，影响的不仅仅是我的一次加载（数据一次加载，分批展示，并不是一次展开）的树，

即使是回调，局部刷新，网页元素也是在慢慢增加不是？网页元素多了，刷新效率是不是也会降下来？

这才是问题所在

之所以使用1000个节点做测试

只是为了将性能下降问题反映出来

然后大家一起努力看看能否改善这种情况

[bingdian37]

to gzdiablo
我把代码中的一条语句改了一下
tempnode.subNodes[j].innerHTML = "<div id=" + i + "_" + j + "><img id=" + i + "_" + j + "m0 src='sIL.gif'><img id=" + i + "_" + j + "m1 src='sIL.gif'><img id=" + i + "_" + j + "m2 src='sIS.gif'><a id=" + i + "_" + j + "m1 href='javascript:undefined' >this is inserted HTML" + i + "_" + j +"</a></div>";

一共加了1个div，一个a，三个图片

原程序每加载1000个，耗时约500
加了两个图片，每加载1000个耗时约5000！！！（原来图片这么消耗资源）
又加了一个图片，每加载1000个耗时7700，并且慢慢出现了效率降低的情况，最后一次展开耗时8300（效率降低还不是很明显）

不过加载完成后页面反映还是很迅速的，浏览器没有死掉

准备继续调整

[gzdiablo]

这个效率降低应该是图片加载时的系统消耗
因为程序加载速度非常的快 不断需要渲染更多图片 所带来的系统损耗会很明显的影响程序运行
你可以尝试去掉图片 应该不会再有性能下降的问题

[adverse]

貌似也就只能尽量减少客户端操作，操作多了，肯定会耗内存。顺便再bs一下ie的字符串操作。

[bingdian37]

同意gzdiablo的看法
目前为止也没有找到其他的方法来解释和解决这个问题
只能在强调性能的地方尽量少用图片了

IE的字符串操作确实比较慢，优化之后的速度还比FF慢

[NANAXMM]

JF

[gzdiablo]

好像是代码问题 我这样测试就好像没问题

<script language="javascript">
function window.onload()
{
var nodes = new Array();
for(var i=0;i<10;i++)
{
var area = document.body;//FF测试时做相应的更改
var aa = document.createElement("div");
area.appendChild(aa);
nodes[i] = aa;
nodes[i].subNodes = new Array();
for(var j=0;j<1000;j++)
{
var aa = document.createElement("div");
nodes[i].appendChild(aa);
nodes[i].subNodes.push(aa);
}
}
var stime = new Date();

for(var i=0,l=nodes.length;i<l;i++)
{
var havebadycount = 0;
var ihavebadycount = 0;
var insertcount = 0;
var maincount = 0;
var maints = new timeSpan();
var ts = new timeSpan();
var tempnode = nodes[i];
ts.start();
for(var j=0,l1=tempnode.subNodes.length;j<l1;j++)
if(tempnode.subNodes[j].children.length>0)ihavebadycount++;//FF测试时改一下这句
havebadycount = ts.timeSpan();
ts.start();
for(var j=0,l1=tempnode.subNodes.length;j<l1;j++)
tempnode.subNodes[j].innerHTML = "this is inserted HTML";
insertcount = ts.timeSpan();
maincount = maints.timeSpan();
var sourceString = "Node:("+i+")\nNodes:"+ tempnode.subNodes.length + "\nmainLoop:" + maincount + "\nisHaveBady:" + havebadycount + "\ninsertHtml:" + insertcount;
alert(sourceString);
}
}

function timeSpan()
{
this.stime = new Date();
this.timeSpan = function(){return (new Date())-this.stime;}
this.start = function(){this.stime = new Date();}
}
</script>

[dh20156]

关注中......

[bingdian37]

正在测试和调整代码。。。。。。

[bingdian37]

谢谢gzdiablo的测试代码

[卐如是我斩卍]

最近，我也遇到类似问题：
用google api 在地图上画700个点，130条线。然后在点击'确定'按钮的时候在函数composeData中用strData += ...的方式循环组装字符串数据。700次循环啊，速度奇慢无比！只要不是组装字符串，速度就不慢。
我晕啊