高性能JS--比较nextSibling,ChildNodes,Children速度-阿里云开发者社区

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

2017-11-14 977

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<ol>

<li>

<h3>nextSibling</h3>

</li>

<li>

<h3>childNodes</h3>

</li>

<li>

<h3>children</h3>

</li>

</ol>

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>

原书中说：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;
 } 
 

  
 