How to use visual paint feedback mode?

Question

Firefox 22 introduces visual paint feedback mode. I haven't yet found a guide on how to fully utilize this feature. I see it change colors and flicker different colors when updating, but what do the different colors mean? How can we interpret the results and use it to gain performance in our web apps?

Answer 1

The colors don't mean anything: they're actually randomly generated. What means something is a color change: every time there is a color change in an area, that area has been repainted.

The point is to see which parts of your page are getting repainted when, so you can catch things like most of the page getting repainted due to a change that you thought only affected a small part of the page.