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

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)

Also…

elem.computedRole;, elem.computedName;
elem.innerText; (source)

Range

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

Mouse events

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

source

getComputedStyle

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, height
aspect-ratio, min-aspect-ratio, max-aspect-ratio
device-pixel-ratio, resolution, orientation

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
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)

contenteditable

Lots & lots of stuff
…including copying an image to clipboard (source)

Appendix

Browsing the Chromium source:

forced layout (and style recalc): updateLayoutIgnorePendingStylesheets - Chromium Code Search
forced style recalc: updateLayoutTree - Chromium Code Search`

iamnewton/what-forces-layout.md