Pavel Klimashkin klimashkin

Cheat sheet for callable entities in ES6

Value:

	FD	FE	AF	C	M
Function-callable	✓	✓	✓	×	✓
Constructor-callable	✓	✓	×	✓	×
Prototype	`F.p`	`F.p`	`F.p`	SC	`F.p`
Property `prototype`	✓	✓	×	✓	×

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

Latency numbers every programmer should know

L1 cache reference ......................... 0.5 ns
Branch mispredict ............................ 5 ns
L2 cache reference ........................... 7 ns
Mutex lock/unlock ........................... 25 ns
Main memory reference ...................... 100 ns             
Compress 1K bytes with Zippy ............. 3,000 ns  =   3 µs
Send 2K bytes over 1 Gbps network ....... 20,000 ns  =  20 µs
SSD random read ........................ 150,000 ns  = 150 µs

Read 1 MB sequentially from memory ..... 250,000 ns = 250 µs

	function reloadCSS() {
	const links = document.getElementsByTagName('link');

	Array.from(links)
	.filter(link => link.rel.toLowerCase() === 'stylesheet' && link.href)
	.forEach(link => {
	const url = new URL(link.href, location.href);
	url.searchParams.set('forceReload', Date.now());
	link.href = url.href;
	});

	To enable window.gc() on Chrome browser console you just need to start Chrome like this:

	> /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --js-flags="--expose-gc" --enable-memory-info

	Those flags enable the following console API, very usefull to debug memory leaks:

	> console.memory // print memory information
	> window.gc() // force garbage collection

	--log_gc (Log heap samples on garbage collection for the hp2ps tool.)
	type: bool default: false
	--expose_gc (expose gc extension)
	type: bool default: false
	--max_new_space_size (max size of the new generation (in kBytes))
	type: int default: 0
	--max_old_space_size (max size of the old generation (in Mbytes))
	type: int default: 0
	--max_executable_size (max size of executable memory (in Mbytes))
	type: int default: 0

	user www-data;

	http {

	##
	# Basic Settings
	##

	sendfile on;
	tcp_nopush on;

	#!/usr/bin/env bash
	# MIT © Sindre Sorhus - sindresorhus.com

	# git hook to run a command after `git pull` if a specified file was changed
	# Run `chmod +x post-merge` to make it executable then put it into `.git/hooks/`.

	changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"

	check_run() {
	echo "$changed_files" \| grep --quiet "$1" && eval "$2"

	# to generate your dhparam.pem file, run in the terminal
	openssl dhparam -out /etc/nginx/ssl/dhparam.pem 2048