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