如何衡量浏览器布局性能

Question

3

我正在解决一个大型web应用程序的性能退化问题。最近我做了一些更改，删除了一个IFRAME并将其内容直接放入原始DOM中，以提高性能。确实，初始加载时间更快，但我发现了一个奇怪的问题。

似乎各种布局（动画和滚动）的更改在这个iframe移除后变得非常缓慢。我已经缩小了范围，知道这不是JavaScript引起的问题。

我已经删除了所有在计时器和事件上运行的JavaScript代码。

当仅仅在元素上设置类名时，可以看到缓慢的性能表现，该元素具有1秒的CSS过渡效果，它会更改style.top和style.left。（它已经绝对定位）。此元素缓慢地动画到新位置..看起来大约是5-10 FPS，而使用IFRAME时则为40+ FPS。

因此，我想知道是否有一种测量实际浏览器布局性能的方法。我在Safari、IE、Firefox和Chrome上都看到了这个问题，所以任何一个都可以使用（尽管我更喜欢Firefox，因为这个问题似乎在那里最明确）。

- desau

2个回答

0

这是一个非常有趣的浏览器自身测试：

网络性能是多维的。在这个测试中，我们专注于浏览器布局引擎，以检验浏览器对CSS 2.1和CSS 3布局结构的处理能力。这些结构用于为HTML添加样式，而布局引擎是整体网络浏览器性能的重要组成部分。

再次强调，这个测试是针对浏览器本身的，而不是你的代码，如果我理解正确，这也是你所寻找的。

- magzalez

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user188654 · Accepted Answer

一个好的起点是 - Speed Tracer 和 Page Speed。它们将向您展示有关布局如何影响性能以及您可以采取哪些措施来改进它的许多有用信息。虽然 Speed Tracer 是一个 Chrome 扩展程序，但其数据也会反映在其他浏览器中的性能。