Skip to content

Instantly share code, notes, and snippets.

paulirish /
Last active September 23, 2023 09:11
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.

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
paulirish /
Last active September 22, 2023 10:35
How to view-source of a Chrome extension

Option 1: Command-line download extension as zip and extract

extension_id=jifpbeccnghkjeaalbbjmodiffmgedin   # change this ID
curl -L -o "$" "$extension_id%26uc" 
unzip -d "$extension_id-source" "$"

Thx to crxviewer for the magic download URL.

paulirish / log-all-mutations.js
Created January 25, 2023 22:44
Log all DOM mutations to console
View log-all-mutations.js
// Log all DOM mutations to console.
// Modern interpretation of
observer = new MutationObserver(onMutation);
observerSettings = {
subtree: true,
childList: true,
attributes: true,
attributeOldValue: true,
paulirish / InteractionsEventTiming.js
Last active September 16, 2023 11:11 — forked from anniesullie/InteractionsEventTiming.js
This gist pokes around with interactions in the EventTiming API. It tries to get the interaction latency, delay, processing time breakdown, type, and target.
View InteractionsEventTiming.js
const interactionMap = new Map();
function logInteraction(interaction) {
const clamp = val => Math.round(val * 100) / 100; // clamp to 2 decimal places
console.groupCollapsed(`${interaction.type} interaction`, clamp(interaction.latency));
console.log(`total latency`, clamp(interaction.latency));
console.log('delay:', clamp(interaction.delay));
console.groupCollapsed(`processing time in ${Object.entries(interaction.processingTimes).length} entries:`, clamp(interaction.processingTime));
for (const [e, t] of Object.entries(interaction.processingTimes)) {
paulirish / bling.js
Last active September 12, 2023 12:09
bling dot js
View bling.js
/* bling.js */
window.$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function (name, fn) {
this.addEventListener(name, fn);
NodeList.prototype.__proto__ = Array.prototype;
paulirish / gist:5558557
Last active September 1, 2023 14:51
a brief history of detecting local storage
View gist:5558557
paulirish / gist:704386
Created November 17, 2010 23:55
10 or 11 or 12 things i learned from the jquery source
View gist:704386
.d dP"Yb dP"Yb 88""Yb .d .d dP"Yb 88""Yb .d oP"Yb. 888888 88 88 88 88b 88 dP""b8 .dP"Y8
.d88 dP Yb dP Yb 88__dP .d88 .d88 dP Yb 88__dP .d88 "' dP' 88 88 88 88 88Yb88 dP `" `Ybo."
88 Yb dP Yb dP 88"Yb 88 88 Yb dP 88"Yb 88 dP' 88 888888 88 88 Y88 Yb "88 o.`Y8b
88 YbodP YbodP 88 Yb 88 88 YbodP 88 Yb 88 .d8888 88 88 88 88 88 Y8 YboodP 8bodP'
88 88 888888 db 88""Yb 88b 88 888888 8888b. 888888 88""Yb dP"Yb 8b d8
View how to screencapture and make animated gifs or

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

  1. Launch quicktime player
  2. do Screen recording

screen shot 2014-10-22 at 11 16 23 am

paulirish / rAF.js
Last active August 12, 2023 06:59
requestAnimationFrame polyfill
View rAF.js
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
paulirish /
Last active August 1, 2023 15:42 polyfill (aka
// @license
// copyright Paul Irish 2015
// is supported everywhere except IE8. For IE8 we use the polyfill
// as Safari 6 doesn't have support for NavigationTiming, we use a timestamp for relative values
// if you want values similar to what you'd get with real, place this towards the head of the page
// but in reality, you're just getting the delta between now() calls, so it's not terribly important where it's placed