Timo Tijhof Krinkle

Beware of `<script async defer>` blocking HTML `"load"` event

2015.10.07 t

On the importance of simulated latency testing, and bulletproofing your page from the third-party JS load failures

TL;DR

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

Profiling an application in Mac OS X

Finding which process to profile

If your system is running slowly, perhaps a process is using too much CPU time and won't let other processes run smoothly. To find out which processes are taking up a lot of CPU time, you can use Apple's Activity Monitor.

The CPU pane shows how processes are affecting CPU (processor) activity:

People

`:bowtie:`	😄 `:smile:`	😆 `:laughing:`
😊 `:blush:`	😃 `:smiley:`	☺️ `:relaxed:`
😏 `:smirk:`	😍 `:heart_eyes:`	😘 `:kissing_heart:`
😚 `:kissing_closed_eyes:`	😳 `:flushed:`	😌 `:relieved:`
😆 `:satisfied:`	😁 `:grin:`	😉 `:wink:`
😜 `:stuck_out_tongue_winking_eye:`	😝 `:stuck_out_tongue_closed_eyes:`	😀 `:grinning:`
😗 `:kissing:`	😙 `:kissing_smiling_eyes:`	😛 `:stuck_out_tongue:`

stop procrastinating,

start $.Deferring!

http://tinyurl.com/nrhckto

	## Pre-requisite: You have to know your last commit message from your deleted branch.
	git reflog
	# Search for message in the list
	# a901eda HEAD@{18}: commit: <last commit message>

	# Now you have two options, either checkout revision or HEAD
	git checkout a901eda
	# Or
	git checkout HEAD@{18}

	#!/usr/bin/python

	import collections
	import json
	import os
	import signal
	import sys
	import subprocess
	# require pygithub installed
	from github import Github

	<!doctype html>
	<html>
	<head>
	<title></title>
	<style>
	body {
	background: white;
	text-align: center;
	padding: 20px;
	font-family: Georgia, serif;

	/**
	* Transplant the CSS styles from as parent document to a frame's document.
	*
	* This loops over the style sheets in the parent document, and copies their nodes to the
	* frame's document. It then polls the document to see when all styles have loaded, and once they
	* have, resolves the promise.
	*
	* If the styles still haven't loaded after a long time (5 seconds by default), we give up waiting
	* and resolve the promise anyway. This protects against cases like a display: none; iframe in
	* Firefox, where the styles won't load until the iframe becomes visible.

	import json
	import collections

	records = [json.loads(line) for line in open('deprecated-js.json')]

	def iter_modules():
	for record in records:
	for module in record.get('modules', ()):
	yield module