高性能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测试函数运行速度

相关阅读:
vue 组件之间的通讯方式
vue 路由4种传参方式
vue+axios封装已文件流的形式导出文件
vue 开发环境正常打包之后背景图片无法访问或者element-ui的icon找不到
vue 优化webpack引入CND
microtime() — 返回当前 Unix 时间戳和微秒数
将一个字符串分隔为组成它的字符
Laravel 伪静态配置
VSCode
array_merge()&array_combine()合并数组函数

原文地址：https://www.cnblogs.com/jikey/p/2084627.html