Thais Robba ThaisRobba

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

	### Keybase proof

	I hereby claim:

	* I am thaisrobba on github.
	* I am thaispagarme (https://keybase.io/thaispagarme) on keybase.
	* I have a public key ASA4WQlESZ8WQKliucwJI6aVDYklClN6RfTf1MUz8YupRgo

	To claim this, I am signing this object:

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>For loop vs For ... of benchmark</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>

	var componentsList = {};

	function Component(name, func) {
	componentsList[name] = func;
	}

	//Components are created like this:
	Component('flying', function(o) {
	o.flying = true;
	});

	<link rel="import" href="../components/polymer/polymer.html">

	<polymer-element name="my-element">

	<template>
	<style>
	#design_host {
	position: absolute;
	width: 100%;
	height: 100%;

	local sum = 0
	function polynomial(t, x)
	--t is a table, x is the x value
	for i=1, #t do
	sum = sum+t[#t -i+1]*x^(i-1) --Travels in reverse through the table
	end
	return print(sum) --prints the result
	end