Jacob Groß kurtextrem

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

console.log wrap resolving for your wrapped console logs

I've heard this before:

What I really get frustrated by is that I cannot wrap console.* and preserve line numbers

We enabled this in Chrome DevTools via blackboxing a bit ago.

If you blackbox the script file the contains the console log wrapper, the script location shown in the console will be corrected to the original source file and line number. Click, and the full source is looking longingly into your eyes.

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

Blink aborts computing styles on descendants of display:none nodes. If the inside of the iframe has , you make remove recalc style, no layout, no painting. still does all that work because it's another document and the display:none effect does not transcend into the other document.

	<!DOCTYPE html>
	<html>
	<head>
	<title>CSS3 Checkbox</title>
	<style type="text/css">
	.checkbox {
	width: 30px;
	height: 30px;
	background-color: #ddd;
	position: relative;

	<!DOCTYPE html>
	<html>
	<head>
	<title>Notification Bar</title>
	<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
	<style type="text/css">
	.container {
	padding: 20px;
	}
	.notificationBar {

	<html>
	<head>
	<title>Step progress bar</title>
	<style type="text/css">
	.container {
	width: 100%;
	}
	.progressbar {
	counter-reset: step;
	}

	* {
	font-size: 12pt;
	font-family: monospace;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	color: black;
	cursor: default;
	}

	# Result: http://i.imgur.com/thrh1TU.gif

	from moviepy.editor import *

	# We start with a looping gif, and we will add some text
	clip = VideoFileClip("eugene.gif").speedx(0.7) # slow down a little

	txt = (TextClip("Hey", fontsize=78, font='Impact-Normal',
	color='yellow', stroke_color='black',
	stroke_width=3, kerning=1.5)

	(function(window){

	var EVENT_EXISTS = 'GlobalEvents: Event already exists.';

	var eventIsRunning,
	_eventStack,
	_findByName,
	stackEvent,
	removeEvent,
	eventListener,