如何测量浏览器布局性能 [英] How to measure browser layout performance

问题描述

我在大型网络应用程序中解决性能回归问题。我最近做了一些更改，删除IFRAME，并将内容直接放入原始的DOM，以提高性能。事实上，初始加载时间更好，但我发现了一个奇怪的问题。

I'm troubleshooting a performance regression in a large webapp. I recently made some changes to remove an IFRAME and put the contents directly into the original DOM, to make performance better. Indeed, initial load time is better, but I've found a strange problem.

看起来，各种布局（动画和滚动） 。

It seems that various layout (animation and scrolling) changes are MUCH slower with this iframe removal. I've narrowed it down to know it's not javascript.

我已删除所有运行于计时器和事件上的javascript。

I've removed all javascript that was running on timers and events.

我可以看到缓慢的性能，当简单地设置一个元素有1秒的CSS转换，改变其style.top和style.left的类名。 （它已经绝对定位）。这个元素动画到新位置非常缓慢..似乎约5-10 FPS，而在IFRAME它是40+ FPS。

I can see the slow performance when simply setting a classname on an element which has a 1 second CSS transition, which changes its style.top and style.left. (It's already absolutely positioned). This element animates to the new location very slowly .. seems like about 5-10 FPS, whereas with the IFRAME it was 40+ FPS.

所以 - 我想知道是否有一些方法来衡量实际的浏览器布局性能。我在Safari，IE，Firefox和Chrome上看到这个问题 - 所以任何这些都可以使用（虽然我喜欢Firefox，因为问题似乎是最定义的）。

So -- I'm wondering if there is some way to measure actual browser layout performance. I see this problem across the board on Safari, IE, Firefox and Chrome -- so any of these would be fine to use (though I prefer Firefox because the problem seems to be most defined there).

推荐答案

开始的好地方 - Speed Tracer 和 Page Speed 。他们将向您展示有关布局如何影响性能的许多有用信息，以及您可以如何改进它。虽然Speed Tracer是Chrome扩展程序，但其数据也会反映其他浏览器的性能。

A good place to start - Speed Tracer and Page Speed. They will show you a lot of useful information about how your layout affects performance and what you can do to improve it. Although Speed Tracer is a Chrome extension its data will also reflect performance in other browsers too.

这篇关于如何测量浏览器布局性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！