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

plugn / parse-json.js

Created February 22, 2018 12:41 — forked from pbakondy/parse-json.js

Parse JSON, strip BOM

	// https://github.com/npm/npm/blob/master/lib/utils/parse-json.js

	'use strict'

	var parseJSON = module.exports = function (content) {
	return JSON.parse(stripBOM(content))
	}

	parseJSON.noExceptions = function (content) {
	try {

plugn / index.js

Created September 20, 2017 10:15 — forked from shospodarets/Chrome headless Puppeteer- capture DOM element screenshot using

Capture DOM element screenshot using Chrome headless

	const puppeteer = require('puppeteer');

	(async () => {

	const browser = await puppeteer.launch();
	const page = await browser.newPage();
	// Adjustments particular to this page to ensure we hit desktop breakpoint.
	page.setViewport({width: 1000, height: 600, deviceScaleFactor: 1});

	await page.goto('https://www.chromestatus.com/samples', {waitUntil: 'networkidle'});

plugn / perfectly-justified-css-grid-technique-using-inline-block.css

Created May 12, 2017 17:35 — forked from owlsky/perfectly-justified-css-grid-technique-using-inline-block.css

perfectly-justified-css-grid-technique-using-inline-block

	.wrapper{
	width: 550px;
	text-align: justify;
	background: firebrick;
	font-size: 0;
	font-size: 12px\9; /* IE6-9 only hack */
	}

	.wrapper div{
	background: white;

plugn / index.html

Created February 16, 2017 11:45 — forked from anonymous/index.html

JS Bin // source http://jsbin.com/hugeha

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
	<style id="jsbin-css">
	li {
	box-sizing: border-box;

plugn / index.html

Last active February 15, 2017 17:46 — forked from anonymous/index.html

TreeDND // http://jsbin.com/vofowip

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	li {
	box-sizing: border-box;
	padding: 10px

plugn / index.html

Created February 15, 2017 17:37 — forked from anonymous/index.html

treeDnD // http://jsbin.com/vofowip

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	li {
	box-sizing: border-box;
	padding: 10px

plugn / index.html

Created February 15, 2017 16:30 — forked from anonymous/index.html

treeDnD http://jsbin.com/vofowip

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	#app [draggable=true] {
	outline: 1px solid #eee;
	margin: 5px 0;

plugn / index.html

Created February 15, 2017 13:47 — forked from anonymous/index.html

Mozilla Drag N Drop Example // http://jsbin.com/bawoloq

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>

plugn / index.html

Created February 15, 2017 13:46 — forked from anonymous/index.html

JS Bin // source http://jsbin.com/vofowip

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	#app [draggable=true] {
	outline: 1px solid #eee;
	}

Max D plugn

What forces layout / reflow

Element

Box metrics