Skip to content

Instantly share code, notes, and snippets.

@paulirish
paulirish / what-forces-layout.md
Last active March 29, 2024 10:00
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
paulirish / how-to-view-source-of-chrome-extension.md
Last active March 28, 2024 04:14
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.zip" "https://clients2.google.com/service/update2/crx?response=redirect&os=mac&arch=x86-64&nacl_arch=x86-64&prod=chromecrx&prodchannel=stable&prodversion=44.0.2403.130&x=id%3D$extension_id%26uc" 
unzip -d "$extension_id-source" "$extension_id.zip"

Thx to crxviewer for the magic download URL.

@paulirish
paulirish / containment-and-content-vis.md
Created March 27, 2024 17:42
primer on containment and content-vis for web perf

containment recap

  • none (default)
  • layout, paint, style - the easy ones.
    • content === these three
    • bonus benefit of contain: layout -- any pos:fixed children will be relative to it.
  • size - harder. the element must define its own size, can't rely on laying out its children.
    • strict === content + size
    • inline-size - dunno? size but for display:inline-ish things?
@paulirish
paulirish / rAF.js
Last active March 22, 2024 00:00
requestAnimationFrame polyfill
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// 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'];
// everyone's new favorite closure pattern:
(function(window,document,undefined){ ... })(this,this.document);
// when minified:
(function(w,d,u){ ... })(this,this.document);
// which means all uses of window/document/undefined inside the closure
// will be single-lettered, so big gains in minification.
// it also will speed up scope chain traversal a tiny tiny little bit.
@paulirish
paulirish / bling.js
Last active February 20, 2024 14:11
bling dot 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
paulirish / data-markdown.user.js
Last active February 6, 2024 10:41
*[data-markdown] - use markdown, sometimes, in your HTML
// ==UserScript==
// @name Use Markdown, sometimes, in your HTML.
// @author Paul Irish <http://paulirish.com/>
// @link http://git.io/data-markdown
// @match *
// ==/UserScript==
// If you're not using this as a userscript just delete from this line up. It's cool, homey.
@paulirish
paulirish / gist:5558557
Last active January 31, 2024 14:36
a brief history of detecting local storage

A timeline of the last four years of detecting good old window.localStorage.


Jan Lenhart, bless his heart contributed the first patch for support:

October 2009: 5059daa

@paulirish
paulirish / download-node-nightly.sh
Last active January 17, 2024 11:30 — forked from rvagg/install-node.sh
download-node-nightly.sh - simple script to fetch Node.js nightlies on OS X and Linux (x86, x64 & ARM)
#!/bin/bash
# Usage:
# bash download-node-nightly.sh
hasxz=$(which xzcat)
os=$(uname | tr '[A-Z]' '[a-z]')
arch=$(uname -m)
pwd=$(PWD)
@paulirish
paulirish / intro.md
Last active January 14, 2024 13:24
Evaluating overhead of performance.mark()

A few conversations have circled around user-side structural profiling. For context, see React PR #7549: Show React events in the timeline when ReactPerf is active

One particular concern is the measurement overhead. This gist has a benchmarking script (measure.js) for evaluating overhead and initial results.

Results: performance.mark()

Runs about 0.65µs per mark() call. Naturally, that's ~= an overhead of 1ms for 1500 mark()s. image