Skip to content

Instantly share code, notes, and snippets.

@metaphox

metaphox/what-forces-layout.md

Forked from paulirish/what-forces-layout.md
Last active September 19, 2015 11:15
Download ZIP

Revisions

  1. @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)
  2. @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 'layout thrashing' | Wilson Page](http://wilsonpage.co.uk/preventing-layout-thrashing/)
  3. @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 'layout thrashing' | 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)
  4. @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)
  5. @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))
  6. @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))
  7. @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))
  8. @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)
  9. @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))

  10. @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
  11. @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)