Timmy Willison timmywil

## what-forces-layout.md

      
              1 file
            
          
              0 forks
            
          
                0 comments
              
            
              4 stars
            
          
                timmywil
                / what-forces-layout.md
            
            
              Created
              June 17, 2016 17:22
                — forked from paulirish/what-forces-layout.md
            
              
                What forces layout/reflow. The comprehensive list.
              
          
    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()


## index.d.ts
import { Component } from 'react'
import { NativeModules } from 'react-native'

export = RNTrackPlayer

declare namespace RNTrackPlayer {
  export type EventType =
    | 'playback-state'
    | 'playback-error'
    | 'playback-queue-ended'

## gist:8657016
var foo = function foo() {
  foo = 5;
  console.log(foo);
};
foo();

// outputs: [Function foo]

## jquery.factory.js
// This can be done with what is currently in github (but has not yet been released)

// Using jsdom
var dom = jsdom.jsdom();
var window = dom.createWindow();
var window2 = dom.createWindow();
var factory = require('jquery');
var jquery1 = factory( window );
var jquery2 = factory( window2 );

## shared.js
// For node
if (typeof define !== "function") {
  var define = require("amdefine")( module );
  // Define base64 as empty
	define("libs/base64", function() {});
}

define([ "node-uuid", "libs/base64" ],
function( uuid, base64 ) {
  function awesome() {

## backPushState.js
/**
 * @license backPushState.js
 * A simple pushState library that falls back to hashChange (only for going back)
 * Copyright (c) 2011 timmy willison
 * Dual licensed under the MIT and GPL licenses.
 * http://timmywillison.com/licence/
 */

define([ 'jquery' ],
function( $ ) {

## gist:1333847
<body>
<div id="foo">...</div>
<script src="jquery.js"></script>
<script>
$( "#foo" ).offset();
</script>
</body>

## minimal-event.js
	var fire;
	if ( document.createEvent ) {
		fire = function( node, type ) {
			var event = document.createEvent('HTMLEvents');
			event.initEvent( type, true, true );
			node.dispatchEvent( event );
		};
	} else {
		fire = function( node, type ) {
			var event = document.createEventObject();

## avaya_draggable.js
/**
 * @license avaya.js
 * Load avaya webchat lightbox with iframe
 * Copyright (c) 2011 EPB
 */

define([ 'jquery', 'jquery-plugins/minLight' ],
function( $ ) {
	"use strict";

## module_defer.js
// This could be compatible with jQuery's Deferred implementation,
// futures.js (slightly different syntax) or any one of a number
// of other implementations
define(['lib/Deferred'], function( Deferred ){
	var defer = new Deferred();
	require(['lib/templates/?index.html','lib/data/?stats'],
		function( template, data ){
			defer.resolve({ template: template, data:data });
		}
	);
	import { Component } from 'react'
	import { NativeModules } from 'react-native'

	export = RNTrackPlayer

	declare namespace RNTrackPlayer {
	export type EventType =
	\| 'playback-state'
	\| 'playback-error'
	\| 'playback-queue-ended'
	var foo = function foo() {
	foo = 5;
	console.log(foo);
	};
	foo();

	// outputs: [Function foo]
	// This can be done with what is currently in github (but has not yet been released)

	// Using jsdom
	var dom = jsdom.jsdom();
	var window = dom.createWindow();
	var window2 = dom.createWindow();
	var factory = require('jquery');
	var jquery1 = factory( window );
	var jquery2 = factory( window2 );
	// For node
	if (typeof define !== "function") {
	var define = require("amdefine")( module );
	// Define base64 as empty
	define("libs/base64", function() {});
	}

	define([ "node-uuid", "libs/base64" ],
	function( uuid, base64 ) {
	function awesome() {
	/**
	* @license backPushState.js
	* A simple pushState library that falls back to hashChange (only for going back)
	* Copyright (c) 2011 timmy willison
	* Dual licensed under the MIT and GPL licenses.
	* http://timmywillison.com/licence/
	*/

	define([ 'jquery' ],
	function( $ ) {
	<body>
	<div id="foo">...</div>
	<script src="jquery.js"></script>
	<script>
	$( "#foo" ).offset();
	</script>
	</body>
	var fire;
	if ( document.createEvent ) {
	fire = function( node, type ) {
	var event = document.createEvent('HTMLEvents');
	event.initEvent( type, true, true );
	node.dispatchEvent( event );
	};
	} else {
	fire = function( node, type ) {
	var event = document.createEventObject();
	/**
	* @license avaya.js
	* Load avaya webchat lightbox with iframe
	* Copyright (c) 2011 EPB
	*/

	define([ 'jquery', 'jquery-plugins/minLight' ],
	function( $ ) {
	"use strict";
	// This could be compatible with jQuery's Deferred implementation,
	// futures.js (slightly different syntax) or any one of a number
	// of other implementations
	define(['lib/Deferred'], function( Deferred ){
	var defer = new Deferred();
	require(['lib/templates/?index.html','lib/data/?stats'],
	function( template, data ){
	defer.resolve({ template: template, data:data });
	}
	);