Skip to content

Instantly share code, notes, and snippets.

@maximnofate

maximnofate/what-forces-layout.md

Forked from paulirish/what-forces-layout.md
Created June 4, 2021 10:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save maximnofate/5d8c68b018b0d85e5c907beade2d0133 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save maximnofate/5d8c68b018b0d85e5c907beade2d0133 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @paulirish paulirish revised this gist Apr 23, 2020. 1 changed file with 11 additions and 2 deletions.
    13 changes: 11 additions & 2 deletions what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -28,10 +28,12 @@ Generally, all APIs that synchronously provide layout metrics will trigger force

    * `window.scrollX`, `window.scrollY`
    * `window.innerHeight`, `window.innerWidth`
    * window.visualViewport.height / width / offsetTop / offsetLeft ([source](https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/frame/visual_viewport.cc;l=435-461;drc=a3c165458e524bdc55db15d2a5714bb9a0c69c70?originalUrl=https:%2F%2Fcs.chromium.org%2F))

    ### document

    * `document.scrollingElement` only forces style
    * `document.elementFromPoint`

    ### Forms: Setting selection + focus

    @@ -78,7 +80,14 @@ Generally, all APIs that synchronously provide layout metrics will trigger force

    ### SVG

    * Quite a lot of properties/methods force, but I haven't made an exhaustive list. [Tony Gentilcore's 2011 Layout Triggering List](http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html) pointed to a few.
    Quite a lot of properties/methods force, but I haven't made an exhaustive list.
    This list in incomplete:

    * SVGLocatable: `computeCTM()`, `getBBox()`
    * SVGTextContent: `getCharNumAtPosition()`, `getComputedTextLength()`, `getEndPositionOfChar()`, `getExtentOfChar()`, `getNumberOfChars()`, `getRotationOfChar()`, `getStartPositionOfChar()`, `getSubStringLength()`, `selectSubString()`
    * SVGUse: `instanceRoot`

    Use the "chromium source tree link" below to explore on your own!


    ### contenteditable
    @@ -104,7 +113,7 @@ Generally, all APIs that synchronously provide layout metrics will trigger force
    * The above data was built by reading the Blink source, so it's true for Chrome, Opera, Brave, Edge and most android browsers. You can browse them [yourself in the Chromium source tree](https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/dom/document.h;l=657-680;drc=d685ea3c9ffcb18c781bc3a0bdbb92eb88842b1b).
    * [Tony Gentilcore's Layout Triggering List](http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html) was for 2011 WebKit and generally aligns with the above.
    * Modern WebKit's instances of forced layout are mostly consistent: [`updateLayoutIgnorePendingStylesheets` - GitHub search - WebKit/WebKit ](https://github.com/WebKit/webkit/search?q=updateLayoutIgnorePendingStylesheets&utf8=%E2%9C%93)
    * Gecko's reflow appears to be requested via FrameNeedsReflow. Results: [`FrameNeedsReflow` - mozilla-central search](http://lxr.mozilla.org/mozilla-central/search?string=FrameNeedsReflow&find=&findi=%5C.c&filter=%5E%5B%5E%5C0%5D*%24&hitlimit=&tree=mozilla-central)
    * Gecko's reflow appears to be requested via FrameNeedsReflow. Results: [`FrameNeedsReflow` - mozilla-central searchfox](https://searchfox.org/mozilla-central/search?q=FrameNeedsReflow&case=false&regexp=false&path=%5E%5B%5E%5C0%5D)
    * No concrete data on IE or EdgeHTML, but they likely were roughly the same, as the return values for these properties are spec'd.


  2. @paulirish paulirish revised this gist Apr 23, 2020. 1 changed file with 8 additions and 16 deletions.
    24 changes: 8 additions & 16 deletions what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,8 @@
    # 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](http://www.kellegous.com/j/2013/01/26/layout-performance/), and is common performance bottleneck.
    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](http://www.kellegous.com/j/2013/01/26/layout-performance/), and is common performance bottleneck.

    Generally, all APIs that synchronously provide layout metrics force layout. Read on for additional cases and details.
    Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

    ### Element APIs

    @@ -18,7 +18,7 @@ Generally, all APIs that synchronously provide layout metrics force layout. Read
    * `elem.scrollLeft`, `elem.scrollTop` also, setting them

    ##### Setting focus
    * `elem.focus()` ([source](https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/dom/element.cc;l=4206-4225;drc=d685ea3c9ffcb18c781bc3a0bdbb92eb88842b1b)
    * `elem.focus()` ([source](https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/dom/element.cc;l=4206-4225;drc=d685ea3c9ffcb18c781bc3a0bdbb92eb88842b1b))

    ##### Also…
    * `elem.computedRole`, `elem.computedName`
    @@ -40,7 +40,7 @@ Generally, all APIs that synchronously provide layout metrics force layout. Read

    ### Mouse events: Reading offset data

    * `mouseEvt.layerX`, `mouseEvt.layerY`, `mouseEvt.offsetX`, `mouseEvt.offsetY` ([source](https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/events/MouseEvent.cpp?type=cs&q=f:Mouse+f:cpp+::computeRelativePosition&sq=package:chromium&l=517))
    * `mouseEvt.layerX`, `mouseEvt.layerY`, `mouseEvt.offsetX`, `mouseEvt.offsetY` ([source](https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/events/mouse_event.cc;l=476-487;drc=52fd700fb07a43b740d24595d42d8a6a57a43f81))


    ### Calling getComputedStyle()
    @@ -55,11 +55,11 @@ Generally, all APIs that synchronously provide layout metrics force layout. Read
    `window.getComputedStyle()` will force layout in one of 3 conditions:

    1. The element is in a shadow tree
    1. There are media queries (viewport-related ones). Specifically, one of the following: ([source](https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/css/MediaQueryExp.cpp?type=cs&q=f:MediaQueryExp.cpp+MediaQueryExp::IsViewportDependent&l=192))
    1. There are media queries (viewport-related ones). Specifically, one of the following: ([source](https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/css/media_query_exp.cc;l=240-256;drc=4c8db70889f2d2fae8338b16f553c646dd20bf78)
    * `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](https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/css/CSSComputedStyleDeclaration.cpp?dr=C&q=f:CSSComputedStyleDeclaration.cpp+isLayoutDependent&sq=package:chromium))
    1. The property requested is one of the following: ([source](https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/css/properties/css_property.h;l=69;drc=d685ea3c9ffcb18c781bc3a0bdbb92eb88842b1b))
    * `height`, `width`
    * `top`, `right`, `bottom`, `left`
    * `margin` [`-top`, `-right`, `-bottom`, `-left`, or *shorthand*] only if the margin is fixed.
    @@ -83,7 +83,7 @@ Generally, all APIs that synchronously provide layout metrics force layout. Read

    ### contenteditable

    * Lots & lots of stuff, …including copying an image to clipboard ([source](https://cs.chromium.org/search/?q=UpdateStyleAndLayoutIgnorePendingStylesheets+file:%5Esrc/third_party/WebKit/Source/core/editing/+package:%5Echromium$&type=cs))
    * Lots & lots of stuff, …including copying an image to clipboard ([source](https://source.chromium.org/search?q=UpdateStyleAndLayout%20-f:test&ss=chromium%2Fchromium%2Fsrc:third_party%2Fblink%2Frenderer%2Fcore%2Fediting%2F))


    ## * Appendix
    @@ -101,23 +101,15 @@ Generally, all APIs that synchronously provide layout metrics force layout. Read
    </center>

    ##### Cross-browser
    * The above data was built by reading the Blink source, so it's true for Chrome, Opera, and most android browsers.
    * The above data was built by reading the Blink source, so it's true for Chrome, Opera, Brave, Edge and most android browsers. You can browse them [yourself in the Chromium source tree](https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/dom/document.h;l=657-680;drc=d685ea3c9ffcb18c781bc3a0bdbb92eb88842b1b).
    * [Tony Gentilcore's Layout Triggering List](http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html) was for 2011 WebKit and generally aligns with the above.
    * Modern WebKit's instances of forced layout are mostly consistent: [`updateLayoutIgnorePendingStylesheets` - GitHub search - WebKit/WebKit ](https://github.com/WebKit/webkit/search?q=updateLayoutIgnorePendingStylesheets&utf8=%E2%9C%93)
    * Gecko's reflow appears to be requested via FrameNeedsReflow. Results: [`FrameNeedsReflow` - mozilla-central search](http://lxr.mozilla.org/mozilla-central/search?string=FrameNeedsReflow&find=&findi=%5C.c&filter=%5E%5B%5E%5C0%5D*%24&hitlimit=&tree=mozilla-central)
    * No concrete data on IE or EdgeHTML, but they likely were roughly the same, as the return values for these properties are spec'd.

    ##### Browsing the Chromium source:
    * forced layout (and style recalc): [`UpdateStyleAndLayoutIgnorePendingStylesheets` - Chromium Code Search](https://cs.chromium.org/search/?q=UpdateStyleAndLayoutIgnorePendingStylesheets+-f:out+-f:test&type=cs)
    * forced style recalc: [`UpdateStyleAndLayoutTreeIgnorePendingStylesheets` - Chromium Code Search](https://cs.chromium.org/search/?q=UpdateStyleAndLayoutTreeIgnorePendingStylesheets++-f:out+-f:test&type=cs)

    #### CSS Triggers



    #### More on forced layout


    * **[Avoiding layout thrashing — Web Fundamentals](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing)** The **best** resource on identifying and fixing this topic.
    * [CSS Triggers](http://csstriggers.com/) - covers what operations are required as a result of setting/changing a given CSS value. The above list, however, are all about what forces the purple/green/darkgreen circles synchronously from JavaScript.
    * [Fixing Layout thrashing in the real world | Matt Andrews](https://mattandre.ws/2014/05/really-fixing-layout-thrashing/)
  3. @paulirish paulirish revised this gist Apr 23, 2020. 1 changed file with 43 additions and 34 deletions.
    77 changes: 43 additions & 34 deletions what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@ All of the below properties or methods, when requested/called in JavaScript, wil

    Generally, all APIs that synchronously provide layout metrics force layout. Read on for additional cases and details.

    ### Element
    ### Element APIs

    ##### Getting box metrics
    * `elem.offsetLeft`, `elem.offsetTop`, `elem.offsetWidth`, `elem.offsetHeight`, `elem.offsetParent`
    @@ -24,68 +24,75 @@ Generally, all APIs that synchronously provide layout metrics force layout. Read
    * `elem.computedRole`, `elem.computedName`
    * `elem.innerText` ([source](https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/editing/element_inner_text.cc;l=462-468;drc=d685ea3c9ffcb18c781bc3a0bdbb92eb88842b1b))

    ### Calling 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
    1. There are media queries (viewport-related ones). Specifically, one of the following: ([source](https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/css/MediaQueryExp.cpp?type=cs&q=f:MediaQueryExp.cpp+MediaQueryExp::IsViewportDependent&l=192))
    * `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](https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/css/CSSComputedStyleDeclaration.cpp?dr=C&q=f:CSSComputedStyleDeclaration.cpp+isLayoutDependent&sq=package:chromium))
    * `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`

    ### Getting window dimensions

    * `window.scrollX`, `window.scrollY`
    * `window.innerHeight`, `window.innerWidth`

    ### document

    * `document.scrollingElement` only forces style

    ### Forms: setting selection + focus
    ### Forms: Setting selection + focus

    * `inputElem.focus()`
    * `inputElem.select()`, `textareaElem.select()`

    ### Mouse events
    ### Mouse events: Reading offset data

    * `mouseEvt.layerX`, `mouseEvt.layerY`, `mouseEvt.offsetX`, `mouseEvt.offsetY` ([source](https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/events/MouseEvent.cpp?type=cs&q=f:Mouse+f:cpp+::computeRelativePosition&sq=package:chromium&l=517))

    ### document

    * `document.scrollingElement` only forces style
    ### Calling getComputedStyle()

    ### Range
    `window.getComputedStyle()` will typically force style recalc.

    `window.getComputedStyle()` will often force layout, as well.

    <details>
    <summary>Details of the conditions where gCS() forces layout</summary>

    `window.getComputedStyle()` will force layout in one of 3 conditions:

    1. The element is in a shadow tree
    1. There are media queries (viewport-related ones). Specifically, one of the following: ([source](https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/css/MediaQueryExp.cpp?type=cs&q=f:MediaQueryExp.cpp+MediaQueryExp::IsViewportDependent&l=192))
    * `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](https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/css/CSSComputedStyleDeclaration.cpp?dr=C&q=f:CSSComputedStyleDeclaration.cpp+isLayoutDependent&sq=package:chromium))
    * `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`

    </details>

    ### Getting `Range` dimensions

    * `range.getClientRects()`, `range.getBoundingClientRect()`

    ### SVG

    * Quite a lot; haven't made an exhaustive list , but [Tony Gentilcore's 2011 Layout Triggering List](http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html) pointed to a few.
    * Quite a lot of properties/methods force, but I haven't made an exhaustive list. [Tony Gentilcore's 2011 Layout Triggering List](http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html) pointed to a few.


    ### contenteditable

    * Lots & lots of stuff, …including copying an image to clipboard ([source](https://cs.chromium.org/search/?q=UpdateStyleAndLayoutIgnorePendingStylesheets+file:%5Esrc/third_party/WebKit/Source/core/editing/+package:%5Echromium$&type=cs))


    ## *Appendix
    ## * 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.
    1. Use DevTools Timeline to see where this happens. You may be surprised to see how often your app code and library code hits this.
    1. Use DevTools Performance Panel to see where this happens. You may be surprised to see how often your app code and library code hits this.
    1. Batch your writes & reads to the DOM (via [FastDOM](https://github.com/wilsonpage/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.

    <center>
    @@ -98,19 +105,21 @@ Generally, all APIs that synchronously provide layout metrics force layout. Read
    * [Tony Gentilcore's Layout Triggering List](http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html) was for 2011 WebKit and generally aligns with the above.
    * Modern WebKit's instances of forced layout are mostly consistent: [`updateLayoutIgnorePendingStylesheets` - GitHub search - WebKit/WebKit ](https://github.com/WebKit/webkit/search?q=updateLayoutIgnorePendingStylesheets&utf8=%E2%9C%93)
    * Gecko's reflow appears to be requested via FrameNeedsReflow. Results: [`FrameNeedsReflow` - mozilla-central search](http://lxr.mozilla.org/mozilla-central/search?string=FrameNeedsReflow&find=&findi=%5C.c&filter=%5E%5B%5E%5C0%5D*%24&hitlimit=&tree=mozilla-central)
    * No concrete data on Edge/IE, but it should fall roughly in line, as the return values for these properties are spec'd. What would differ is the amount of clever optimization.
    * No concrete data on IE or EdgeHTML, but they likely were roughly the same, as the return values for these properties are spec'd.

    ##### Browsing the Chromium source:
    * forced layout (and style recalc): [`UpdateStyleAndLayoutIgnorePendingStylesheets` - Chromium Code Search](https://cs.chromium.org/search/?q=UpdateStyleAndLayoutIgnorePendingStylesheets+-f:out+-f:test&type=cs)
    * forced style recalc: [`UpdateStyleAndLayoutTreeIgnorePendingStylesheets` - Chromium Code Search](https://cs.chromium.org/search/?q=UpdateStyleAndLayoutTreeIgnorePendingStylesheets++-f:out+-f:test&type=cs)

    #### CSS Triggers

    [CSS Triggers](http://csstriggers.com/) 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

    * [Avoiding layout thrashing — Web Fundamentals](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing?hl=en)

    * **[Avoiding layout thrashing — Web Fundamentals](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing)** The **best** resource on identifying and fixing this topic.
    * [CSS Triggers](http://csstriggers.com/) - covers what operations are required as a result of setting/changing a given CSS value. The above list, however, are all about what forces the purple/green/darkgreen circles synchronously from JavaScript.
    * [Fixing Layout thrashing in the real world | Matt Andrews](https://mattandre.ws/2014/05/really-fixing-layout-thrashing/)
    * [Timeline demo: Diagnosing forced synchronous layouts - Google Chrome](https://developer.chrome.com/devtools/docs/demos/too-much-layout)
    * [Preventing &apos;layout thrashing&apos; | Wilson Page](http://wilsonpage.co.uk/preventing-layout-thrashing/)
  4. @paulirish paulirish revised this gist Apr 23, 2020. 1 changed file with 11 additions and 11 deletions.
    22 changes: 11 additions & 11 deletions what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,9 +2,11 @@

    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](http://www.kellegous.com/j/2013/01/26/layout-performance/), and is common performance bottleneck.

    Generally, all APIs that synchronously provide layout metrics force layout. Read on for additional cases and details.

    ### Element

    ##### Box metrics
    ##### Getting box metrics
    * `elem.offsetLeft`, `elem.offsetTop`, `elem.offsetWidth`, `elem.offsetHeight`, `elem.offsetParent`
    * `elem.clientLeft`, `elem.clientTop`, `elem.clientWidth`, `elem.clientHeight`
    * `elem.getClientRects()`, `elem.getBoundingClientRect()`
    @@ -15,15 +17,14 @@ All of the below properties or methods, when requested/called in JavaScript, wil
    * `elem.scrollWidth`, `elem.scrollHeight`
    * `elem.scrollLeft`, `elem.scrollTop` also, setting them


    ##### Focus
    * `elem.focus()` can trigger a *double* forced layout ([source](https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/dom/Element.cpp?q=updateLayoutIgnorePendingStylesheets+-f:out+-f:test&sq=package:chromium&dr=C)&l=2923)
    ##### Setting focus
    * `elem.focus()` ([source](https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/dom/element.cc;l=4206-4225;drc=d685ea3c9ffcb18c781bc3a0bdbb92eb88842b1b)

    ##### Also…
    * `elem.computedRole`, `elem.computedName`
    * `elem.innerText` ([source](https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/dom/Element.cpp?q=updateLayoutIgnorePendingStylesheets+-f:out+-f:test&sq=package:chromium&dr=C)&l=3440))
    * `elem.innerText` ([source](https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/editing/element_inner_text.cc;l=462-468;drc=d685ea3c9ffcb18c781bc3a0bdbb92eb88842b1b))

    ### getComputedStyle
    ### Calling getComputedStyle()

    `window.getComputedStyle()` will typically force style recalc

    @@ -45,14 +46,13 @@ All of the below properties or methods, when requested/called in JavaScript, wil
    * `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
    ### Getting window dimensions

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


    ### Forms
    ### Forms: setting selection + focus

    * `inputElem.focus()`
    * `inputElem.select()`, `textareaElem.select()`
    @@ -63,7 +63,7 @@ All of the below properties or methods, when requested/called in JavaScript, wil

    ### document

    * `doc.scrollingElement` only forces style
    * `document.scrollingElement` only forces style

    ### Range

    @@ -125,4 +125,4 @@ All of the below properties or methods, when requested/called in JavaScript, wil

    -------------

    Updated slightly Feb 2018. Codesearch links and a few changes to relevant element properties.
    Updated slightly April 2020. Codesearch links and a few changes to relevant element properties.
  5. @paulirish paulirish revised this gist Feb 22, 2018. 1 changed file with 19 additions and 15 deletions.
    34 changes: 19 additions & 15 deletions what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -17,33 +17,33 @@ All of the below properties or methods, when requested/called in JavaScript, wil


    ##### Focus
    * `elem.focus()` can trigger a *double* forced layout ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Element.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=2369&ct=rc&cd=4&dr=C))
    * `elem.focus()` can trigger a *double* forced layout ([source](https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/dom/Element.cpp?q=updateLayoutIgnorePendingStylesheets+-f:out+-f:test&sq=package:chromium&dr=C)&l=2923)

    ##### Also…
    * `elem.computedRole`, `elem.computedName`
    * `elem.innerText` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Element.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=2626&ct=rc&cd=4&dr=C))
    * `elem.innerText` ([source](https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/dom/Element.cpp?q=updateLayoutIgnorePendingStylesheets+-f:out+-f:test&sq=package:chromium&dr=C)&l=3440))

    ### getComputedStyle

    `window.getComputedStyle()` will typically force style recalc ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Document.cpp&sq=package:chromium&type=cs&l=1860&q=updateLayoutTreeForNodeIfNeeded))
    `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
    1. There are media queries (viewport-related ones). Specifically, one of the following: ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/css/MediaQueryExp.cpp&sq=package:chromium&type=cs&l=163&q=MediaQueryExp::isViewportDependent))
    1. There are media queries (viewport-related ones). Specifically, one of the following: ([source](https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/css/MediaQueryExp.cpp?type=cs&q=f:MediaQueryExp.cpp+MediaQueryExp::IsViewportDependent&l=192))
    * `min-width`, `min-height`, `max-width`, `max-height`, `width`, `height`
    * `aspect-ratio`, `min-aspect-ratio`, `max-aspect-ratio`
    * `device-pixel-ratio`, `resolution`, `orientation`
    1. The property requested is one of the following: ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/css/CSSComputedStyleDeclaration.cpp&sq=package:chromium&l=457&dr=C&q=isLayoutDependent))
    * `device-pixel-ratio`, `resolution`, `orientation` , `min-device-pixel-ratio`, `max-device-pixel-ratio`
    1. The property requested is one of the following: ([source](https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/css/CSSComputedStyleDeclaration.cpp?dr=C&q=f:CSSComputedStyleDeclaration.cpp+isLayoutDependent&sq=package:chromium))
    * `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`
    * `webkit-filter`, `backdrop-filter`
    * `motion-path`, `motion-offset`, `motion-rotation`
    * `x`, `y`, `rx`, `ry`
    * `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

    @@ -55,11 +55,11 @@ All of the below properties or methods, when requested/called in JavaScript, wil
    ### Forms

    * `inputElem.focus()`
    * `inputElem.select()`, `textareaElem.select()` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/html/HTMLTextFormControlElement.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=192&dr=C))
    * `inputElem.select()`, `textareaElem.select()`

    ### Mouse events

    * `mouseEvt.layerX`, `mouseEvt.layerY`, `mouseEvt.offsetX`, `mouseEvt.offsetY` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/events/MouseRelatedEvent.cpp&q=f:mouserelatedevent%20computeRelativePosition&sq=package:chromium&type=cs&l=132))
    * `mouseEvt.layerX`, `mouseEvt.layerY`, `mouseEvt.offsetX`, `mouseEvt.offsetY` ([source](https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/events/MouseEvent.cpp?type=cs&q=f:Mouse+f:cpp+::computeRelativePosition&sq=package:chromium&l=517))

    ### document

    @@ -76,7 +76,7 @@ All of the below properties or methods, when requested/called in JavaScript, wil

    ### contenteditable

    * Lots & lots of stuff, …including copying an image to clipboard ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/editing/Editor.cpp&sq=package:chromium&l=420&dr=C&rcl=1442532378))
    * Lots & lots of stuff, …including copying an image to clipboard ([source](https://cs.chromium.org/search/?q=UpdateStyleAndLayoutIgnorePendingStylesheets+file:%5Esrc/third_party/WebKit/Source/core/editing/+package:%5Echromium$&type=cs))


    ## *Appendix
    @@ -101,8 +101,8 @@ All of the below properties or methods, when requested/called in JavaScript, wil
    * No concrete data on Edge/IE, but it should fall roughly in line, as the return values for these properties are spec'd. What would differ is the amount of clever optimization.

    ##### Browsing the Chromium source:
    * forced layout (and style recalc): [`UpdateStyleAndLayoutIgnorePendingStylesheets` - Chromium Code Search](https://cs.chromium.org/search/?q=UpdateStyleAndLayoutIgnorePendingStylesheets&type=cs)
    * forced style recalc: [`updateLayoutTree` - Chromium Code Search](https://code.google.com/p/chromium/codesearch#search/&q=updateLayoutTree%20-f:out&p=1&sq=package:chromium&type=cs)
    * forced layout (and style recalc): [`UpdateStyleAndLayoutIgnorePendingStylesheets` - Chromium Code Search](https://cs.chromium.org/search/?q=UpdateStyleAndLayoutIgnorePendingStylesheets+-f:out+-f:test&type=cs)
    * forced style recalc: [`UpdateStyleAndLayoutTreeIgnorePendingStylesheets` - Chromium Code Search](https://cs.chromium.org/search/?q=UpdateStyleAndLayoutTreeIgnorePendingStylesheets++-f:out+-f:test&type=cs)

    #### CSS Triggers

    @@ -121,4 +121,8 @@ All of the below properties or methods, when requested/called in JavaScript, wil
    * [Optimizing Web Content in UIWebViews and Websites on iOS](https://developer.apple.com/videos/wwdc/2012/?id=601)
    * [Accelerated Rendering in Chrome](http://www.html5rocks.com/en/tutorials/speed/layers/)
    * [web performance for the curious](https://www.igvita.com/slides/2012/web-performance-for-the-curious/)
    * [Jank Free](http://jankfree.org/)
    * [Jank Free](http://jankfree.org/)

    -------------

    Updated slightly Feb 2018. Codesearch links and a few changes to relevant element properties.
  6. @paulirish paulirish revised this gist Feb 22, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -101,7 +101,7 @@ All of the below properties or methods, when requested/called in JavaScript, wil
    * No concrete data on Edge/IE, but it should fall roughly in line, as the return values for these properties are spec'd. What would differ is the amount of clever optimization.

    ##### Browsing the Chromium source:
    * forced layout (and style recalc): [`updateLayoutIgnorePendingStylesheets` - Chromium Code Search](https://code.google.com/p/chromium/codesearch#search/&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&type=cs)
    * forced layout (and style recalc): [`UpdateStyleAndLayoutIgnorePendingStylesheets` - Chromium Code Search](https://cs.chromium.org/search/?q=UpdateStyleAndLayoutIgnorePendingStylesheets&type=cs)
    * forced style recalc: [`updateLayoutTree` - Chromium Code Search](https://code.google.com/p/chromium/codesearch#search/&q=updateLayoutTree%20-f:out&p=1&sq=package:chromium&type=cs)

    #### CSS Triggers
  7. @paulirish paulirish revised this gist Feb 6, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -89,8 +89,8 @@ All of the below properties or methods, when requested/called in JavaScript, wil
    1. Batch your writes & reads to the DOM (via [FastDOM](https://github.com/wilsonpage/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.

    <center>
    ![image](https://cloud.githubusercontent.com/assets/39191/10144107/9fae0b48-65d0-11e5-8e87-c9a8e999b064.png)
    _Timeline trace of The Guardian. Outbrain is forcing layout repeatedly, probably in a loop._
    <img src="https://cloud.githubusercontent.com/assets/39191/10144107/9fae0b48-65d0-11e5-8e87-c9a8e999b064.png">
    <i>Timeline trace of The Guardian. Outbrain is forcing layout repeatedly, probably in a loop.</i>
    </center>

    ##### Cross-browser
  8. @paulirish paulirish revised this gist Sep 28, 2015. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -88,6 +88,10 @@ All of the below properties or methods, when requested/called in JavaScript, wil
    1. Use DevTools Timeline to see where this happens. You may be surprised to see how often your app code and library code hits this.
    1. Batch your writes & reads to the DOM (via [FastDOM](https://github.com/wilsonpage/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.

    <center>
    ![image](https://cloud.githubusercontent.com/assets/39191/10144107/9fae0b48-65d0-11e5-8e87-c9a8e999b064.png)
    _Timeline trace of The Guardian. Outbrain is forcing layout repeatedly, probably in a loop._
    </center>

    ##### Cross-browser
    * The above data was built by reading the Blink source, so it's true for Chrome, Opera, and most android browsers.
  9. @paulirish paulirish revised this gist Sep 28, 2015. 1 changed file with 5 additions and 1 deletion.
    6 changes: 5 additions & 1 deletion what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -113,4 +113,8 @@ All of the below properties or methods, when requested/called in JavaScript, wil
    * [wilsonpage/fastdom](https://github.com/wilsonpage/fastdom)
    * [Rendering: repaint, reflow/relayout, restyle / Stoyan](http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/)
    * [We spent a week making Trello boards load extremely fast. Here’s how we did it. - Fog Creek Blog](http://blog.fogcreek.com/we-spent-a-week-making-trello-boards-load-extremely-fast-heres-how-we-did-it/)
    * [Minimizing browser reflow  |  PageSpeed Insights  |  Google Developers](https://developers.google.com/speed/articles/reflow?hl=en)
    * [Minimizing browser reflow  |  PageSpeed Insights  |  Google Developers](https://developers.google.com/speed/articles/reflow?hl=en)
    * [Optimizing Web Content in UIWebViews and Websites on iOS](https://developer.apple.com/videos/wwdc/2012/?id=601)
    * [Accelerated Rendering in Chrome](http://www.html5rocks.com/en/tutorials/speed/layers/)
    * [web performance for the curious](https://www.igvita.com/slides/2012/web-performance-for-the-curious/)
    * [Jank Free](http://jankfree.org/)
  10. @paulirish paulirish revised this gist Sep 28, 2015. 1 changed file with 8 additions and 2 deletions.
    10 changes: 8 additions & 2 deletions what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    # 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](http://www.kellegous.com/j/2013/01/26/layout-performance/), and is common performance bottleneck.
    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](http://www.kellegous.com/j/2013/01/26/layout-performance/), and is common performance bottleneck.

    ### Element

    @@ -79,9 +79,15 @@ All of the below properties or methods, when requested/called in JavaScript, wil
    * Lots & lots of stuff, …including copying an image to clipboard ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/editing/Editor.cpp&sq=package:chromium&l=420&dr=C&rcl=1442532378))


    ## Appendix
    ## *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.
    1. Use DevTools Timeline to see where this happens. You may be surprised to see how often your app code and library code hits this.
    1. Batch your writes & reads to the DOM (via [FastDOM](https://github.com/wilsonpage/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.


    ##### Cross-browser
    * The above data was built by reading the Blink source, so it's true for Chrome, Opera, and most android browsers.
  11. @paulirish paulirish revised this gist Sep 19, 2015. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -94,6 +94,10 @@ All of the below properties or methods, when requested/called in JavaScript, wil
    * forced layout (and style recalc): [`updateLayoutIgnorePendingStylesheets` - Chromium Code Search](https://code.google.com/p/chromium/codesearch#search/&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&type=cs)
    * forced style recalc: [`updateLayoutTree` - Chromium Code Search](https://code.google.com/p/chromium/codesearch#search/&q=updateLayoutTree%20-f:out&p=1&sq=package:chromium&type=cs)

    #### CSS Triggers

    [CSS Triggers](http://csstriggers.com/) 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

    * [Avoiding layout thrashing — Web Fundamentals](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing?hl=en)
  12. @paulirish paulirish revised this gist Sep 19, 2015. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -83,11 +83,12 @@ All of the below properties or methods, when requested/called in JavaScript, wil

    * 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.

    ##### Cross-browser story
    ##### Cross-browser
    * The above data was built by reading the Blink source, so it's true for Chrome, Opera, and most android browsers.
    * [Tony Gentilcore's Layout Triggering List](http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html) was for 2011 WebKit and generally aligns with the above.
    * Modern WebKit's instances of forced layout: [`updateLayoutIgnorePendingStylesheets` - GitHub search - WebKit/WebKit ](https://github.com/WebKit/webkit/search?q=updateLayoutIgnorePendingStylesheets&utf8=%E2%9C%93)
    * Modern WebKit's instances of forced layout are mostly consistent: [`updateLayoutIgnorePendingStylesheets` - GitHub search - WebKit/WebKit ](https://github.com/WebKit/webkit/search?q=updateLayoutIgnorePendingStylesheets&utf8=%E2%9C%93)
    * Gecko's reflow appears to be requested via FrameNeedsReflow. Results: [`FrameNeedsReflow` - mozilla-central search](http://lxr.mozilla.org/mozilla-central/search?string=FrameNeedsReflow&find=&findi=%5C.c&filter=%5E%5B%5E%5C0%5D*%24&hitlimit=&tree=mozilla-central)
    * No concrete data on Edge/IE, but it should fall roughly in line, as the return values for these properties are spec'd. What would differ is the amount of clever optimization.

    ##### Browsing the Chromium source:
    * forced layout (and style recalc): [`updateLayoutIgnorePendingStylesheets` - Chromium Code Search](https://code.google.com/p/chromium/codesearch#search/&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&type=cs)
  13. @paulirish paulirish revised this gist Sep 19, 2015. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -83,8 +83,9 @@ All of the below properties or methods, when requested/called in JavaScript, wil

    * 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.

    ##### Other browsers
    * [Tony Gentilcore's 2011 Layout Triggering List](http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html) was for WebKit and generally aligns with the above.
    ##### Cross-browser story
    * The above data was built by reading the Blink source, so it's true for Chrome, Opera, and most android browsers.
    * [Tony Gentilcore's Layout Triggering List](http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html) was for 2011 WebKit and generally aligns with the above.
    * Modern WebKit's instances of forced layout: [`updateLayoutIgnorePendingStylesheets` - GitHub search - WebKit/WebKit ](https://github.com/WebKit/webkit/search?q=updateLayoutIgnorePendingStylesheets&utf8=%E2%9C%93)
    * Gecko's reflow appears to be requested via FrameNeedsReflow. Results: [`FrameNeedsReflow` - mozilla-central search](http://lxr.mozilla.org/mozilla-central/search?string=FrameNeedsReflow&find=&findi=%5C.c&filter=%5E%5B%5E%5C0%5D*%24&hitlimit=&tree=mozilla-central)

  14. @paulirish paulirish revised this gist Sep 19, 2015. No changes.
  15. @paulirish paulirish revised this gist Sep 18, 2015. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -81,6 +81,8 @@ All of the below properties or methods, when requested/called in JavaScript, wil

    ## Appendix

    * 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.

    ##### Other browsers
    * [Tony Gentilcore's 2011 Layout Triggering List](http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html) was for WebKit and generally aligns with the above.
    * Modern WebKit's instances of forced layout: [`updateLayoutIgnorePendingStylesheets` - GitHub search - WebKit/WebKit ](https://github.com/WebKit/webkit/search?q=updateLayoutIgnorePendingStylesheets&utf8=%E2%9C%93)
  16. @paulirish paulirish revised this gist Sep 18, 2015. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    # 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. [Avoiding layout thrashing — Web Fundamentals](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing?hl=en)
    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](http://www.kellegous.com/j/2013/01/26/layout-performance/), and is common performance bottleneck.

    ### Element

    @@ -92,6 +92,7 @@ All of the below properties or methods, when requested/called in JavaScript, wil

    #### More on forced layout

    * [Avoiding layout thrashing — Web Fundamentals](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing?hl=en)
    * [Fixing Layout thrashing in the real world | Matt Andrews](https://mattandre.ws/2014/05/really-fixing-layout-thrashing/)
    * [Timeline demo: Diagnosing forced synchronous layouts - Google Chrome](https://developer.chrome.com/devtools/docs/demos/too-much-layout)
    * [Preventing &apos;layout thrashing&apos; | Wilson Page](http://wilsonpage.co.uk/preventing-layout-thrashing/)
  17. @paulirish paulirish revised this gist Sep 18, 2015. 1 changed file with 10 additions and 0 deletions.
    10 changes: 10 additions & 0 deletions what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -89,3 +89,13 @@ All of the below properties or methods, when requested/called in JavaScript, wil
    ##### Browsing the Chromium source:
    * forced layout (and style recalc): [`updateLayoutIgnorePendingStylesheets` - Chromium Code Search](https://code.google.com/p/chromium/codesearch#search/&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&type=cs)
    * forced style recalc: [`updateLayoutTree` - Chromium Code Search](https://code.google.com/p/chromium/codesearch#search/&q=updateLayoutTree%20-f:out&p=1&sq=package:chromium&type=cs)

    #### More on forced layout

    * [Fixing Layout thrashing in the real world | Matt Andrews](https://mattandre.ws/2014/05/really-fixing-layout-thrashing/)
    * [Timeline demo: Diagnosing forced synchronous layouts - Google Chrome](https://developer.chrome.com/devtools/docs/demos/too-much-layout)
    * [Preventing &apos;layout thrashing&apos; | Wilson Page](http://wilsonpage.co.uk/preventing-layout-thrashing/)
    * [wilsonpage/fastdom](https://github.com/wilsonpage/fastdom)
    * [Rendering: repaint, reflow/relayout, restyle / Stoyan](http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/)
    * [We spent a week making Trello boards load extremely fast. Here’s how we did it. - Fog Creek Blog](http://blog.fogcreek.com/we-spent-a-week-making-trello-boards-load-extremely-fast-heres-how-we-did-it/)
    * [Minimizing browser reflow  |  PageSpeed Insights  |  Google Developers](https://developers.google.com/speed/articles/reflow?hl=en)
  18. @paulirish paulirish revised this gist Sep 18, 2015. 1 changed file with 7 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -72,14 +72,20 @@ All of the below properties or methods, when requested/called in JavaScript, wil
    ### SVG

    * Quite a lot; haven't made an exhaustive list , but [Tony Gentilcore's 2011 Layout Triggering List](http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html) pointed to a few.
    *


    ### contenteditable

    * Lots & lots of stuff, …including copying an image to clipboard ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/editing/Editor.cpp&sq=package:chromium&l=420&dr=C&rcl=1442532378))


    ## Appendix

    ##### Other browsers
    * [Tony Gentilcore's 2011 Layout Triggering List](http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html) was for WebKit and generally aligns with the above.
    * Modern WebKit's instances of forced layout: [`updateLayoutIgnorePendingStylesheets` - GitHub search - WebKit/WebKit ](https://github.com/WebKit/webkit/search?q=updateLayoutIgnorePendingStylesheets&utf8=%E2%9C%93)
    * Gecko's reflow appears to be requested via FrameNeedsReflow. Results: [`FrameNeedsReflow` - mozilla-central search](http://lxr.mozilla.org/mozilla-central/search?string=FrameNeedsReflow&find=&findi=%5C.c&filter=%5E%5B%5E%5C0%5D*%24&hitlimit=&tree=mozilla-central)

    ##### Browsing the Chromium source:
    * forced layout (and style recalc): [`updateLayoutIgnorePendingStylesheets` - Chromium Code Search](https://code.google.com/p/chromium/codesearch#search/&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&type=cs)
    * forced style recalc: [`updateLayoutTree` - Chromium Code Search](https://code.google.com/p/chromium/codesearch#search/&q=updateLayoutTree%20-f:out&p=1&sq=package:chromium&type=cs)
  19. @paulirish paulirish revised this gist Sep 18, 2015. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -69,6 +69,11 @@ All of the below properties or methods, when requested/called in JavaScript, wil

    * `range.getClientRects()`, `range.getBoundingClientRect()`

    ### SVG

    * Quite a lot; haven't made an exhaustive list , but [Tony Gentilcore's 2011 Layout Triggering List](http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html) pointed to a few.
    *

    ### contenteditable

    * Lots & lots of stuff, …including copying an image to clipboard ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/editing/Editor.cpp&sq=package:chromium&l=420&dr=C&rcl=1442532378))
  20. @paulirish paulirish revised this gist Sep 18, 2015. 1 changed file with 13 additions and 14 deletions.
    27 changes: 13 additions & 14 deletions what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -23,16 +23,6 @@ All of the below properties or methods, when requested/called in JavaScript, wil
    * `elem.computedRole`, `elem.computedName`
    * `elem.innerText` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Element.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=2626&ct=rc&cd=4&dr=C))

    ### Range

    * `range.getClientRects()`, `range.getBoundingClientRect()`

    ### Mouse events

    * `mouseEvt.layerX`, `mouseEvt.layerY`, `mouseEvt.offsetX`, `mouseEvt.offsetY` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/events/MouseRelatedEvent.cpp&q=f:mouserelatedevent%20computeRelativePosition&sq=package:chromium&type=cs&l=132))



    ### getComputedStyle

    `window.getComputedStyle()` will typically force style recalc ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Document.cpp&sq=package:chromium&type=cs&l=1860&q=updateLayoutTreeForNodeIfNeeded))
    @@ -55,10 +45,6 @@ All of the below properties or methods, when requested/called in JavaScript, wil
    * `motion-path`, `motion-offset`, `motion-rotation`
    * `x`, `y`, `rx`, `ry`

    ### document

    * `doc.scrollingElement` only forces style

    ### window

    * `window.scrollX`, `window.scrollY`
    @@ -68,8 +54,21 @@ All of the below properties or methods, when requested/called in JavaScript, wil

    ### Forms

    * `inputElem.focus()`
    * `inputElem.select()`, `textareaElem.select()` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/html/HTMLTextFormControlElement.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=192&dr=C))

    ### Mouse events

    * `mouseEvt.layerX`, `mouseEvt.layerY`, `mouseEvt.offsetX`, `mouseEvt.offsetY` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/events/MouseRelatedEvent.cpp&q=f:mouserelatedevent%20computeRelativePosition&sq=package:chromium&type=cs&l=132))

    ### document

    * `doc.scrollingElement` only forces style

    ### Range

    * `range.getClientRects()`, `range.getBoundingClientRect()`

    ### contenteditable

    * Lots & lots of stuff, …including copying an image to clipboard ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/editing/Editor.cpp&sq=package:chromium&l=420&dr=C&rcl=1442532378))
  21. @paulirish paulirish revised this gist Sep 18, 2015. 1 changed file with 8 additions and 7 deletions.
    15 changes: 8 additions & 7 deletions what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    # What forces layout
    # What forces layout / reflow

    All of the below properties or methods, when requested/called in JavaScript, will force the browser to synchronously calculate the style and layout. This is also called reflow or layout thrashing, and is common performance bottleneck.
    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. [Avoiding layout thrashing — Web Fundamentals](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing?hl=en)

    ### Element

    @@ -10,13 +10,14 @@ All of the below properties or methods, when requested/called in JavaScript, wil
    * `elem.getClientRects()`, `elem.getBoundingClientRect()`

    ##### Scroll stuff
    * `elem.scrollWidth`, `elem.scrollHeight`
    * `elem.scrollLeft`, `elem.scrollTop // also setting them`
    * `elem.scrollIntoView()`, `elem.scrollIntoViewIfNeeded()`
    * `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](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Element.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=2369&ct=rc&cd=4&dr=C))
    * `elem.focus()` can trigger a *double* forced layout ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Element.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=2369&ct=rc&cd=4&dr=C))

    ##### Also…
    * `elem.computedRole`, `elem.computedName`
    @@ -36,7 +37,7 @@ All of the below properties or methods, when requested/called in JavaScript, wil

    `window.getComputedStyle()` will typically force style recalc ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Document.cpp&sq=package:chromium&type=cs&l=1860&q=updateLayoutTreeForNodeIfNeeded))

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

    1. The element is in a shadow tree
    1. There are media queries (viewport-related ones). Specifically, one of the following: ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/css/MediaQueryExp.cpp&sq=package:chromium&type=cs&l=163&q=MediaQueryExp::isViewportDependent))
  22. @paulirish paulirish revised this gist Sep 18, 2015. 1 changed file with 10 additions and 15 deletions.
    25 changes: 10 additions & 15 deletions what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -16,7 +16,7 @@ All of the below properties or methods, when requested/called in JavaScript, wil
    * `elem.scrollBy()`, `elem.scrollTo()`

    ##### Focus
    * `elem.focus() // can trigger a *double* forced layout` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Element.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=2369&ct=rc&cd=4&dr=C))
    * `elem.focus()` can trigger a *double* forced layout` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Element.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=2369&ct=rc&cd=4&dr=C))

    ##### Also…
    * `elem.computedRole`, `elem.computedName`
    @@ -28,19 +28,18 @@ All of the below properties or methods, when requested/called in JavaScript, wil

    ### Mouse events

    * `mouseEvt.layerX`, `mouseEvt.layerY`, `mouseEvt.offsetX`, `mouseEvt.offsetY`
    * `mouseEvt.layerX`, `mouseEvt.layerY`, `mouseEvt.offsetX`, `mouseEvt.offsetY` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/events/MouseRelatedEvent.cpp&q=f:mouserelatedevent%20computeRelativePosition&sq=package:chromium&type=cs&l=132))

    [source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/events/MouseRelatedEvent.cpp&q=f:mouserelatedevent%20computeRelativePosition&sq=package:chromium&type=cs&l=132)


    ### getComputedStyle

    `window.getComputedStyle() // will typically force style recalc` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Document.cpp&sq=package:chromium&type=cs&l=1860&q=updateLayoutTreeForNodeIfNeeded))
    `window.getComputedStyle()` will typically force style recalc ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Document.cpp&sq=package:chromium&type=cs&l=1860&q=updateLayoutTreeForNodeIfNeeded))

    `window.getComputedStyle() // will force layout, as well,` if one of the following:
    `window.getComputedStyle()` will force layout, as well, if one of the following:

    1. The element is in a shadow tree
    1. There are media queries (viewport-related ones) specifically, one of the following: ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/css/MediaQueryExp.cpp&sq=package:chromium&type=cs&l=163&q=MediaQueryExp::isViewportDependent))
    1. There are media queries (viewport-related ones). Specifically, one of the following: ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/css/MediaQueryExp.cpp&sq=package:chromium&type=cs&l=163&q=MediaQueryExp::isViewportDependent))
    * `min-width`, `min-height`, `max-width`, `max-height`, `width`, `height`
    * `aspect-ratio`, `min-aspect-ratio`, `max-aspect-ratio`
    * `device-pixel-ratio`, `resolution`, `orientation`
    @@ -57,29 +56,25 @@ All of the below properties or methods, when requested/called in JavaScript, wil

    ### document

    * `doc.scrollingElement // only forces style`
    * `doc.scrollingElement` only forces style

    ### window

    * `window.scrollX`, `window.scrollY`
    * `window.innerHeight`, `window.innerWidth`

    * `window.getMatchedCSSRules() // only forces style`
    * `window.getMatchedCSSRules()` only forces style


    ### Forms

    * `inputElem.select()`, `textareaElem.select()`

    ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/html/HTMLTextFormControlElement.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=192&dr=C))
    * `inputElem.select()`, `textareaElem.select()` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/html/HTMLTextFormControlElement.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=192&dr=C))

    ### contenteditable

    * Lots & lots of stuff
    * …including copying an image to clipboard ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/editing/Editor.cpp&sq=package:chromium&l=420&dr=C&rcl=1442532378))
    * Lots & lots of stuff, …including copying an image to clipboard ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/editing/Editor.cpp&sq=package:chromium&l=420&dr=C&rcl=1442532378))


    ## Appendix
    ##### Browsing the Chromium source:
    * forced layout (and style recalc): [`updateLayoutIgnorePendingStylesheets` - Chromium Code Search](https://code.google.com/p/chromium/codesearch#search/&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&type=cs)
    * forced style recalc: [`updateLayoutTree` - Chromium Code Search`](https://code.google.com/p/chromium/codesearch#search/&q=updateLayoutTree%20-f:out&p=1&sq=package:chromium&type=cs)
    * forced style recalc: [`updateLayoutTree` - Chromium Code Search](https://code.google.com/p/chromium/codesearch#search/&q=updateLayoutTree%20-f:out&p=1&sq=package:chromium&type=cs)
  23. @paulirish paulirish revised this gist Sep 18, 2015. 1 changed file with 20 additions and 20 deletions.
    40 changes: 20 additions & 20 deletions what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -5,42 +5,42 @@ All of the below properties or methods, when requested/called in JavaScript, wil
    ### 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();`
    * `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.scrollWidth;`, `elem.scrollHeight;`
    * `elem.scrollLeft;`, `elem.scrollTop; // also setting them`
    * `elem.scrollIntoView();`, `elem.scrollIntoViewIfNeeded();`
    * `elem.scrollBy();`, `elem.scrollTo();`
    * `elem.scrollWidth`, `elem.scrollHeight`
    * `elem.scrollLeft`, `elem.scrollTop // also setting them`
    * `elem.scrollIntoView()`, `elem.scrollIntoViewIfNeeded()`
    * `elem.scrollBy()`, `elem.scrollTo()`

    ##### Focus
    * `elem.focus(); // can trigger a *double* forced layout` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Element.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=2369&ct=rc&cd=4&dr=C))
    * `elem.focus() // can trigger a *double* forced layout` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Element.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=2369&ct=rc&cd=4&dr=C))

    ##### Also…
    * `elem.computedRole;`, `elem.computedName;`
    * `elem.innerText;` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Element.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=2626&ct=rc&cd=4&dr=C))
    * `elem.computedRole`, `elem.computedName`
    * `elem.innerText` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Element.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=2626&ct=rc&cd=4&dr=C))

    ### Range

    * `range.getClientRects();`, `range.getBoundingClientRect();`
    * `range.getClientRects()`, `range.getBoundingClientRect()`

    ### Mouse events

    * `mouseEvt.layerX;`, `mouseEvt.layerY;`, `mouseEvt.offsetX;`, `mouseEvt.offsetY;`
    * `mouseEvt.layerX`, `mouseEvt.layerY`, `mouseEvt.offsetX`, `mouseEvt.offsetY`

    [source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/events/MouseRelatedEvent.cpp&q=f:mouserelatedevent%20computeRelativePosition&sq=package:chromium&type=cs&l=132)


    ### getComputedStyle

    `window.getComputedStyle(); // will typically force style recalc` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Document.cpp&sq=package:chromium&type=cs&l=1860&q=updateLayoutTreeForNodeIfNeeded))
    `window.getComputedStyle() // will typically force style recalc` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Document.cpp&sq=package:chromium&type=cs&l=1860&q=updateLayoutTreeForNodeIfNeeded))

    `window.getComputedStyle(); // will force layout, as well,` if one of the following:
    `window.getComputedStyle() // will force layout, as well,` if one of the following:

    1. The element is in a shadow tree
    1. There are media queries (viewport-related ones); specifically, one of the following: ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/css/MediaQueryExp.cpp&sq=package:chromium&type=cs&l=163&q=MediaQueryExp::isViewportDependent))
    1. There are media queries (viewport-related ones) specifically, one of the following: ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/css/MediaQueryExp.cpp&sq=package:chromium&type=cs&l=163&q=MediaQueryExp::isViewportDependent))
    * `min-width`, `min-height`, `max-width`, `max-height`, `width`, `height`
    * `aspect-ratio`, `min-aspect-ratio`, `max-aspect-ratio`
    * `device-pixel-ratio`, `resolution`, `orientation`
    @@ -57,19 +57,19 @@ All of the below properties or methods, when requested/called in JavaScript, wil

    ### document

    * `doc.scrollingElement; // only forces style`
    * `doc.scrollingElement // only forces style`

    ### window

    * `window.scrollX;`, `window.scrollY;`
    * `window.innerHeight;`, `window.innerWidth;`
    * `window.scrollX`, `window.scrollY`
    * `window.innerHeight`, `window.innerWidth`

    * `window.getMatchedCSSRules(); // only forces style`
    * `window.getMatchedCSSRules() // only forces style`


    ### Forms

    * `inputElem.select();`, `textareaElem.select();`
    * `inputElem.select()`, `textareaElem.select()`

    ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/html/HTMLTextFormControlElement.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=192&dr=C))

  24. @paulirish paulirish revised this gist Sep 18, 2015. 1 changed file with 27 additions and 48 deletions.
    75 changes: 27 additions & 48 deletions what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,61 +4,43 @@ All of the below properties or methods, when requested/called in JavaScript, wil

    ### Element

    * `elem.offsetLeft;`
    * `elem.offsetTop;`
    * `elem.offsetWidth;`
    * `elem.offsetHeight;`
    * `elem.offsetParent;`

    * `elem.clientLeft;`
    * `elem.clientTop;`
    * `elem.clientWidth;`
    * `elem.clientHeight;`

    * `elem.scrollWidth;`
    * `elem.scrollHeight;`
    * `elem.scrollLeft; // also setting it`
    * `elem.scrollTop; // also setting it`

    * `elem.computedRole;`
    * `elem.computedName;`

    * `elem.innerText;` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Element.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=2626&ct=rc&cd=4&dr=C))


    * `elem.scrollIntoView();`
    * `elem.scrollIntoViewIfNeeded();`

    * `elem.scrollBy();`
    * `elem.scrollTo();`

    * `elem.getClientRects();`
    * `elem.getBoundingClientRect();`

    ##### 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.scrollWidth;`, `elem.scrollHeight;`
    * `elem.scrollLeft;`, `elem.scrollTop; // also setting them`
    * `elem.scrollIntoView();`, `elem.scrollIntoViewIfNeeded();`
    * `elem.scrollBy();`, `elem.scrollTo();`

    ##### Focus
    * `elem.focus(); // can trigger a *double* forced layout` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Element.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=2369&ct=rc&cd=4&dr=C))

    ##### Also…
    * `elem.computedRole;`, `elem.computedName;`
    * `elem.innerText;` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Element.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=2626&ct=rc&cd=4&dr=C))

    ### Range

    * `range.getClientRects();`
    * `range.getBoundingClientRect();`
    * `range.getClientRects();`, `range.getBoundingClientRect();`

    ### Mouse events

    * `mouseEvt.layerX;`
    * `mouseEvt.layerY;`
    * `mouseEvt.offsetX;`
    * `mouseEvt.offsetY;`
    * `mouseEvt.layerX;`, `mouseEvt.layerY;`, `mouseEvt.offsetX;`, `mouseEvt.offsetY;`

    [source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/events/MouseRelatedEvent.cpp&q=f:mouserelatedevent%20computeRelativePosition&sq=package:chromium&type=cs&l=132)


    ### getComputedStyle

    `window.getComputedStyle(); // will typically force style recalc` [source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Document.cpp&sq=package:chromium&type=cs&l=1860&q=updateLayoutTreeForNodeIfNeeded)
    `window.getComputedStyle(); // will typically force style recalc` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Document.cpp&sq=package:chromium&type=cs&l=1860&q=updateLayoutTreeForNodeIfNeeded))

    `window.getComputedStyle(); // will force layout, as well,` if one of the following:

    `window.getComputedStyle(); // will force layout, as well,` if one of the following:
    1. The element is in a shadow tree
    1. There are media queries (viewport-related ones); specifically, one of the following: ([MediaQueryExp.cpp - Code Search](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/css/MediaQueryExp.cpp&sq=package:chromium&type=cs&l=163&q=MediaQueryExp::isViewportDependent))
    1. There are media queries (viewport-related ones); specifically, one of the following: ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/css/MediaQueryExp.cpp&sq=package:chromium&type=cs&l=163&q=MediaQueryExp::isViewportDependent))
    * `min-width`, `min-height`, `max-width`, `max-height`, `width`, `height`
    * `aspect-ratio`, `min-aspect-ratio`, `max-aspect-ratio`
    * `device-pixel-ratio`, `resolution`, `orientation`
    @@ -79,25 +61,22 @@ All of the below properties or methods, when requested/called in JavaScript, wil

    ### window

    * `window.scrollX;`
    * `window.scrollY;`
    * `window.innerHeight;`
    * `window.innerWidth;`
    * `window.scrollX;`, `window.scrollY;`
    * `window.innerHeight;`, `window.innerWidth;`

    * `window.getMatchedCSSRules(); // only forces style`


    ### Forms

    * `inputElem.select();`
    * `textareaElem.select();`
    * `inputElem.select();`, `textareaElem.select();`

    [source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/html/HTMLTextFormControlElement.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=192&dr=C)
    ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/html/HTMLTextFormControlElement.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=192&dr=C))

    ### contenteditable

    * Lots & lots of stuff
    * …including copying an image to clipboard [source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/editing/Editor.cpp&sq=package:chromium&l=420&dr=C&rcl=1442532378)
    * …including copying an image to clipboard ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/editing/Editor.cpp&sq=package:chromium&l=420&dr=C&rcl=1442532378))


    ## Appendix
  25. @paulirish paulirish created this gist Sep 18, 2015.
    106 changes: 106 additions & 0 deletions what-forces-layout.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,106 @@
    # What forces layout

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

    ### Element

    * `elem.offsetLeft;`
    * `elem.offsetTop;`
    * `elem.offsetWidth;`
    * `elem.offsetHeight;`
    * `elem.offsetParent;`

    * `elem.clientLeft;`
    * `elem.clientTop;`
    * `elem.clientWidth;`
    * `elem.clientHeight;`

    * `elem.scrollWidth;`
    * `elem.scrollHeight;`
    * `elem.scrollLeft; // also setting it`
    * `elem.scrollTop; // also setting it`

    * `elem.computedRole;`
    * `elem.computedName;`

    * `elem.innerText;` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Element.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=2626&ct=rc&cd=4&dr=C))


    * `elem.scrollIntoView();`
    * `elem.scrollIntoViewIfNeeded();`

    * `elem.scrollBy();`
    * `elem.scrollTo();`

    * `elem.getClientRects();`
    * `elem.getBoundingClientRect();`

    * `elem.focus(); // can trigger a *double* forced layout` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Element.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=2369&ct=rc&cd=4&dr=C))

    ### Range

    * `range.getClientRects();`
    * `range.getBoundingClientRect();`

    ### Mouse events

    * `mouseEvt.layerX;`
    * `mouseEvt.layerY;`
    * `mouseEvt.offsetX;`
    * `mouseEvt.offsetY;`

    [source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/events/MouseRelatedEvent.cpp&q=f:mouserelatedevent%20computeRelativePosition&sq=package:chromium&type=cs&l=132)


    ### getComputedStyle

    `window.getComputedStyle(); // will typically force style recalc` [source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Document.cpp&sq=package:chromium&type=cs&l=1860&q=updateLayoutTreeForNodeIfNeeded)

    `window.getComputedStyle(); // will force layout, as well,` if one of the following:
    1. The element is in a shadow tree
    1. There are media queries (viewport-related ones); specifically, one of the following: ([MediaQueryExp.cpp - Code Search](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/css/MediaQueryExp.cpp&sq=package:chromium&type=cs&l=163&q=MediaQueryExp::isViewportDependent))
    * `min-width`, `min-height`, `max-width`, `max-height`, `width`, `height`
    * `aspect-ratio`, `min-aspect-ratio`, `max-aspect-ratio`
    * `device-pixel-ratio`, `resolution`, `orientation`
    1. The property requested is one of the following: ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/css/CSSComputedStyleDeclaration.cpp&sq=package:chromium&l=457&dr=C&q=isLayoutDependent))
    * `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`
    * `webkit-filter`, `backdrop-filter`
    * `motion-path`, `motion-offset`, `motion-rotation`
    * `x`, `y`, `rx`, `ry`

    ### document

    * `doc.scrollingElement; // only forces style`

    ### window

    * `window.scrollX;`
    * `window.scrollY;`
    * `window.innerHeight;`
    * `window.innerWidth;`

    * `window.getMatchedCSSRules(); // only forces style`


    ### Forms

    * `inputElem.select();`
    * `textareaElem.select();`

    [source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/html/HTMLTextFormControlElement.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=192&dr=C)

    ### contenteditable

    * Lots & lots of stuff
    * …including copying an image to clipboard [source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/editing/Editor.cpp&sq=package:chromium&l=420&dr=C&rcl=1442532378)


    ## Appendix
    ##### Browsing the Chromium source:
    * forced layout (and style recalc): [`updateLayoutIgnorePendingStylesheets` - Chromium Code Search](https://code.google.com/p/chromium/codesearch#search/&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&type=cs)
    * forced style recalc: [`updateLayoutTree` - Chromium Code Search`](https://code.google.com/p/chromium/codesearch#search/&q=updateLayoutTree%20-f:out&p=1&sq=package:chromium&type=cs)