Layout thrashing is killing the performance of your web application

Layout Thrashing occurs when Javascript violently writes, then reads, from the DOM, multiple times causing document reflows and then web browser has to repaint the web page, which causes significant delay when loading the page.

Depending on the number of reflows/repaints and the complexity of the web page, there is potential to cause significant delay when loading the page, especially on low power devices such as mobile phones or tablets.

What causes Layout Thrashing ?

When the DOM is written to, layout is ‘invalidated’, and at some point needs to be reflowed. The browser is a lazy guy and wait until the end of current operation (or frame) to perform the reflow. But if we ask for a geometric value back from the DOM before the current operation (or frame) is complete, the browser has to perform layout early, this is known as ‘forced synchonous layout’.

How to detect Layout Thrashing:

The best way to find out if you are causing layout thrashing is to profile your page load. For those unfamiliar with programming, to ‘profile’ something basically means to measure how long your code takes to execute and to allow you to find out which pieces of your code take the longest time.

In Chrome, press F12 to bring up the Developer tools, and then select the ‘Timeline’ tab. In the top left is a grey circle. Press this button, reload your web page and then press this button again to profile your page.

What causes the browser to layout?

Do you want to know the properties and functions in the DOM APIs that can cause layout ? There are a quite a few.