Adi adi518

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

	// Compatible with Vue.js

	function getElementByRef(ref, refs) {
	refs = refs \|\| this.$refs

	const noRefs = !refs

	if (noRefs) {
	console.error(`[getElementByRef warn]: No refs found.`)
	return

	(function(){
	var me, myself, irene

	// logic
	}())

	(function(){
	var me, myself, irene

	// logic
	})()

	function(){
	var me, myself, irene

	// logic
	}()

	var myCode = function(){
	var me, myself, irene

	// logic
	}()

	/* global scope */

	// third-party code

	// our code

	var myCode = function(){
	var me, myself, irene

	// logic