Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

二叉树的风格遍历文档

  最近在一个 80 后大叔的技术分享上看到一段文档遍历的优化代码。一开始我觉得这销魂的写法应该不会带来多少性能上的优化,但后来经过一番愉快地讨(sī)论(bī),并做了一些测试之后发现我的猜测是错的,这种文档遍历方式的优化确实非常有效。
  通常遍历后代元素我会用 childNodes 或 children 之类的东西,以数组的形式去遍历。但貌似 DOM 内部是以二叉树的形式来存放 DOM 的,也就是说同级节点是一组链表,而不是数组。所以我以数组方式去遍历就会比较慢,测试如下。 <script src="http://www.web-tinker.com/share/performance.js"></script>
<script>

// 生成一坨奇怪的 HTML 来模拟复杂文档
var html = '';
for(var i = 0; i < 4; i++) {
  for(var j = 0; j < 5; j++) {
    html = '<div>' + html + '</div>';
  }
  html = Array(4).join(html);
}
document.write(html);

// 链表式遍历
var walk1 = function(parent) {
  for(var node = parent.firstChild; node; node = node.nextSibling) { 
    walk1(node);
  }
};

// 数组式遍历
var walk2 = function(parent) {
  var childNodes = parent.childNodes;
  var length = childNodes.length;
  for(var i = 0; i < length; i++) {
    walk2(childNodes[i]);
  }
};

</script>

<button>walk1(document.documentElement);</button>
<button>walk2(document.documentElement);</button>
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^