Both fast loading and fast performance matters.
Request -> Response -> Parsing HTML (tag soup -> DOM) -> Applying CSS
Optimize CSS selectors – no need, because browser is very good at it.
DOM + CSS -> Render tree
Looks like a DOM, but they miss non-readable things (html, head, display: none) and have more things (pseudo elements)
Render tree has to layout boxes on the page – Layout.
We know where the boxes are, now we need to fill them with pixels.
Chrome rasterizer - Skia http://www.chromium.org/developers/design-documents/graphics-and-skia
Draw bitmap = image decode + resize
Moving elements – damaging areas and making them dirty –> have to re-run whole paint process.
Layer creation - implementation specific
Rasterizing happens in tiles.
Bandwidth between CPU and GPU on mobiles are really limited.
Small style changes can have bit layout knock-ons.
offsetWidth is causing layout to get the dimension.
TIP: Do not ask for dimensions in loops.
TIP: When moving things, put them into separate layers.
TIP: Putting thing into separate layer is not solution always.
Try to avoid repeated painting.
Layer have memory, management and transfer costs.
setTimeout and setInterval are not tight to browser refresh rate, use Request animation frame instead.
Scrolling causes paints – so try to do as little possible as possible.
TIP: Switch off hover effects while scrolling.
TIP: Debounce scroll handlers.
Treat JS benchmarks with deep skepticism.
Interacting with DOM is fast, changes to DOM but usually trigger recalc, layout and paint.
Performance should be on the list of priorities for web dev.
Profile, then fix. Do not use perf tip blindly.
Profile early, profile often.
Q&A from https://vimeo.com/77591536
Use CSS effects, but know what you are getting into. > Is the styling worth the painting cost?
Try it, profile it