Layout → Paint → Composite
What types of things trigger a layout change (reflow)?
Practical tip: If you are going to change elements' styles, try to do it in batch to minimize the number of reflows.
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).
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.
Selector performance is probably not a bottleneck anymore.
CSS animations usually outperform jQuery animations.