awesome-performance-patches

🚀⚡ Awesome list about performance related patches/PRs.
https://github.com/kurtextrem/awesome-performance-patches

Last synced: 16 days ago
JSON representation

HTML & Core Web Vitals 📈
- Blog Posts with Code 📖
  - Better Code Rendering Through Virtualization📖 - virtualization with a textarea for Ctrl+F, disabling Pointer Events for Smoother Scrolling
  - SVG icon stress test📖 - benchmarks the best way to embed `<svg>`s
  - Redirect Liquidation📖 - remove redirects using the Edge
  - sentry - replaces React's `autofocus` implementation with manual focus in the next task for improved INP
  - 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
  - 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
  - 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
  - Speed up your Playwright tests📖
  - Speed Up Your Playwright Scripts with Request Interception📖 - intercept and cancel requests unrelated to your tests
  - Optiming INP: Deep Dive 🎥 - yield to main thread, avoid layout trashing, avoid expensive polyfills and css props
  - How Preply improved INP on a Next.js application (without React Server Components and App Router)📖
  - INP on HTTPArchive📖 - defer offscreen components to improve early-load INP
  - Use text-wrap: balance; to improve design and INP📖 - replace JS based text balancers with the CSS prop
JavaScript
- Unsorted
  - fastify - `indexOf` -> `slice` to reduce worst-case runtime duration
  - vitejs/vite - caches repeated `import()` calls ([see also](https://github.com/nodejs/node/issues/52369#issuecomment-2071643229), [tweet](https://twitter.com/cyyynthia_/status/1782152295821492402))
  - 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
  - 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
  - ariakit - React: avoid too frequent calls to `useSyncExternalStore` ([blog](https://newsletter.ariakit.org/i/151844568/usesyncexternalstore))
  - typescript - ensure objects have a consistent set of properties with a consistent initialization order ("monomorphism"), related to [hidden classes](https://x.com/sebmarkbage/status/1774082541357592739)
  - TanStack/query - avoid too frequent `setTimeout` & `cancelTimeout`
  - three.js - prevent memory leak from sliced strings
  - microsoft/vscode-js-debug - faster stream splitting
  - unjs/unhead - reduces `Promise` use, optimizes arrays to `Set`, replaces `string.split` with `string.indexOf()` + `string.substring()` and more
  - astro - `AsyncIterable` instead of a `ReadableStream`
  - react - maintain the same object key across the code to avoid causing de-opts
  - vuejs/core - improve SSR perf by avoiding `Promise` creation
  - nodejs/undici - converts object argument to plain arguments (see also [DevTools & Preact hotpath](https://x.com/Jack_Franklin/status/1763824436799492340), Fastify, [Hermes](https://x.com/tmikov/status/1763790902458560658))
  - react - maintain the same object key across the code to avoid causing de-opts
  - microsoft/vscode-js-debug - faster stream splitting
  - astro - improve SSR perf by avoiding `Promise` creation
- - MythBusters JS - A JavaScript Handbook exploring performance & readability.
  - nodejs-bench-operations
  - v8-perf - Notes and resources related to v8 and thus Node.js performance.
  - V8. Working with Strings. Expanding Vocabulary📖 - All of the V8 string types explained.
  - V8's strings: implementation and optimizations📖 - Sliced strings, how to reduce memory consumption of strings.
  - Optimizing Javascript for fun and for profit📖 - Excellent post about micro-performance in JavaScript.
- Caching / Doing less work
  - Speeding up the JavaScript ecosystem by Marvin Hagemeister📖
  - postcss-plugins - avoid expensive RegExps
  - svgo - avoid casting
  - svgo - avoid double RegExps calls
  - esquery - replace `String.prototype.split`, avoid downtranspilation of `for..of`, hoist constants. | [blog post📖](https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-3/)
  - joypixels/emoji-toolkit - cache expensive RegExps result | [blog post📖](https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-5/)
  - 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📖](https://belchior.hashnode.dev/improving-recharts-performance-clp5w295y000b0ajq8hu6cnmm)
  - microsoft/node-jsonc-parser - cache frequently used characters in conditions to save memory and make runtime faster
  - pnpm - cache results | [blog post📖](https://jakebailey.dev/posts/pnpm-dt-2/)
  - ckeditor - caches & binary search | [blog post📖](https://ckeditor.com/blog/how-we-made-our-rich-text-editor-load-faster-part-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](https://jpcamara.com/2023/03/07/making-tanstack-table.html)
  - rollup - replace `Set` with `BigInt` | [Mastodon explainer](https://elk.zone/webperf.social/@[email protected]/109882130404793578)
  - 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](https://twitter.com/devongovett/status/1712169214872867288)
  - xpl/ansicolor - avoid `delete`, optimize for [v8 hidden classes](https://v8.dev/docs/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](https://fosdem.org/2024/schedule/event/fosdem-2024-2773-fast-javascript-with-data-oriented-design/)
  - kikobeats/superlock - switches a large array to a linked list to make `shift` an `O(1)` operation
  - 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 | ⭐
  - parcel-bundler/parcel - AdjacencyList tuning
  - microsoft/typescript - makes objects monomorphic by splitting them into 2 objects: one with common properties, one with the rest
- Blog Posts with Code 📖
  - Don’t attach tooltips to document.body
  - Bluebird - minimize function object allocation, use bit flags
  - 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](https://bugs.chromium.org/p/v8/issues/detail?id=2869)
  - [Typia
  - 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
  - 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)`
  - Why is spawning a new process in Node so slow? - various methods to improve the performance of spawning subprocesses / threads on Deno/Node/Bun
  - Promise chaining memory leak - avoid creating too long promise chains; as those cannot be garbage collected
  - Canvas optimization & guide to chrome performance devtools tab
  - 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](https://bugs.chromium.org/p/v8/issues/detail?id=2869)
  - npm scripts - lazy module load, prefer `Intl.Collator` over `String.prototype.localeCompare`
  - Adventures in the land of substrings and RegExps - replaces regex with manual parsing, lazy getter to avoid string allocation
  - Maybe you don't need Rust and WASM to speed up your JS - post covering insights into various JavaScript engines and low level optimizations | ⭐
  - Dragging React performance forward
  - Template engine with streaming capability - avoid creating too many promises, avoid creating too many `ReadableStream`'s
  - High-performance input handling on the web - avoid layout trashing by splitting `requestAnimationFrame` into one for DOM reads and one for DOM writes
  - The story of a V8 performance cliff in React - initialize `Double`s 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
- Perf Audits 📝
  - Web performance case study: Wikipedia page previews - avoid layout trashing
  - 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`
  - 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
CSS & Rendering
- Perf Audits 📝
  - 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 - picker-element/pull/450) - [Improving rendering performance with CSS content-visibility📖](https://nolanlawson.com/2024/09/18/improving-rendering-performance-with-css-content-visibility/)
  - mui/mui-x - collection of MUI improvements:
- Blog Posts with Code 📖
  - 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
  - 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
  - Benchmarking the performance of CSS `@property` - registering `@property`'s has a cost, but once done is faster than regular props
HTML
- Blog Posts with Code 📖
  - Avoid an excessive DOM size
  - Improving Redux state transfer performance with JSON.parse(), a quick case study - use `JSON.parse` for big inline objects
TypeScript
- Blog Posts with Code 📖
  - wiki page
  - sentry - avoid large unions in favor of `interface`s
  - tRPC - avoid disabling the lazy evaluation of TypeScript types
  - An approach to optimizing TypeScript type checking performance📖
  - TanStack/router
  - tRPC - avoid disabling the lazy evaluation of TypeScript types
HTML & Web Vitals 📈
- Blog Posts with Code 📖
  - INP on HTTPArchive📖 - defer offscreen components to improve early-load INP
HTML & Web Vitals
- Blog Posts with Code 📖
  - Use text-wrap: balance; to improve design and INP - replace JS based text balancers with the CSS prop
  - Use text-wrap: balance; to improve design and INP - replace JS based text balancers with the CSS prop
VSCode
- Blog Posts with Code 📖
  - Speeding up VSCode extensions in 2022📖

Programming Languages

JavaScript 2

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

awesome-performance-patches

HTML & Core Web Vitals 📈

Blog Posts with Code 📖

JavaScript

Unsorted

Caching / Doing less work

Data Structures

Blog Posts with Code 📖

Perf Audits 📝

CSS & Rendering

Perf Audits 📝

Blog Posts with Code 📖

HTML

Blog Posts with Code 📖

TypeScript

Blog Posts with Code 📖

HTML & Web Vitals 📈

Blog Posts with Code 📖

HTML & Web Vitals

Blog Posts with Code 📖

VSCode

Blog Posts with Code 📖