krausest/js-framework-benchmark

★ 7,411JavaScriptAudience · developerComplexity · 3/5Setup · hard

Mindmap

mindmap
  root((JS Framework Benchmark))
    What it measures
      Row creation speed
      Row update speed
      Memory usage
    Frameworks covered
      React Vue Angular
      Svelte and 180 others
    How to run
      Pre-built binaries
      Local server
      Browser result table
    Concepts
      Keyed vs non-keyed
      DOM performance

mindmap root((JS Framework Benchmark)) What it measures Row creation speed Row update speed Memory usage Frameworks covered React Vue Angular Svelte and 180 others How to run Pre-built binaries Local server Browser result table Concepts Keyed vs non-keyed DOM performance

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Compare raw rendering speed of React, Vue, Svelte, and dozens of other frameworks before choosing one for a performance-sensitive project.

USE CASE 2

Use the published results website to quickly identify which frameworks have the lowest memory footprint.

USE CASE 3

Run the benchmark on your own hardware to validate published numbers against your specific machine.

Tech stack

JavaScriptNode.js

Getting it running

Difficulty · hard Time to first run · 1day+

Full benchmark run takes ~12 hours, installing all 180+ npm packages carries security risk, use pre-built binaries on a dedicated machine.

In plain English

This repository is a performance benchmark that measures and compares how fast a large number of JavaScript UI frameworks are at common tasks. The benchmark works by having each framework render a large table of randomized data, then timing how long it takes to perform operations like creating rows, updating rows, deleting rows, swapping rows, and clearing the entire table. Memory usage is also measured at several points. The results give developers a data-driven way to compare frameworks by performance rather than by reputation. As of the README, the repository contains 186 separate implementations, one for each framework or framework variant being tested. That list includes well-known frameworks such as React, Vue.js, Angular, Svelte, and many others including less common or experimental ones. The benchmark distinguishes between "keyed" and "non-keyed" modes, which refers to a technical difference in how frameworks track which piece of data corresponds to which element on the page. This distinction matters because non-keyed mode can be faster for some operations but may cause unexpected behavior in certain situations. Running the full benchmark takes around 12 hours. Pre-built binary packages are available for download so that users can skip compiling all 186 implementations themselves. The README walks through installation, starting a local server, running the benchmark, and viewing the results in a browser table. The README includes a security note: because the repository contains over 180 third-party npm packages, installing all of them on a personal machine carries risk. The author recommends using the pre-built binaries and running the benchmark on a dedicated machine. Official results are published on a companion website linked in the README. The full README is longer than what was shown.

Copy-paste prompts

Prompt 1

I want to compare React 18 versus Svelte 5 on the js-framework-benchmark. Which specific metrics should I focus on, and where do I find the published results?

Prompt 2

Explain the difference between keyed and non-keyed mode in the js-framework-benchmark and when that distinction matters for my app.

Prompt 3

I downloaded the pre-built js-framework-benchmark binary. Walk me through starting the local server and running the benchmark for just two frameworks to get a quick comparison.

Open on GitHub → Explain another repo

← krausest on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.