高手请进,js执行速度随页面元素的增加越来越慢是什么原因?有什么解决方法呢?
最近在测试一段代码的时候发现的这个问题
很郁闷

以下是对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

太奇怪了

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



------解决方案--------------------
你增加的网页的元素都在内存里面的啊，增加的越多，处理时间和显示的速度都会延长，所以会慢啊
------解决方案--------------------
加快DHTML 的一组技巧

http://www.knowsky.com/3744.html
------解决方案--------------------
这个原因是很多的, 要具体看你的应用和你的代码而定优化方案, 一千个节点量不算大.
------解决方案--------------------
看来都是高手们讨论的性能问题，只有学习的份了。

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

------解决方案--------------------
能不能让把循环放在server端呢，这样js就不用去耗费那么多时间了
------解决方案--------------------
如果不复杂就用.Net的回调实现局部刷新!

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


-----------------------
没有最好,只有更好!
http://www.crossgo.com
------解决方案--------------------
JF
------解决方案--------------------
好像是代码问题 我这样测试就好像没问题

<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;