A Rendering Performance Guide for Developers by Paul Lewis #perfmatters at SFHTML5


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.

Not all layout is trigger by Javascript – e. g. transition triggered by hover

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.

Work is often triggered by Javascript, but not done in Javascript (often in browser implementation in C++)

Treat JS benchmarks with deep skepticism.

Layout and paint is probably bottleneck, Javascript probably is not.

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