Awesome Performance Patches

🚀⚡ Awesome lists about performance related patches/PRs.

The purpose of this awesome list is to allow others to learn from performance improvements of the past 📝, so that you can submit your performance improvement sooner or later here as well 🤝.

_{The list also includes blog posts without PRs, if they contain enough code to make them useful for this purpose.
⭐ marks blog posts or articles covering a lot of areas with in-depth explanations.}

For Web Performance, there are a few more lists of curated links of talks, newsletters, blogs and more:
➡️ fabkrum/web-performance-resources ➡️ imteekay/web-performance-research ➡️ nucliweb/webperf-snippets

_{Hint: What improves performance might change over time; always re-validate assumptions by using a reliable benchmarking tool such as bench-node or Tachometer.
Follow me on Twitter for updates.}

Contents

• JavaScript
  • Caching / Doing less work
  • Data Structures
  • Unsorted
  • Blog Posts with Code 📖
    • Algorithmic
  • Perf Audits 📝
• CSS & Rendering
  • Blog Posts with Code 📖
    • Animations 💫
• HTML & Core Web Vitals
• TypeScript
• VSCode

JavaScript

Patches focused on JavaScript performance improvements. Guides:

• nodejs-bench-operations might be a good starting point to get an idea of what's fast.
• MythBusters JS - A JavaScript Handbook exploring performance & readability.
• v8-perf - Notes and resources related to v8 and thus Node.js performance.
• Optimizing Javascript for fun and for profit📖 - Excellent post about micro-performance in JavaScript.
• V8's strings: implementation and optimizations📖 - Sliced strings, how to reduce memory consumption of strings.
• V8. Working with Strings. Expanding Vocabulary📖 - All of the V8 string types explained.

Caching / Doing less work

• pnpm - cache results | blog post📖
• Speeding up the JavaScript ecosystem by Marvin Hagemeister📖 | ⭐
  • postcss-plugins - avoid expensive RegExps
  • svgo - avoid casting
  • svgo - avoid double RegExps calls
  • and other topics, such as avoiding inline functions in functions, downtranspilation
• esquery - replace String.prototype.split, avoid downtranspilation of for..of, hoist constants. | blog post📖
• joypixels/emoji-toolkit - cache expensive RegExps result | blog post📖
• lucagez/slow-json-stringify - hoist RegExpses & functions, replace Array.prototype.map with for loops, use ?. instead of ||{}
• jshttp/cookie - cache length of string in while loop
• recharts - avoid expensive DOM calculations by using an early-exit math calculation | blog post📖
• microsoft/node-jsonc-parser - cache frequently used characters in conditions to save memory and make runtime faster
• ckeditor (PR#2) - caches & binary search | blog post📖
• TanStack/start - skip React/Vue hooks on the server that aren't reactive during SSR (PR #2)

Data Structures

• fabian-hiller/valibot - convert Set to Array
• pnpm - convert objects to Set and Map
• preact/signals - convert Set to Linked Lists, adds lazy value evaluation
• TanStack/table - replace immutable spread calls with mutable arrays | blog post
• rollup - replace Set with BigInt | Mastodon explainer
• parcel-bundler/parcel - convert graph to array of BitSets, avoid new calls, Uint32Array + Wasm instead of BigInt, array instead of hash map to avoid hashing cost, fast path stack-based depth-first search to avoid recursion | Twitter explainer
• parcel-bundler/parcel - AdjacencyList tuning
• xpl/ansicolor - avoid delete, optimize for v8 hidden classes, use JS generators to allow more frequent GC collection
• Fast JavaScript with Data-oriented Design📖 - converts Map to typed arrays, uses "parallel arrays" for more efficient CPU cache usage | Video
• A 400% faster Performance panel through perf-ception📖 - replace Set with array to reduce memory consumption if uniqueness is guaranteed, discusses downsides of Map for frequent and large data sets, because of rehashing | ⭐
• kikobeats/superlock - switches a large array to a linked list to make shift an O(1) operation
• microsoft/typescript - makes objects monomorphic by splitting them into 2 objects: one with common properties, one with the rest
• tldraw - encode x,y,z coordinates as 6 bytes (3 Float16 values) = 8 base64 characters to save storage | Twitter Thread
• TanStack/router - avoid delete (PR #2)
• rocicorp/mono - replace polymorphic object with monomorphic tuple array

Unsorted

• node-semver - Bit flags instead of string manipulation
• node-semver - Object#freeze for lower memory consumption at around equal perf
• typescript - var is faster than let/const in the specific use case of TypeScript
• three.js - prevent memory leak from sliced strings
• graphql-js - for..of downtranspilation & destructuring optimization
• preact/signals - convert ES6 classes to ES5 classes for higher performance
• fabianhiller/valibot - lazy evaluation, "is object" check via var?.constructor !== Object, array tuples to flat array
• nodejs/node - replace N boolean props with one bitmap
• fabianhiller/valibot - avoid (negative) look-aheads for faster regexp execution
• ai/nanoid - re-ordered alphabet for smaller brotli compression
• astro - AsyncIterable instead of a ReadableStream
• TanStack/query - avoid too frequent setTimeout & cancelTimeout -> setTimeout appears more expensive than it truly is in DevTools, see this
• react - maintain the same object key across the code to avoid causing de-opts
• typescript (PR #2) - ensure objects have a consistent set of properties with a consistent initialization order ("monomorphism"), related to hidden classes. See also Monomorphic AST Nodes
• microsoft/vscode-js-debug - faster stream splitting
• fastify - indexOf -> slice to reduce worst-case runtime duration
• vitejs/vite - caches repeated import() calls (see also, tweet)
• nodejs/undici - converts object argument to plain arguments (see also DevTools & Preact hotpath, Fastify, Hermes)
• unjs/unhead - reduces Promise use, optimizes arrays to Set, replaces string.split with string.indexOf() + string.substring() and more
• vuejs/core - improve SSR perf by avoiding Promise creation
• astro - improve SSR perf by avoiding Promise creation
• astro - avoid spread
• ariakit - React: avoid too frequent calls to useSyncExternalStore (blog)
• ariakit - Avoid high amount of calls to addEventListener
• mrousavy/nitro - Replace path.join with str.join
• typescript - Avoid "pass-through" function expressions (const foo = (str) => bar(str) -> const foo = bar)
• remix-run/react-router - Avoid writing to new URL().searchParams, use new URLSearchParams() instead.
• immerjs/immer - At >1020 props (in v8), {…base} is faster than Object.keys()
• astro - calling TextEncode#encode N times with small strings is slower than 1x with a large string
• TanStack/router - new URL can be expensive; use simple checks to prevent obj alloc (PR #2, PR #3)
• Tweet - os.cpus().length is slow, prefer os.availableParallelism()
• open-telemetry/opentelemetry-js - prefer plain for..in and pre-allocated arrays (new Array(len)) over Object.entries (PR #2)
• rocicorp/mono - replace Iterators with manual implementation (for loop under the hood)
• ai/nanoid - faster string generation via Buffer#toString instead of str += char explainer
• react - Error.stackTraceLimit = 10 to make throwing Error cheaper/faster to run
• cometkim/unicode-segmenter - micro-optimization for the various v8 compilers (turbofan, meglev)

Blog Posts with Code 📖

• Adventures in the land of substrings and RegExps - replaces regex with manual parsing, lazy getter to avoid string allocation
• Don’t attach tooltips to document.body
• Bluebird - minimize function object allocation, use bit flags
• Maybe you don't need Rust and WASM to speed up your JS - post covering insights into various JavaScript engines and low level optimizations | ⭐
• Confluence Whiteboards - DOM event delegation, Finite State Machines, Entity Component System, WebGL optimization | ⭐
• That time I 10x'd a TI-84 emulator's speed by replacing a switch-case - avoid really big switch..case statements, replace by manual instruction tables (using arrays)
• Understanding why our build got 15x slower with Webpack 5 - avoid Symbol.isConcatSpreadable
• A Tale of a JavaScript Memory Leak - when working with global RegExp's (/g) and very large strings, make sure to check for memory leaks in V8/Chromium (possibly also includes other string functions like substring, slice, trim due to v8/2869
• High-performance input handling on the web - avoid layout trashing by splitting requestAnimationFrame into one for DOM reads and one for DOM writes
• [Typia] Hidden Class Optimization of v8 Engine | ⭐
• npm scripts - see also Reducing overhead of npm run - load modules lazily (caution: switching to Intl.Collator might nowadays be slower.)
• How to optimize Date format operations - prefer Intl.DateTimeFormat over Date.toLocaleDateString
• My Node.js is a bit Rusty - replaces a JS based file parser with a Rust napi implementation for faster execution speed and less memory usage
• Dragging React performance forward & Introducing Pragmatic drag and drop 🎥
• Template engine with streaming capability - avoid creating too many promises, avoid creating too many ReadableStream's
• The story of a V8 performance cliff in React - initialize Doubles via Number.NaN instead of 0 or null, initialize numeric fields with 0 instead of null
• Sneaky React Memory Leaks II: Closures Vs. React Query - avoid memory leaks in React by using custom hooks
• Promise chaining memory leak - avoid creating too long promise chains; as those cannot be garbage collected
• Canvas optimization & guide to chrome performance devtools tab
• Why is spawning a new process in Node so slow? - various methods to improve the performance of spawning subprocesses / threads on Deno/Node/Bun
• Lazy Fields for 30x speedup without Decorators or Transforms - Object.create(Foo.prototype) over new Foo() plus getters to reduce initialization overhead
• The fastest JS color library - Fast hex parsing, lookup arrays to avoid repeated string allocs, avoid >>> 0 | ⭐
• 5x SSR Throughput: Profiling SSR Hot Paths in TanStack Start - how to profile, multiple perf PRs & explanations | ⭐
• Making React Testing Library Tests 43% Faster
• TanStack Virtual just got a lot faster, and finally handles iOS - various things, e.g. Float64Array
• How we accidentally made route matching more performant by aiming for correctness - Bitmasks, Uint16Array
• Optimizing objects with null prototypes - prefer Object.setPrototypeOf({ ... }, null) or classes with a null prototype over Object.create(null)

Algorithmic 📖

• High Performance Text Parsing Using Finite State Machines - replace RegExps with Finite State Machines
• How to Compare Arrays in JavaScript Efficiently - use Frequency Counter Objects to reduce the Big O complexity from O(n²) to O(n)

Perf Audits 📝

• Web performance case study: Wikipedia page previews - avoid layout trashing
• npm install is slower with a progress bar - the curious case where a progress bar made npm i significantly slower, due to expensive CLI/draw calls - solved by throttling
• CNet, Times, Wikipedia, Google Play perf audits - 2015
• NYTimes perf audit - 2017
• Notion perf audit - defer JS, Babel tweaks, code splitting, caching and more
• Walmart perf audit - remove old polyfills, CSS & font tweaks
• Causal perf audit - React performance tweaks
• Uber Eats - avoid too many frequent calls to DOMParser

CSS & Rendering

Patches focused on CSS performance improvements.

• nuka-carousel - removes huge layers by fixing negative z-index
• mui/mui-x - collection of MUI improvements:
  • recalculate style - avoiding updating CSS variables on parents for shorter "recalculate style" tasks
  • layerize - make "layerize" tasks shorter by avoiding creating many layers
  • scroll direction - emphasize scroll direction for optimistic updates
• nolanlawson/emoji-picker-element (#2) - Improving rendering performance with CSS content-visibility📖
• anomalyco/opencode - replace CSS opacity animations with APNG to reduce CPU usage

Blog Posts with Code 📖

• FLIP Your Animations - Must read article for understanding CSS animation performance. | ⭐
• Selector performance - guidelines for performant CSS selectors
• Need cheap paint? Use getComputedStyle().opacity - replace double requestAnimationFrame callbacks for higher perf
• Style performance and concurrent rendering - analyzes frequent style inserts with React concurrent rendering
• Style scoping versus shadow DOM: which is fastest? - shadow DOM styles are slightly faster than class-prefixes
• CSS runtime performance🎥 - summary presentation of the 2 links above
• Benchmarking the performance of CSS @property - registering @property's has a cost, but once done is faster than regular props
• View Transitions Applied: More performant ::view-transition-group(*) animations - Optimize View Transition performance by calculating animation delta's upfront
• On Rendering diffs - master class on very fast virtualization, including a novel "Inverse Sticky Technique" | ⭐
• border-radius can cost you 45 MB of GPU - use an equal border-radius for less GPU usage

Animations 💫

• Animation performance - guidelines for performant CSS/JS animations
• Animating a blur - animating blur's the performant way
• CSS Box Shadows and Optimize Performance - animating box shadows the performant way
• Text shimmer animations - use translate and mask instead of background-position to render text shimmers

HTML & Core Web Vitals 📈

Patches focused on HTML & Core Web Vitals performance improvements.

• sentry - replaces React's autofocus implementation with manual focus in the next task for improved INP
• radix-ui/primitives - sets CSS inline style on <body> after giving the browser a chance to paint for improved INP
• nkzw-tech/athena-crisis - moves rendering of 1000 images from <img> to canvas to drastically reduce memory footprint

Guides:

• SVG icon stress test📖 - benchmarks the best way to embed <svg>s
• Avoid an excessive DOM size📖
• Redirect Liquidation📖 - remove redirects using the Edge
• Fastest Way of Passing State to JavaScript, Re-visited📖 - use JSON.parse and fake script tags for passing states from server to client
• Techniques for bypassing CORS Preflight Requests to improve performance📖 - optimize CORS requests by avoiding OPTIONS requests
• Use text-wrap: balance; to improve design and INP📖 - replace JS based text balancers with the CSS prop
• INP on HTTPArchive📖 - defer offscreen components to improve early-load INP
• How PubTech reduced INP by up to 64%📖 - "lazy de-rendering", by setting display:none first and then remove DOM nodes using requestIdleCallback; yield functions for high and background priority
• Optiming INP: Deep Dive 🎥 - yield to main thread, avoid layout trashing, avoid expensive polyfills and css props
• Speed up your Playwright tests📖
• Speed Up Your Playwright Scripts with Request Interception📖 - intercept and cancel requests unrelated to your tests
• Better Code Rendering Through Virtualization📖 - virtualization with a textarea for Ctrl+F, disabling Pointer Events for Smoother Scrolling
• How Preply improved INP on a Next.js application (without React Server Components and App Router)📖

TypeScript

Patches focused on TypeScript runtime performance improvements (e.g. running tsc). The TS team also has a dedicated wiki page. Attest can help you benchmark.

• sentry - avoid large unions in favor of interfaces
• tRPC - avoid disabling the lazy evaluation of TypeScript types
• TanStack/router

Guides 📖:

• An approach to optimizing TypeScript type checking performance
• TypeScript Performance in TanStack Table V9 - How to benchmark types; use interfaces over conditional-intersection aliases; annotate invariant type parameters with in out where possible; and more

VSCode

• Speeding up VSCode extensions in 2022📖

Contribute

Contributions welcome! Read the contribution guidelines first.