但是经过10年的努力,为什么浏览器DOM仍然如此缓慢？

Question

Web浏览器DOM自90年代末开始出现,但它仍然是性能/速度方面最大的限制因素之一.

我们拥有来自谷歌,Mozilla,微软,Opera,W3C以及为我们所有人开发网络技术的各种其他组织的世界上最杰出的人才,所以显然这不是一个简单的"哦,我们没有优化它" 问题.

我的问题是,如果我要在网络浏览器上专门处理这个问题,为什么我会这么难以让它运行得更快？

我的问题是不问是什么使得它缓慢,则问,为什么还没有它变得更快？

这似乎与其他地方的情况有关,例如JS引擎的性能接近C++代码.

快速脚本示例:

for (var i=0;i<=10000;i++){
    someString = "foo";
}

由于DOM缓慢的例子:

for (var i=0;i<=10000;i++){
    element.innerHTML = "foo";
}

根据要求提供的一些细节:

在基准测试之后,看起来这不是一个无法解决的慢问题,但通常使用错误的工具,并且使用的工具取决于您跨浏览器的操作.

看起来浏览器之间的DOM效率差别很大,但我最初认为dom缓慢且无法解决的假设似乎是错误的.

我对Chrome,FF4和IE 5-9进行了测试,您可以在此图表中看到每秒的操作数:

在此输入图像描述

使用DOM API时Chrome很快就会闪电,但使用.innerHTML运算符要慢得多(速度慢1000倍),但在某些方面,FF比Chrome差(例如,附加测试要慢得多) Chrome),但InnerHTML测试运行速度比chrome快得多.

IE似乎实际上在使用DOM追加时变得越来越糟糕,并且随着你从5.5开始的版本更好地使用innerHTML(即IE8中的73次/秒现在在IE9中的51次/秒).

我在这里有测试页面:

有趣的是,在生成DOM时,似乎不同的浏览器似乎都面临着不同的挑战.为什么这里有这样的差距？

Answer 1

当您在DOM中更改某些内容时,它可能会有无数的副作用与重新计算布局,样式表等有关.

这不是唯一的原因:当您设置时,您element.innerHTML=x不再处理普通的"存储值此处"变量,而是使用特殊对象在设置时更新浏览器中内部状态的负载.

充分的影响element.innerHTML=x是巨大的.粗略概述:

所有这些更新都必须通过一个连接Javascript和HTML引擎的API.Javascript如此快速的一个原因是我们将它编译成更快的语言甚至是机器代码,因为值的行为是明确定义的,所以会发生大量的优化.通过DOM API工作时,没有这种可能.其他地方的加速已经让DOM落后了.