Chris J. Lee

Dallas Drupal Developer

You are here

Most costly parts of browser rendering for browser performance and paint

Most Costly Parts of Browser Paints

As discussed at JSConf 2014, Paul Irish discusses the anatomy and breaks down the causes of browser paints.

The most costly parts of browser paints include the following:

  1. Layout - Changing the layout. This requires repaint.
  2. Visual Effects - Rendering that doesn't affect geometry therefore doesn't need to be painted.
  3. Compositing Layout - Handled at the compositor level.

Layout Changing the layout

  • Width
  • Border
  • Left
  • Top

Visual Effects - does not affect geometry:

  • box-shadow
  • border-radius
  • background
  • outline

Compositor Level Rendering

  • Transform
  • Opacity

Paul irish discusses this around 9:25 in this video.

At 10:55, i found this pretty useful. Paul Irish describes 4 things a browser can transition jank-free:

  • Size
transform: scale(n)
  • Position -
transform: translate(npx)
  • Rotation -
transform(rotate(ndeg))
  • Opacity -
opacity: 0...1
© 2017 Chris J. Lee