๐โก 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 benchmarking.
Follow me on Twitter for updates.
Patches focused on JavaScript performance improvements.
- 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.
- 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 offor..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
withfor
loops, use?.
instead of||{}
- jshttp/cookie - cache
length
of string inwhile
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
- fabian-hiller/valibot - convert
Set
toArray
- pnpm - convert objects to
Set
andMap
- 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
withBigInt
| Mastodon explainer - parcel-bundler/parcel - convert graph to array of BitSets, avoid
new
calls,Uint32Array
+ Wasm instead ofBigInt
, array instead of hash map to avoid hashing cost, fast path stack-based depth-first search to avoid recursion | Twitter explainer - [parcel-bundler/parcel(parcel-bundler/parcel#9444) - 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 ofMap
for frequent and large data sets, because of rehashing | โญ
- node-semver - bit flags instead of string manipulation
- node-semver -
Object#freeze
for lower memory consumption at around equal perf - typescript -
var
is faster thanlet/const
in the specific use case of TypeScript - 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 aReadableStream
- 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 likesubstring
,slice
,trim
due to v8/2869 - High-performance input handling on the web - in-depth guide for how to avoid layout trashing while handling user inputs
- [Typia] Hidden Class Optimization of v8 Engine | โญ
- npm scripts - lazy module load, prefer
Intl.Collator
overString.prototype.localeCompare
- How to optimize Date format operations - prefer
Intl.DateTimeFormat
overDate.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 ๐ฅ
- 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ยฒ)
toO(n)
- 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
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
- 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
- Style scoping versus shadow DOM: which is fastest?
- CSS runtime performance
- 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
Patches focused on HTML & Web Vitals performance improvements.
- 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 - sentry - improve INP by replacing React's
autofocus
implementation with manual focus in the next task - 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's Consent Management Platform reduced INP on their customers' websites by up to 64%, while also improving ad viewability by up to 1.5% - "lazy de-rendering", by setting
display:none
first and then remove DOM nodes usingrequestIdleCallback
; yield functions for high and background priority
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
interface
s - tRPC - avoid disabling the lazy evaluation of TypeScript types
Contributions welcome! Read the contribution guidelines first.