what does Recalculate Layout Paint mean in chrome developer tool TimeLine records?

Question

what does Recalculate Layout Paint mean in chrome developer tool TimeLine records? and how to improve the page performance by reduce the page Recalculate,Layout and Paint's count? can give some suggestion?thanks

Answer 1

Basically, they're your browser figuring out how to draw the changes that you made to the page.

Don't worry about getting rid of them -- if you did that, your site would be static. However... ...if you want to do something that IS useful for performance, which does have to do with reflows and repaints, then batch your changes together.

Lets say that you got a job at Twitter. And your job is to write the next version of the window that adds each twitter post to the screen.

If a user gets 250 new tweets in their timeline, and you add each one in a loop, one after the other, the browser is going to slow way down, because every time you add one, it will have to reflow (move things around to make space for the thing you added) and repaint (style everything that was affected by the addition).

A better way of doing it would be to build the list of new tweets together off-DOM (ie: with elements that aren't actually on the page right now), and then add them all at once. This cuts down on the number of times that a browser has to figure out where everything needs to go.

@Fabricio -- Micro-optimizing might not be great, but appending hundreds of browser elements in a loop, versus putting all of them in at the same time can make a big difference. Just ask the Twitter guys, who weren't bothering to cache their jQuery objects.

Answer 2

Here's a very handy list of properties and methods that trigger the layout (reflow) of a page:

http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

You want to minimize these calls as much as possible -- especially in situations where performance is critical, such as during the scroll event, or when animating large blocks of content.