Layout is where the browser figures out the geometric information for elements: their size and location in the page. Each element will have explicit or implicit sizing information based on the CSS that was used, the contents of the element, or a parent element. The process is called Layout in Chrome, Opera, Safari, and Internet Explorer. In Firefox it’s called Reflow, but effectively the process is the same.
Similarly to style calculations, the immediate concerns for layout cost are:
- The number of elements that require layout.
- The complexity of those layouts.
TL;DR
- Layout is normally scoped to the whole document.
- The number of DOM elements will affect performance; you should avoid triggering layout wherever possible.
- Assess layout model performance; new Flexbox is typically faster than older Flexbox or float-based layout models.
- Avoid forced synchronous layouts and layout thrashing; read style values then make style changes.
See the source link for details and solutions.