Maksim Ryzhikov maksimr

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.

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

	<link rel="shortcut icon" width=32px>
	<canvas style="display: none" id="loader" width="16" height="16"></canvas>

	<script>
	class Loader {
	constructor(link, canvas) {
	this.link = link;
	this.canvas = canvas;
	this.context = canvas.getContext('2d');
	this.context.lineWidth = 2;