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.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft
,elem.offsetTop
,elem.offsetWidth
,elem.offsetHeight
,elem.offsetParent
elem.clientLeft
,elem.clientTop
,elem.clientWidth
,elem.clientHeight
elem.getClientRects()
,elem.getBoundingClientRect()
elem.scrollBy()
,elem.scrollTo()
elem.scrollIntoView()
,elem.scrollIntoViewIfNeeded()
elem.scrollWidth
,elem.scrollHeight
elem.scrollLeft
,elem.scrollTop
also, setting them
elem.focus()
(source)
elem.computedRole
,elem.computedName
elem.innerText
(source)
window.scrollX
,window.scrollY
window.innerHeight
,window.innerWidth
- window.visualViewport.height / width / offsetTop / offsetLeft (source)
document.scrollingElement
only forces styledocument.elementFromPoint
inputElem.focus()
inputElem.select()
,textareaElem.select()
mouseEvt.layerX
,mouseEvt.layerY
,mouseEvt.offsetX
,mouseEvt.offsetY
(source)
window.getComputedStyle()
will typically force style recalc.
window.getComputedStyle()
will often force layout, as well.
Details of the conditions where gCS() forces layout
window.getComputedStyle()
will force layout in one of 3 conditions:
- The element is in a shadow tree
- There are media queries (viewport-related ones). Specifically, one of the following: (source
min-width
,min-height
,max-width
,max-height
,width
,height
aspect-ratio
,min-aspect-ratio
,max-aspect-ratio
device-pixel-ratio
,resolution
,orientation
,min-device-pixel-ratio
,max-device-pixel-ratio
- The property requested is one of the following: (source)
height
,width
top
,right
,bottom
,left
margin
[-top
,-right
,-bottom
,-left
, or shorthand] only if the margin is fixed.padding
[-top
,-right
,-bottom
,-left
, or shorthand] only if the padding is fixed.transform
,transform-origin
,perspective-origin
translate
,rotate
,scale
grid
,grid-template
,grid-template-columns
,grid-template-rows
perspective-origin
- These items were previously in the list but appear to not be any longer (as of Feb 2018):
motion-path
,motion-offset
,motion-rotation
,x
,y
,rx
,ry
range.getClientRects()
,range.getBoundingClientRect()
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!
- Lots & lots of stuff, …including copying an image to clipboard (source)
- 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:for
loops that force layout & change the DOM are the worst, avoid them.- 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.
- Batch your writes & reads to the DOM (via FastDOM or a virtual DOM implementation). Read your metrics at the begininng of the frame (very very start of
rAF
, scroll handler, etc), when the numbers are still identical to the last time layout was done.
- 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.
- Tony Gentilcore's Layout Triggering List 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 - Gecko's reflow appears to be requested via FrameNeedsReflow. Results:
FrameNeedsReflow
- mozilla-central searchfox - No concrete data on IE or EdgeHTML, but they likely were roughly the same, as the return values for these properties are spec'd.
- Avoiding layout thrashing — Web Fundamentals The best resource on identifying and fixing this topic.
- Fixing Layout thrashing in the real world | Matt Andrews
- Timeline demo: Diagnosing forced synchronous layouts - Google Chrome
- Preventing 'layout thrashing' | Wilson Page
- wilsonpage/fastdom
- Rendering: repaint, reflow/relayout, restyle / Stoyan
- We spent a week making Trello boards load extremely fast. Here’s how we did it. - Fog Creek Blog
- Minimizing browser reflow | PageSpeed Insights | Google Developers
- Optimizing Web Content in UIWebViews and Websites on iOS
- Accelerated Rendering in Chrome
- web performance for the curious
- Jank Free
Updated slightly April 2020. Codesearch links and a few changes to relevant element properties.
I've started a little repository to reproduce these issues in order to learn from them. Maybe we can start to collect best practices there and see if some issues are resolved in the future.
https://github.com/htho/what-forces-layout-reflow