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

最新推荐文章于 2023-07-04 10:18:36 发布

转载最新推荐文章于 2023-07-04 10:18:36 发布 · 83 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jikey/archive/2011/06/19/2084627.html

文章标签：

#xhtml #javascript #ViewUI

本文通过测试JavaScript中nextSibling、childNodes及children属性的访问速度，对比不同浏览器下的性能差异。实验结果显示，在IE7中nextSibling的表现最佳，而在IE6和其他浏览器中，尽管nextSibling仍然较快，但childNodes和children的速度也相对接近。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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快一点。