相关疑难解决方法(0)

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次/秒).

我在这里有测试页面:

http://jsperf.com/browser-dom-speed-tests2

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

我试图了解如何集成D3和React.具体来说,我试图了解如何使用D3渲染可视化对React的影响.正如这个优秀的问题所解释的那样:

[...]目前没有很好的方法可以使用React和D3 [...]这是因为在React世界中你不进行直接的DOM操作,但是在d3世界中你唯一能做的就是这样做.

答复继续说

在我看来,目前对Force Layouts等的共识是简单地退出React以获取这些组件并让d3做其事.这不是理想的,但它的性能更高.

让D3照顾渲染对React有什么影响？它是否只会影响使用D3或其他组件的组件的性能？例如,可以用某种方式使用D3螺丝和React的虚拟DOM直接操作DOM吗？我基本上试图了解使用D3需要支付的价格.