Style Recalculation

Style recalculation determines the computed styles that apply to DOM elements after changes to the document or stylesheets. It is a rendering step that can be triggered by DOM mutations, CSS changes, or state changes such as adding a class.

Browsers maintain style information for DOM elements based on matching CSS rules, inheritance, and the cascade. When relevant DOM or CSS state changes, the browser may need to recalculate which styles apply to affected elements.

The result is a set of computed style values for elements, such as `display`, `color`, `width`, and `font-size`. The browser can often limit the work to elements whose styles may have changed rather than recalculating the entire document.

Style recalculation is distinct from layout. Recalculation determines the styles that should apply; layout uses those styles to determine geometry such as positions and dimensions. A style change can require both steps when it affects geometry.

JavaScript can trigger style-related work indirectly. For example, adding a class can invalidate styles, while reading certain layout-related properties after a change can force the browser to perform pending rendering work synchronously, depending on the situation.

Key points

• Style recalculation resolves applicable CSS rules and produces computed styles.
• DOM mutations and CSS changes can invalidate previously calculated styles.
• Browsers generally try to recalculate only affected portions of the document.
• Style recalculation is separate from layout, although one can lead to the other.
• Frequent invalidations can contribute to rendering performance problems.

Interview questions

What is style recalculation in a browser?

Style recalculation is the process of determining the computed styles for DOM elements when their styling inputs may have changed. The browser considers applicable CSS rules, inheritance, and the cascade. It then has updated style information that later rendering stages can use. The browser can often restrict this work to affected elements.

What kinds of changes can trigger style recalculation?

Changes to the DOM can affect which selectors match, and changes to CSS can alter the styles that apply. Adding or removing a class is a common example. Changes involving inherited properties can also affect descendants. The browser tracks these dependencies so it can avoid unnecessary work when possible.

How does style recalculation differ from layout?

Style recalculation determines the computed CSS values that apply to elements. Layout then uses relevant computed styles to calculate geometry, including dimensions and positions. A style change such as `color` may require style recalculation without changing layout geometry. A change such as `width` can require both recalculation and subsequent layout work.

Why can frequent DOM or CSS changes hurt frontend performance?

Repeated changes can repeatedly invalidate style information and cause the browser to perform more rendering work. The cost depends on how many elements are affected and whether later stages such as layout and painting are also required. Batching related DOM or style updates can reduce unnecessary intermediate work. Performance profiling is useful because the actual cost depends on the page structure and workload.

Can reading layout information after changing styles cause synchronous rendering work?

Yes, some reads of layout-dependent information can require the browser to make pending style or layout information current before returning a value. This can create a forced synchronous rendering pattern when writes and reads are repeatedly interleaved. The exact behavior depends on the API and browser state. A common optimization is to batch writes separately from reads when practical.