Skip to content

Instantly share code, notes, and snippets.

@paulirish
paulirish / generate_report.js
Last active February 22, 2023 01:20
hacking on lighthouse report
'use strict';
/* eslint-disable */
const fs = require('fs');
const path = require('path');
const ReportGenerator = require('../../lighthouse-core/report/report-generator');
const jsonPath = __dirname + '/../_json/';
@paulirish
paulirish / eqt.js
Last active April 26, 2020 01:14
Expected Queueing Time metric
// Expected Queueing Time
// https://docs.google.com/document/d/1Vgu7-R84Ym3lbfTRi98vpdspRr1UwORB4UV-p9K1FF0/edit
// Initial impl by Nicolás Peña (npm), Tim Dresser (tdresser)
// Usage:
// var eqt = EQT.begin();
// // ...
// const {expectedQueueingTime} = EQT.end();
class EQT {
constructor() {
@paulirish
paulirish / log-the-datatransfer-data.js
Created February 15, 2018 01:55
log paste and copy event payloads
document.body.innerHTML = 'Paste or drop items onto this page. View results in console.';
function getPayload(item) {
const kind = item.kind;
switch (kind) {
case 'string': return new Promise(res => item.getAsString(res));
case 'file': return Promise.resolve(item.getAsFile());
default: throw new Error('unknown item kind! ' + kind);
}
@paulirish
paulirish / coverage.js
Created July 12, 2017 20:15
JS coverage profiler data via protocol
'use strict';
const chromeLauncher = require('chrome-launcher');
const CDP = require('chrome-remote-interface');
const launchChrome = () =>
chromeLauncher.launch({
chromeFlags: ['--disable-gpu', '--headless']
});
@paulirish
paulirish / server-timing-demo.js
Last active August 7, 2024 16:56
Demo of server timing values. visualized in chrome devtools
// see for screenshot:
// https://twitter.com/paul_irish/status/829090506084749312
const http = require('http');
function requestHandler(request, response) {
const headers = {
'Server-Timing': `
sql-1;desc="MySQL lookup Server";dur=100,
sql-2;dur=900;desc="MySQL shard Server #1",
@paulirish
paulirish / intro-overhead-of-performance.mark.md
Last active April 2, 2024 16:50
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

@paulirish
paulirish / devtools-protocol-send-command-and-monitor.md
Last active February 11, 2020 17:42 — forked from jasonLaster/inspector.js
how to issue commands and monitor the devtools protocol

Playing with the protocol

You can send arbitrary commands over the protocol fairly easily.

Main.sendOverProtocol('Emulation.setDeviceMetricsOverride', nexus5XMetrics());
Main.sendOverProtocol("Emulation.clearDeviceMetricsOverride");

// It returns a promise
@paulirish
paulirish / index.html
Last active March 7, 2019 00:55
array augmenting: push read vs concat (http://jsbench.github.io/#e412522baff1e164b3dd1c679f2f0845) #jsbench #jsperf
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>array augmenting: push read vs concat</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
@paulirish
paulirish / open-chrome-tabs-in-safari.scpt
Created April 4, 2016 00:24
open chrome tabs in safari
tell application "Google Chrome"
set tab_list to every tab in the front window
repeat with the_tab in tab_list
set the_url to the URL of the_tab
tell application "Safari" to open location the_url
end repeat
end tell
<head>
...
<meta name="viewport" content="width=device-width">
...
</head>