I read some posts that introduce "Layout thrashing" and "reflow/repaint", which made me confused. In some posts, it said that "layout thrashing" and "reflow" are the same thing. (/web-performance-dom-reflow-76ac7c4d2d4f) ()

But in csstrigger and this, the CSS properties that caused each are different. If they are the same, the properties that caused each would be the same, that makes sense. So are "layout thrashing" and "reflow" the same?

I read some posts that introduce "Layout thrashing" and "reflow/repaint", which made me confused. In some posts, it said that "layout thrashing" and "reflow" are the same thing. (https://betterprogramming.pub/web-performance-dom-reflow-76ac7c4d2d4f) (https://gist.github./paulirish/5d52fb081b3570c81e3a)

But in csstrigger. and this, the CSS properties that caused each are different. If they are the same, the properties that caused each would be the same, that makes sense. So are "layout thrashing" and "reflow" the same?

• javascript
• html
• css

Share Improve this question Follow edited Jan 25, 2022 at 10:49 Yilmaz 49.9k1818 gold badges217217 silver badges270270 bronze badges asked Mar 3, 2021 at 2:49 iwandereriwanderer 11911 silver badge55 bronze badges 1

• Basically Reflow = Layout. Layout Thrashing = Synchronous Reflow that could have been avoided. – Kaiido Commented Jan 25, 2022 at 10:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

They are different.

Reflow

Reflow (a.k.a Layout) is a process of calculating DOM element's size and position in a web page.

Reflow occurs when:

• an element is added, removed, or updated in the DOM
• modification of the content on the web page
• take measurements of an element such as offsetHeight or getComputedStyle
• change a CSS style
• resize the browser window, etc.

Whenever you change something in the DOM, browser will re-calculate the positions and dimensions of DOM elements and then repaint the screen.

Layout Thrashing

Reflows are expensive, so browsers try to queue the changes and apply them in batches to minimize the required reflows. This strategy allows the browsers to apply multiple styles and do only one reflow.

If our Javascript code requests the style information by reading properties such as:

• offsetTop, offsetLeft, offsetWidth, offsetHeight
• scrollTop, scrollLeft, scrollWidth, scrollHeight
• clientTop, clientLeft, clientWidth, clientHeight

or by calling getComputedStyle() and if there are any queued changes, in order to provide the latest style information, browser needs to flush all the queued changes, perform the reflow and then provide you the requested style information.

This prevents browsers from optimizing reflows.

This can get even worse if we request and set styles repeatedly in quick succession, for example in a loop:

for (let i = 0; i < 10; i++) {
    elements[i].style.width = (container.offsetWidth + 10) + "px";
}

In the above code example, we are continuously reading and changing style information.

This type of code prevents browsers from optimizing reflows because once your code changes the style information and then requests the style information again in the next iteration of the loop, browser has to perform the reflow, provide you the latest style information, and repaint the screen. All this happening inside a loop makes it worse.

This is what's known as layout thrashing because our code will cause the browsers to continuously recalculate the dimensions and positions of the DOM elements.

Above code can be improved by reading the style information only once, just before the loop starts.

const containerWidth = container.offsetWidth;

for (let i = 0; i < 10; i++) {
    elements[i].style.width = (containerWidth + 10) + "px";
}

Above code will allow the browser to optimize reflows because we only request the style information once and the changes to the width of the elements inside the loop can be queued and applied in batches, leading to fewer reflows as pared to the previous code example.

Further Reading:

• Avoid Large, Complex Layouts and Layout Thrashing

• Repaints and Reflows: Manipulating the DOM responsibly

Layout thrashing occurs when we perform a series of consecutive reads and writes to DOM, in the process not allowing the browser to perform layout optimizations.

Changing attributes of one element or modifying its content doesn’t affect only that element; instead, it can cause a cascade of changes. For example, setting the width of one element can lead to changes in the element’s children, siblings, and parents. Here is we use term reflow. A reflow putes the layout of the page. A reflow on an element reputes the dimensions and position of the element, and it also triggers further reflows on that element’s children, ancestors, and elements that appear after it in the DOM. So whenever a change is made, the browser has to calculate the impact of those changes.

Since recalculating is expensive, browsers batch as many write operations as possible in a queue so that these operations can be executed and injected into DOM in one go. Then if we need to update the layout, we give order to the browser and the browser executes all batched operations and finally updates the layout. Layout thrashing occurs when our code performs a series of consecutive reads and writes to the DOM, not allowing the browser to optimize layout operations.

One of the reasons why React.js achieves great performance is by eliminating the layout thrashing. React.js performs all modifications on the virtual DOM. Then, at an appropriate time, React uses the virtual DOM to figure out what changes have to be made to the actual DOM, in order to keep the UI in sync. This batching of updates increases the performance of applications.