Web 技术研究所

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

DOM 操作真的很慢

  DOM 操作的类型有很多,遍历文档树只是其中的一种而已。其实遍历文档树比我想象的要快得多,因为现在的 DOM 已经对 Property 级别的属性做了很多优化了。但 DOM 操作的瓶颈并不在这儿,关键点还是 Attibute 级别的属性以及 Style 部分的操作。
  下面的代码是遍历文档,只不过前者多遍历了 Attribute 和 Style,结果速度就要呵呵了。 <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 style="coloe:red;">' + html + '</div>';
  }
  html = Array(4).join(html);
}
document.write(html);

// 遍历元素及其属性和样式
var walk1 = function(parent) {
  if(parent.nodeType !== 1) return;
  for(var i = 0; i < parent.attributes.length; i++) {
    parent.getAttribute(parent.attributes[i]);
  }
  for(var i = 0; i < parent.style.length; i++) {
    parent.style[i];
  }
  for(var node = parent.firstChild; node; node = node.nextSibling) {
    walk1(node);
  }
};

// 只遍历元素
var walk2 = function(parent) {
  if(parent.nodeType !== 1) return;
  for(var node = parent.firstChild; node; node = node.nextSibling) {
    walk2(node);
  }
};

</script>

<button>walk1(document.documentElement);</button>
<button>walk2(document.documentElement);</button>

  这是个不公平的测试,但它们之间的差异实在是太大,即使测试本身不公平,结果也是预料之外的。所以我觉得 DOM 操作真正的瓶颈不是数本身,而是叶子上的东西。而且上面的测试只是给每个元素加上一个 style="coloe:red;" 而已,实际场景还会有更复杂的东西,所以还会更慢。而且上面我只测试了读操作,写操作还是也考虑上,结果就是个悲伤的故事了。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^