Front-end performance

How does the browser display pages?

Layout → Paint → Composite

Layout

What types of things trigger a layout change (reflow)?

Adding, removing, updating DOM nodes
Hiding a DOM node with display: none;
Resizing the window, changing font-size, scrolling

Practical tip: If you are going to change elements' styles, try to do it in batch to minimize the number of reflows.

Practical tip: cloneNode() an element, make changes to the copy, and swap it for the original.

Practical tip: If you have to make lots of changes, hide the element via display: none;, make your changes, and then unhide it (triggering only two reflows).

Paint, composite

Performing a re-paint and a re-composite only is faster than re-doing all three steps.

Ideally, we can skip re-painting as well, and re-composite only. This is typically quite fast.

3D transforms get elements on their own compositing layers and don't require a reflow or a repaint.

Sometimes the GPU can help out with these, too.

An awesome resource: CSS Triggers by Paul Lewis.

Other performance considerations

Selector performance is probably not a bottleneck anymore.

CSS animations usually outperform jQuery animations.

Debugging performance

Chrome DevTools: timeline view
chrome://tracing (A.K.A. about:tracing)