3

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.

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

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.

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).

4

2 回答 2

2

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

于 2012-04-23T15:42:27.067 回答
0

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

迷宫求解器：CSS3 布局性能测试

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

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

于 2012-04-23T15:48:16.973 回答