A comparison of the perfomance of a few popular javascript frameworks
JavaScript HTML TypeScript Java Elm Scala Other
Permalink
Failed to load latest commit information.
angular-v1.5.8 Add knockout, fix angular 1.5.8 metric Oct 14, 2016
angular-v2.4.3-keyed update angular to v2.4.3 Jan 15, 2017
angular-v2.4.3-non-keyed update angular to v2.4.3 Jan 15, 2017
aurelia-v1.0.7 added rimraf as an explicit dependency Jan 14, 2017
binding.scala-v10.0.1 Upgrade sbt-bin (Fix #112) Jan 15, 2017
bobril-v4.49.2 update bobril to 4.49.2 Nov 19, 2016
css differentiation between non-keyed and keyed, revert transition in mai… Jan 14, 2017
cyclejs-dom-v14.1.0 update cyclejs to cycle/dom v14.10 Nov 19, 2016
dio-v3.0.5 updated dio to 3.0.5 Nov 19, 2016
domvm-v2.0.1-keyed update domvm to v2.0.1, add non-keyed impl, remove domvm-v1.2.10 impl Jan 14, 2017
domvm-v2.0.1-non-keyed update domvm to v2.0.1, add non-keyed impl, remove domvm-v1.2.10 impl Jan 14, 2017
elm-v0.18.0 updated title Nov 22, 2016
ember-v2.10.0-beta.2 adjusted package.json Nov 3, 2016
ember-v2.6.1 Refactor the Ember 2.6.1 app Nov 1, 2016
inferno-v1.2.0 updated inferno to 1.2 Jan 16, 2017
kivi-v1.0.0-rc2 updated kivi to 1.0.0-rc2 Nov 19, 2016
knockout-v3.4.1 updated knockout to 3.4.1 Nov 19, 2016
mithril-v0.2.5 locked npm version, removed old react and cycle, fixed aurelia depend… Sep 20, 2016
mithril-v1.0.0-alpha locked npm version, removed old react and cycle, fixed aurelia depend… Sep 20, 2016
nx-v1.0.0-alpha.4.0.0 small adjustment to layout Dec 1, 2016
plastiq-v1.33.0 locked npm version, removed old react and cycle, fixed aurelia depend… Sep 20, 2016
polymer-v1.7.0 adapted webdriver for shadow dom Oct 21, 2016
preact-v7.1.0 Update preact to 7.1 Jan 15, 2017
ractive-edge update to new ractive edge and use delegated event Dec 8, 2016
ractive-v0.8.5 updated ractive to 0.8.5 Nov 19, 2016
react-lite-v0.15.27 updated react-lite to 0.15.27 Nov 19, 2016
react-v15.4.0-mobX-v2.6.3 delete the repetitive babel-core and babel-loader for mobX Dec 7, 2016
react-v15.4.0-redux-v3.6.0 updated react to 15.4 for redux Nov 19, 2016
react-v15.4.0 delete the repetitive babel-core and babel-loader Dec 7, 2016
riot-v2.6.7 updated riot to 2.6.7 Nov 19, 2016
riot-v3.0.7 riot 3.0.5 to 3.0.7 Jan 10, 2017
simulacra-v1.5.5 Last row didn't update for replace all rows for simulacra Jan 15, 2017
svelte-v1.0.1 add svelte Dec 1, 2016
tsers-v1.0.0 locked npm version, removed old react and cycle, fixed aurelia depend… Sep 20, 2016
vanillajs-keyed make replace all rows replace all dom rows Jan 9, 2017
vanillajs locked npm version, removed old react and cycle, fixed aurelia depend… Sep 20, 2016
vidom-v0.5.3 updated vidom to 0.5.3 Nov 19, 2016
vue-v2.1.3 simplify Vue implementation and make the list keyed Dec 1, 2016
webdriver-java Merge branch 'master' of https://github.com/trueadm/js-framework-benc… Oct 21, 2016
webdriver-ts merged domvm update, updated results Jan 16, 2017
.gitignore updated angular 2 to 2.2.1 Nov 19, 2016
LICENSE add more test cases & framework versioning Apr 16, 2016
README.md Update README.md Jan 16, 2017
build.js cleanup Jul 13, 2016
cleanup.sh Added Elm example to cleanup script and to benchmark runner Oct 2, 2016
copy.js Allow for a second run to check results Sep 11, 2016
favicon.ico add more test cases & framework versioning Apr 16, 2016
index.html riot 3.0.5 to 3.0.7 Jan 10, 2017
install.js call npm install only in relevant directories Oct 25, 2016
package.json Use yarn if it's installed Oct 21, 2016

README.md

js-framework-benchmark

This is a simple benchmark for several javascript frameworks. The benchmarks creates a large table with randomized entries and measures the time for various operations.

This work is derived from a benchmark that Richard Ayotte published on https://gist.github.com/RichAyotte/a7b8780341d5e75beca7 and adds more framework and more operations. Thanks for the great work.

Thanks to Baptiste Augrain for making the benchmarks more sophisticated and adding frameworks.

Important News

Chrome 54 on OSX has a bug that causes webdriver to hang or crash on non english systems. Please run the following command prior to executing the webdriver-ts testdriver: export LANG="en_US.UTF-8"

Prerequsites

Have node.js (>=6.0) installed. If you want to do yourself a favour use nvm for that and install yarn. The benchmark has been tested with node 6.0. You will also need java (>=6, e.g. openjdk-8-jre on ubuntu) for the google closure compiler, currently used in kivi. Further maven is needed and the bin directory of maven must be added to the path. Please make sure that the following command work before trying to build:

> npm
npm -version
4.0.5
> node --version
v7.4.0
> echo %JAVA_HOME% / echo $JAVA_HOME
> java -version
java version "1.8.0_111" ...
> javac
javac 1.8.0_111
> mvn -version
Apache Maven 3.3.9 (...
> git --version
git version 2.11.0.windows.3

Building

  • To build the benchmarks for all frameworks:

npm install or yarn

npm run build

The latter calls npm build-prod in each subproject.

  • To build a single benchmark for a framework, e.g. aurelia

cd aurelia

npm install or yarn

npm run build-prod

Running in the browser

Execute npm start in the main directory to start a http-server for the web pages. Open http://localhost:8080 and choose the directory for the framework you want to test. Most actions will try to measure the duration and print it to the console. Depending on the framework this might be more or less precise. To measure the exact numbers one needs to use e.g. the timeline from the chrome dev tools.

About the benchmarks

  • create rows: Duration for creating 1000 rows after the page loaded.
  • replace all rows: Duration for updating all 1000 rows of the table (with 5 warmup iterations).
  • partial update: Time to update the text of every 10th row (with 5 warmup iterations).
  • select row: Duration to highlight a row in response to a click on the row. (with 5 warmup iterations).
  • swap rows: Time to swap 2 rows on a 1K table. (with 5 warmup iterations).
  • remove row: Duration to remove a row. (with 5 warmup iterations).
  • create many rows: Duration to create 10,000 rows
  • append rows to large table: Duration for adding 1000 rows on a table of 10,000 rows.
  • clear rows: Duration to clear the table filled with 10.000 rows.
  • clear rows a 2nd time: Time to clear the table filled with 10.000 rows. But warmed up with only one iteration.
  • ready memory: Memory usage after page load.
  • run memory: Memory usage after adding 1000 rows.

For all benchmarks the duration is measured including rendering time. You can read some details on this article. The results of this benchmark is outlined on by blog (round 1, round 2, round 3 and round 4).

Execute the benchmarks with webdriver

The former java test runner has been replaced with a typescript based test runner. The new test runner contains no timer based waits and is thus much faster.

npm start

which starts a web server

npm run selenium

which runs the seleniums tests

Open http://localhost:8080/webdriver-ts/table.html for the results

A test showing the durations on my machine (MacBook Pro 15, 2,5 GHz i7, 16 GB RAM) can be seen here

Single tests can be repeated easily. Just cd webdriver-ts and run the benchmarks and frameworks you want, e.g: npm run selenium -- --framework angular bob --benchmark 01_ 02_ runs the test for all frameworks that contain either angular or bob, which means all angular versions and bobril and all benchmarks whose id contain 01_ or 02_ which means the create rows and replace all rows benchmarks. After that you'll want to update the result table with npm run results

How to contribute

Contributions are very welcome. Please use the following rules:

  • Each contribution must be buildable by a "npm run build-prod" command in the directory. What build-prod does is up to you.
  • All npm dependencies should be installed locally (i.e. listed in your package.json). Http-server should not be a local dependency. npm start in the root directory start a web server that can be used for all contributions.
  • Please use fixed version number, no ranges, as it turned out to break often. Updating works IMO best with npm-check-updates, which keeps the version format.
  • Webdriver-ts must be able to run the perf tests for the contribution. This means that all buttons (like "Create 1,000 rows") must have the correct id e.g. like in vanillajs. Using shadow DOM is a real pain for webdriver. The closer you can get to polymer the higher the chances I can make that contribution work.