如何衡量浏览器布局性能

时间:2012-04-23 15:40:35

标签: html css performance layout

我正在对大型网络应用中的性能回归进行故障排除。我最近做了一些更改以删除IFRAME并将内容直接放入原始DOM中,以提高性能。实际上,初始加载时间更好,但我发现了一个奇怪的问题。

似乎各种布局(动画和滚动)更改在删除此iframe时变得更慢。我把它缩小到知道它不是javascript。

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

我只能在一个具有1秒CSS转换的元素上设置一个类名,这会改变它的style.top和style.left。 (它已经绝对定位)。这个元素非常缓慢地动画到新位置..看起来大概是5-10 FPS,而IFRAME则是40+ FPS。

所以 - 我想知道是否有某种方法来衡量实际的浏览器布局性能。我在Safari,IE,Firefox和Chrome上全面看到了这个问题 - 所以这些都可以使用(虽然我更喜欢Firefox,因为问题似乎在那里定义最多)。

2 个答案:

答案 0 :(得分:2)

开始的好地方 - Speed TracerPage Speed。它们将向您展示有关布局如何影响性能以及您可以采取哪些措施来改进性能的大量有用信息。虽然Speed Tracer是Chrome扩展程序,但其数据也会反映其他浏览器的性能。

答案 1 :(得分:0)

这是对浏览器本身的一个非常有趣的测试:

Maze Solver: CSS3 Layout Performance Test

  

网络上的表现是多维的。在这个测试中,我们专注于浏览器布局引擎来练习浏览器对CSS 2.1和CSS 3布局结构的处理。这些构造用于设置HTML样式,布局引擎是整个Web浏览器性能的重要组成部分。

同样,这个测试是针对浏览器本身而不是你的代码,如果我理解正确的话,那就是你正在寻找的。