0

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?

NoBugs
  • 9,310
  • 13
  • 80
  • 146

1 Answers1

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.

Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55
  • Thanks, can you give an example? – NoBugs Jun 19 '13 at 03:44
  • An example of what? Pages that paint more than you'd expect? – Boris Zbarsky Jun 19 '13 at 04:49
  • Yes - how is this a web-developer's tool, vs a Firefox developer's tool to check where Firefox may be needlessly repainting? – NoBugs Jul 01 '13 at 02:51
  • 1
    @NoBugs It's a web developer's tool to the extent that there are parts of the web page that are getting modified when they shouldn't be. Issues that people have found with it include large animated backgrounds behind `opacity: 0.99` divs, scripts that keep doing `body.innerHTML = body.innerHTML`, and scripts that force relayout of the whole page by removing content, triggering a relayout, then reinserting the content again. – Boris Zbarsky Jul 01 '13 at 03:45