Web Performance: Excessive Reflow and How to Minimize It

What’s a Reflow?

Critical Rendering Path

Parsing

Document Object Model
Document Object Model
CSS Object Model
CSS Object Model

Render Tree

Render Tree
Render Tree

Layout

Paint

Many Reasons to Reflow

  1. If the mutation is made to the document that can potentially cause a layout shift.
    This is fairly straightforward. Whenever an element changes its position or dimension, the web browser is required to recalculate its surrounding (including its ancestors) in order to paint correctly.
  2. If measurement happens after a mutation.
    Web browser keeps a version of cache that contains intrinsic values of each node, a mutation made onto a DOM node will invalidate said cache thus requiring recalculation from the web browser.

DOM Manipulation

Excessive Reflow
Excessive Reflows Avoided

Style Change

Measurement

Reflows Caused by Measurement
Optimized Reflows

Image Load

<img src="image.jpg" width="200" height="100" />

Window Resize

Hidden vs None

Dealing with animations

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store