CODEWITHSUNDEEP
htmlcssperformancelayout
desau
desau

Reputation: 3021

How to measure browser layout performance

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

Upvotes: 3

Views: 1058

Answers (2)

magzalez
magzalez

Reputation: 1406

Here's a really interesting test for the browser itself:

Maze Solver: CSS3 Layout Performance Test

Performance on the web is multi-dimensional. In this test we focus on the browser layout engine to exercise the browser's handling of CSS 2.1 and CSS 3 layout constructs. These constructs are used to style HTML, and the layout engine is an important component of overall web browser performance.

Again, this test is for the browser itself, not your code, which, if I understand correctly, is what you're looking for.

Upvotes: 0

user188654
user188654

Reputation:

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.

Upvotes: 2

Related Questions