<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br /><head><br /><title></title><br /><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><br /></head><br /><body><br /><input type="button" value="start-test" id="testBtn" /><br /><ol><br /><li><br /><h3>nextSibling</h3><br /><p id="test-1"></p><br /></li><br /><li><br /><h3>childNodes</h3><br /><p id="test-2"></p><br /></li><br /><li><br /><h3>children</h3><br /><p id="test-3"></p><br /></li><br /></ol><br /><div id="mydiv"></div><br /><script type="text/javascript"><br />function $(){ return document.getElementById(arguments[0]); };<br />for(var i=0; i<8000; i++){<br />var d = document.createElement('div');<br />d.innerHTML = '第一重div<p>第二重p<span>第三重span</span></p>';<br />$('mydiv').appendChild(d);<br />}<br />$('testBtn').onclick = startTest;<br />function startTest(){<br />var time1 = new Date();<br />var tar = testNextSibling();<br />$('test-1').innerHTML = '耗時：' + (new Date() - time1) + '毫秒 ' + tar;<br />var time2 = new Date();<br />var tar2 = testChildNodes();<br />$('test-2').innerHTML = '耗時：' + (new Date() - time2) + '毫秒 ' + tar2;<br />var time3 = new Date();<br />var tar3 = testChildren();<br />$('test-3').innerHTML = '耗時：' + (new Date() - time3) + '毫秒 ' + tar3;<br />}<br />function testNextSibling(){<br />var el = $('mydiv'),<br />ch = el.firstChild,<br />name = '';<br />do {<br />name = ch.nodeName;<br />} while (ch = ch.nextSibling);<br />return name;<br />}<br />function testChildNodes(){<br />var el = $('mydiv'),<br />ch = el.childNodes,<br />len = ch.length,<br />name = '';<br />for(var count=0; count<len; count++){<br />name = ch[count].nodeName;<br />}<br />return name;<br />}<br />function testChildren(){<br />var el = $('mydiv'),<br />ch = el.children,<br />len = ch.length,<br />name = '';<br />for(var count=0; count<len; count++){<br />name = ch[count].nodeName;<br />}<br />return name;<br />}<br /></script><br /></body><br /></html>
運行代碼
原書中說：IE中nextSibling比childNodes表現優異。在IE6中，nextSibling快16倍，IE7中是105倍。
經測試後發現：IE7下：nextSibling要快一些，childNodes與childnren速度相當。IE6下：nextSibling與childNodes差別相當大，children稍快。FF下還是nextSibling快一點。
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;
}
正美：
javascript測試函數運行速度
