CSS

div .title #hello

div #hello .title

#hello .title div

#hello .title div

• get all div
• filter div inside .title elements
• filter .title element inside #hello element

Slow selectors

• tag
• *
• :not()

box-sizing is ok

Animation

Js Animation

CSS animation

WebAnimation API

JS animation

setTimeout

setInterval

requestAnimationFrame

CSS animation

• @keyframes
• transition

transitionend

WebAnimation API

https://w3c.github.io/web-animations/#dom-animation-animation

https://prezi.com/8qnu8ymtheu8/make-you-page-faster/

Layout

repaint/reflow

Display

reflow

font-size

reflow

pointer-events

Nothing

transform

Depends on browser

https://csstriggers.com/

How to make you page faster

• clever selectors
• change selectors smartly
• will-change and translateZ(0)
• contain

Contain

1. layout
2. paint
3. size
4. style
5. strict
6. content