paulirish

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

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

// Log all DOM mutations to console.

// Modern interpretation of https://github.com/kdzwinel/DOMListenerExtension

observer = new MutationObserver(onMutation);
observerSettings = {
  subtree: true,
  childList: true,
  attributes: true,
  attributeOldValue: true,

paulirish

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 */

window.$ = document.querySelectorAll.bind(document);

Node.prototype.on = window.on = function (name, fn) {
  this.addEventListener(name, fn);
}

NodeList.prototype.__proto__ = Array.prototype;

paulirish

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

/*



  .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 

paulirish

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

paulirish

// 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'];

paulirish

// @license http://opensource.org/licenses/MIT
// copyright Paul Irish 2015


// Date.now() is supported everywhere except IE8. For IE8 we use the Date.now polyfill
//   github.com/Financial-Times/polyfill-service/blob/master/polyfills/Date.now/polyfill.js
// as Safari 6 doesn't have support for NavigationTiming, we use a Date.now() timestamp for relative values

// if you want values similar to what you'd get with real perf.now, 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