What is layout thrashing, and how do you avoid it to optimise rendering performance?

Sample answer preview

Layout thrashing, also called forced synchronous layout, happens when JavaScript repeatedly forces the browser to recalculate layout within a single frame. To see why, you need the rendering pipeline: style, layout, paint, composite.