Saabbir Hossain Saabbir

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.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Email Coding Guidelines

Warning

These guidelines haven't been updated since 2016. Learn more…

Table of contents

TL;DR
Intro
Layout

People

`:bowtie:`	😄 `:smile:`	😆 `:laughing:`
😊 `:blush:`	😃 `:smiley:`	☺️ `:relaxed:`
😏 `:smirk:`	😍 `:heart_eyes:`	😘 `:kissing_heart:`
😚 `:kissing_closed_eyes:`	😳 `:flushed:`	😌 `:relieved:`
😆 `:satisfied:`	😁 `:grin:`	😉 `:wink:`
😜 `:stuck_out_tongue_winking_eye:`	😝 `:stuck_out_tongue_closed_eyes:`	😀 `:grinning:`
😗 `:kissing:`	😙 `:kissing_smiling_eyes:`	😛 `:stuck_out_tongue:`

Objects

To create a new object, use the new keyword followed by a call to a constructor function. Javascript provides the Object() constructor out-of-the-box:

var toilet = new Object();

Properties

Once you have an object, you can set and get properties on it, like this:

	var devices = [
	{ name: 'Desktop - Huge', width: 2880, height: 1800, ratio: 2, type: 'desktop' },
	{ name: 'Desktop - Extra Large', width: 1920, height: 1080, ratio: 1, type: 'desktop' },
	{ name: 'Desktop - Large', width: 1440, height: 900, ratio: 1, type: 'desktop' },
	{ name: 'Desktop - HiDPI', width: 1366, height: 768, ratio: 1, type: 'desktop' },
	{ name: 'Desktop - MDPI', width: 1280, height: 800, ratio: 1, type: 'desktop' },
	{ name: 'Laptop with HiDPI screen', width: 1440, height: 900, ratio: 2, type: 'desktop' },
	{ name: 'Laptop with MDPI screen', width: 1280, height: 800, ratio: 1, type: 'desktop' },
	{ name: 'Laptop with touch', width: 1280, height: 950, ratio: 1, type: 'desktop' },
	{ name: 'Tablet - Portrait', width: 768, height: 1024, ratio: 1, type: 'tablet' },

	export FC31="\[\033[31m\]"
	export FC32="\[\033[32m\]"
	export FC33="\[\033[33m\]"
	export FC34="\[\033[34m\]"
	export FC35="\[\033[35m\]"
	export FC36="\[\033[36m\]"
	export FC37="\[\033[37m\]"
	export FC38="\[\033[38m\]"
	export FC39="\[\033[39m\]"
	export FC5="\[\033[5m\]"

	<script type="text/javascript">
	(function () {
	"use strict";
	// once cached, the css file is stored on the client forever unless
	// the URL below is changed. Any change will invalidate the cache
	var css_href = './index_files/web-fonts.css';
	// a simple event handler wrapper
	function on(el, ev, callback) {
	if (el.addEventListener) {
	el.addEventListener(ev, callback, false);