高性能JS--比较nextSibling,ChildNodes,Children速度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<input type="button" value="start-test" id="testBtn" />
<ol>
<li>
<h3>nextSibling</h3>
<p id="test-1"></p>
</li>
<li>
<h3>childNodes</h3>
<p id="test-2"></p>
</li>
<li>
<h3>children</h3>
<p id="test-3"></p>
</li>
</ol>
<div id="mydiv"></div>
<script type="text/javascript">
function $(){ return document.getElementById(arguments[0]); };
for(var i=0; i<8000; i++){
var d = document.createElement('div');
d.innerHTML = '第一重div<p>第二重p<span>第三重span</span></p>';
$('mydiv').appendChild(d);
}
$('testBtn').onclick = startTest;
function startTest(){
var time1 = new Date();
var tar = testNextSibling();
$('test-1').innerHTML = '耗时：' + (new Date() - time1) + '毫秒 ' + tar;
var time2 = new Date();
var tar2 = testChildNodes();
$('test-2').innerHTML = '耗时：' + (new Date() - time2) + '毫秒 ' + tar2;
var time3 = new Date();
var tar3 = testChildren();
$('test-3').innerHTML = '耗时：' + (new Date() - time3) + '毫秒 ' + tar3;
}
function testNextSibling(){
var el = $('mydiv'),
ch = el.firstChild,
name = '';
do {
name = ch.nodeName;
} while (ch = ch.nextSibling);
return name;
}
function testChildNodes(){
var el = $('mydiv'),
ch = el.childNodes,
len = ch.length,
name = '';
for(var count=0; count<len; count++){
name = ch[count].nodeName;
}
return name;
}
function testChildren(){
var el = $('mydiv'),
ch = el.children,
len = ch.length,
name = '';
for(var count=0; count<len; count++){
name = ch[count].nodeName;
}
return name;
}
</script>
</body>
</html>

原书中说：IE中nextSibling比childNodes表现优异。在IE6中，nextSibling快16倍，IE7中是105倍。

经测试后发现：IE7下：nextSibling要快一些，childNodes与childnren速度相当。IE6下：nextSibling与childNodes差别相当大，children稍快。FF下还是nextSibling快一点。

正美：

javascript测试函数运行速度

posted @ 2011-06-19 13:05 豪情阅读(3415) 评论(0) 编辑收藏举报

努力加载评论中...

刷新页面返回顶部

高性能JS--比较nextSibling,ChildNodes,Children速度

公告