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.offsetParent;elem.clientLeft;,elem.clientTop;,elem.clientWidth;,elem.clientHeight;elem.getClientRects();,elem.getBoundingClientRect();
elem.scrollWidth;,elem.scrollHeight;elem.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.computedName;elem.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`