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.
elem.offsetLeft,elem.offsetTop,elem.offsetWidth,elem.offsetHeight,elem.offsetParentelem.clientLeft,elem.clientTop,elem.clientWidth,elem.clientHeightelem.getClientRects(),elem.getBoundingClientRect()
elem.scrollWidth,elem.scrollHeightelem.scrollLeft,elem.scrollTop // also setting themelem.scrollIntoView(),elem.scrollIntoViewIfNeeded()elem.scrollBy(),elem.scrollTo()
elem.focus() // can trigger a *double* forced layout(source)
elem.computedRole,elem.computedNameelem.innerText(source)
range.getClientRects(),range.getBoundingClientRect()
mouseEvt.layerX,mouseEvt.layerY,mouseEvt.offsetX,mouseEvt.offsetY
window.getComputedStyle() // will typically force style recalc (source)
window.getComputedStyle() // will force layout, as well, if one of the following:
- 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,heightaspect-ratio,min-aspect-ratio,max-aspect-ratiodevice-pixel-ratio,resolution,orientation
- The property requested is one of the following: (source)
height,widthtop,right,bottom,leftmargin[-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-origintranslate,rotate,scalewebkit-filter,backdrop-filtermotion-path,motion-offset,motion-rotationx,y,rx,ry
doc.scrollingElement // only forces style
-
window.scrollX,window.scrollY -
window.innerHeight,window.innerWidth -
window.getMatchedCSSRules() // only forces style
inputElem.select(),textareaElem.select()
(source)
- Lots & lots of stuff
- …including copying an image to clipboard (source)
- forced layout (and style recalc):
updateLayoutIgnorePendingStylesheets- Chromium Code Search - forced style recalc:
updateLayoutTree- Chromium Code Search`