What is force layout and what are its disadvantages?

Force layout is the process where the browser is forced to recalculate styles and the positioning of elements on the page before the current rendering cycle is complete. This occurs when JavaScript accesses properties of an element that depend on its current display (e.g., offsetWidth, offsetHeight, getComputedStyle()) immediately after changing the style or DOM structure, which can affect these properties.

The disadvantages of force layout include significant performance degradation. Each force layout requires the browser to perform costly operations for style calculation, rendering tree construction, and element positioning. If this happens repeatedly, for example, in a loop or during event handling, it can cause "jank" and a poor user experience.

Comparison with normal rendering:

Normal rendering	Force layout
DOM/style changes are cached	Calculations are performed immediately and forcibly
Repaint occurs at the end of the cycle	Repaint can happen at any moment
Optimized by the browser	Reduces performance

Example code that triggers force layout:

// First, change the style, which may require recalculation
element.style.width = '100px';

// Then, immediately request a property dependent on the new style
// This forces the browser to perform a force layout
const width = element.offsetWidth;

To avoid force layout, group style changes, use requestAnimationFrame to read properties, or avoid reading layout properties immediately after changes.