Skip to content

Instantly share code, notes, and snippets.

@cs09g

cs09g/what-forces-layout.md

Forked from paulirish/what-forces-layout.md
Created July 23, 2019 08:01
Show Gist options
  • Save cs09g/b7bdbeaebfaf961135af1f299a8cb596 to your computer and use it in GitHub Desktop.
Save cs09g/b7bdbeaebfaf961135af1f299a8cb596 to your computer and use it in GitHub Desktop.
Download ZIP
What forces layout/reflow. The comprehensive list.
Raw
what-forces-layout.md

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
Scroll stuff
  • elem.scrollBy(), elem.scrollTo()
  • elem.scrollIntoView(), elem.scrollIntoViewIfNeeded()
  • elem.scrollWidth, elem.scrollHeight
  • elem.scrollLeft, elem.scrollTop also, setting them
Focus
  • elem.focus() can trigger a double forced layout (source&l=2923)
Also…
  • elem.computedRole, elem.computedName
  • elem.innerText (source&l=3440))

getComputedStyle

window.getComputedStyle() will typically force style recalc

window.getComputedStyle() will force layout, as well, if any of the following is true:

  1. The element is in a shadow tree
  2. There are media queries (viewport-related ones). Specifically, one of the following: (source)
  • min-width, min-height, max-width, max-height, width, height
  • aspect-ratio, min-aspect-ratio, max-aspect-ratio
  • device-pixel-ratio, resolution, orientation , min-device-pixel-ratio, max-device-pixel-ratio
  1. The property requested is one of the following: (source)
  • height, width
  • top, right, bottom, left
  • margin [-top, -right, -bottom, -left, or shorthand] only if the margin is fixed.
  • padding [-top, -right, -bottom, -left, or shorthand] only if the padding is fixed.
  • transform, transform-origin, perspective-origin
  • translate, rotate, scale
  • grid, grid-template, grid-template-columns, grid-template-rows
  • perspective-origin
  • These items were previously in the list but appear to not be any longer (as of Feb 2018): motion-path, motion-offset, motion-rotation, x, y, rx, ry

window

  • window.scrollX, window.scrollY
  • window.innerHeight, window.innerWidth
  • window.getMatchedCSSRules() only forces style

Forms

  • inputElem.focus()
  • inputElem.select(), textareaElem.select()

Mouse events

  • mouseEvt.layerX, mouseEvt.layerY, mouseEvt.offsetX, mouseEvt.offsetY (source)

document

  • doc.scrollingElement only forces style

Range

  • range.getClientRects(), range.getBoundingClientRect()

SVG

contenteditable

  • Lots & lots of stuff, …including copying an image to clipboard (source)

*Appendix

  • Reflow only has a cost if the document has changed and invalidated the style or layout. Typically, this is because the DOM was changed (classes modified, nodes added/removed, even adding a psuedo-class like :focus).
  • If layout is forced, style must be recalculated first. So forced layout triggers both operations. Their costs are very dependent on the content/situation, but typically both operations are similar in cost.
  • What should you do about all this? Well, the More on forced layout section below covers everything in more detail, but the short version is:
    1. for loops that force layout & change the DOM are the worst, avoid them.
    2. Use DevTools Timeline to see where this happens. You may be surprised to see how often your app code and library code hits this.
    3. Batch your writes & reads to the DOM (via FastDOM or a virtual DOM implementation). Read your metrics at the begininng of the frame (very very start of rAF, scroll handler, etc), when the numbers are still identical to the last time layout was done.

Timeline trace of The Guardian. Outbrain is forcing layout repeatedly, probably in a loop.
Cross-browser
Browsing the Chromium source:

CSS Triggers

CSS Triggers is a related resource and all about what operations are required to happen in the browser lifecycle as a result of setting/changing a given CSS value. It's a great resource. The above list, however, are all about what forces the purple/green/darkgreen circles synchronously from JavaScript.

More on forced layout

Updated slightly Feb 2018. Codesearch links and a few changes to relevant element properties.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment