Lenny Sirivong @lsirivong
Parse HTML > Recalculate Styles > Layout > Paint > Composite Layers
- load - 1s
- prioritize first load content
- idol - 100ms
- pause after load, before user starts interacting with the site
- perfect for preloading lower priority content
- animate - 16ms / frame
- animations should be 60fps, especially scroll & touch/drag
- response - 100ms
- responding to user input
- visual change
- layout property (width, height, position in relation to another - causes layout)
- most expensive
- paint only property
- paint property (color, shadow, background etc.)
- skips layout
- composite property
- skips layout & paint
- browser puts individual layers together. involves layer management
- most performant
csstriggers.com
~/src/iwp/web-workers-demo
http://output.jsbin.com/aqavin/2/quiet
http://udacity.github.io/60fps/lesson5/stopFSL/index.html
causing layout, and requesting style, causes the browser to recalc before being able to send result.
- ~/src/recalc
- show paint rectangles
http://www.html5rocks.com/static/demos/parallax/demo-1a/demo.html
layers help with paint costs
paint steps:
- update layer tree
- composite layers
generally browser will manage layers but you can promote elements to its own layer
// hint to the browser we intend to change this property at some point, browser can decide what to do
will-change: transform
// older browsers (safari)
// null transform hack
transform: translateZ(0);
http://udacity.github.io/60fps/lesson6/willChange/index.html
This isn't a silver bullet
Paul Lewis (@aerotwist) live debugging
https://www.youtube.com/watch?v=QU1JAW5LRKU
Udacity course on Browser Rendering Optimization
https://www.udacity.com/course/browser-rendering-optimization--ud860