高手请进,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;
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>
[解决办法]
关注中......
[解决办法]
这个效率降低应该是图片加载时的系统消耗
因为程序加载速度非常的快 不断需要渲染更多图片 所带来的系统损耗会很明显的影响程序运行
你可以尝试去掉图片 应该不会再有性能下降的问题
[解决办法]
貌似也就只能尽量减少客户端操作，操作多了，肯定会耗内存。顺便再bs一下ie的字符串操作。
