3.3.1 Continuous paint mode.


Continuous painting mode is a tool that helps you identify which elements are costly on the page. It puts the page into an always repainting state, showing a counter of how much painting work is happening. Then, you can hide elements and change styles, watching the counter, in order to figure out which styles are effecting paint.

Continuous paint mode
  • Open the example-site/index.html page in your browser
  • Open up the browsers JS console alt + ctrl + j
  • Open the drawer panel and go the Rendering tab.
  • Check the "Enable continuous page repainting" option
  • Scroll around the page to see the painting behaviour.

Now you can use the syles panel to turn off style properties on certain elements within the pagr to see their effects.

Hint:

Remember certain CSS properties are more expensive than others. For instance border-radius

3.3.2 Refactor


Now that you have isolated the CSS styles which are causing long paints. Make the changes permanent by editing the style.css file and reload the page to see your changes take effect.