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.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
L1 cache reference ......................... 0.5 ns
Branch mispredict ............................ 5 ns
L2 cache reference ........................... 7 ns
Mutex lock/unlock ........................... 25 ns
Main memory reference ...................... 100 ns
Compress 1K bytes with Zippy ............. 3,000 ns = 3 µs
Send 2K bytes over 1 Gbps network ....... 20,000 ns = 20 µs
SSD random read ........................ 150,000 ns = 150 µs
Read 1 MB sequentially from memory ..... 250,000 ns = 250 µs
| // ==UserScript== | |
| // @name UTM param stripper | |
| // @author Paul Irish | |
| // @namespace http://github.com/paulirish | |
| // @version 1.2 | |
| // @description Drop the UTM params from a URL when the page loads. | |
| // @extra Cuz you know they're all ugly n shit. | |
| // @include http*://* | |
| // ==/UserScript== |
Backstory: I decided to crowdsource static site generator recommendations, so the following are actual real world suggested-to-me results. I then took those and sorted them by language/server and, just for a decent relative metric, their Github Watcher count. If you want a heap of other projects (including other languages like Haskell and Python) Nanoc has the mother of all site generator lists. If you recommend another one, by all means add a comment.
| // ==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. |
There are so many great GIFs out there and I want to have copies of them. Twitter makes that harder than it should be by converting them to MP4 and not providing access to the source material. To make it easier, I made a bash pipeline that takes a tweet URL and a filename, extracts the MP4 from that tweet and uses ffmpeg to convert back to GIF.
brew install ffmpegapt install ffmpeg| ... | |
| // test for font-face version to load via Data URI'd CSS | |
| // Basically, load WOFF unless it's android's default browser, which needs TTF, or ie8-, which needs eot | |
| var fonts = ns.files.css.fontsWOFF, | |
| ua = win.navigator.userAgent; | |
| // android webkit browser, non-chrome | |
| if( ua.indexOf( "Android" ) > -1 && ua.indexOf( "like Gecko" ) > -1 && ua.indexOf( "Chrome" ) === -1 ){ | |
| fonts = ns.files.css.fontsTTF; | |
| } |
| /* | |
| * Normalized hide address bar for iOS & Android | |
| * (c) Scott Jehl, scottjehl.com | |
| * MIT License | |
| */ | |
| (function( win ){ | |
| var doc = win.document; | |
| // If there's a hash, or addEventListener is undefined, stop here | |
| if( !location.hash && win.addEventListener ){ |
| (function() { | |
| let canvas = document.querySelector('canvas'); | |
| // Optional frames per second argument. | |
| let stream = canvas.captureStream(25); | |
| var options = {mimeType: 'video/webm; codecs=vp9'}; | |
| let recorder = new MediaRecorder(stream, options); | |
| let blobs = []; | |
| function download(blob) { | |
| var url = window.URL.createObjectURL(blob); |
| /* | |
| As of version 1.1.2, Propane will load and execute the contents of | |
| ~Library/Application Support/Propane/unsupported/caveatPatchor.js | |
| immediately following the execution of its own enhancer.js file. | |
| You can use this mechanism to add your own customizations to Campfire | |
| in Propane. | |
| Below you'll find two customization examples. |