Emanuel Sanabria emanuel-sanabria-developer

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

	<!DOCTYPE html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title></title>
	<meta name="description" content="">

	// Works in modern browsers + IE9, but Modernizr has a polyfill baked in for function.bind.
	// Hat tip Paul Irish

	var o = $( {} );
	$.subscribe = o.on.bind(o);
	$.unsubscribe = o.off.bind(o);
	$.publish = o.trigger.bind(o);

	// Usage
	$(document.body).on( 'click', function() {

	<?php

	function is_subpage() {
	global $post;
	if ( is_page() && $post->post_parent ) {
	return $post->post_parent;
	} else {
	return false;
	}
	}

	/**
	* Converts an RGB color value to HSL. Conversion formula
	* adapted from http://en.wikipedia.org/wiki/HSL_color_space.
	* Assumes r, g, and b are contained in the set [0, 255] and
	* returns h, s, and l in the set [0, 1].
	*
	* @param Number r The red color value
	* @param Number g The green color value
	* @param Number b The blue color value
	* @return Array The HSL representation

	/*
	* Request new frame by Paul Irish.
	* 60 FPS.
	*/

	window.requestAnimFrame = (function() {

	return window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|

	/*
	* Useful function for random integer between [min, max].
	*/

	function randomBetween(min, max) {
	return ~~(Math.random() * (max - min + 1) + min);
	}

	if( /Android\|webOS\|iPhone\|iPad\|iPod\|BlackBerry\|IEMobile\|Opera Mini/i.test(navigator.userAgent) ) {
	// some code..
	}

	function shadeColor($color, $percent) {
	$num = base_convert(substr($color, 1), 16, 10);
	$amt = round(2.55 * $percent);
	$r = ($num >> 16) + $amt;
	$b = ($num >> 8 & 0x00ff) + $amt;
	$g = ($num & 0x0000ff) + $amt;

	return '#'.substr(base_convert(0x1000000 + ($r<255?$r<1?0:$r:255)0x10000 + ($b<255?$b<1?0:$b:255)0x100 + ($g<255?$g<1?0:$g:255), 10, 16), 1);
	}

	function ObserverList() {
	this.list = [];
	};

	ObserverList.prototype.add = function(obj) {
	this.list.push(obj);
	};

	ObserverList.prototype.removeAt = function( index ){
	this.list.splice( index, 1 );