Skip to content
Client/server benchmarks for various UI libraries
JavaScript HTML Vue CSS
Branch: master
Clone or download

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
benchmark-client chore: upgrade/migrate Marko files Oct 21, 2019
benchmark-server chore: include init file from server benchmark run. Oct 22, 2019
benchmarks chore: remove uneccessary code from marko search result example Oct 22, 2019
scripts chore: integrate prettier and eslint Oct 21, 2019
static Updated benchmarks to support static publishing Mar 30, 2017
util chore: integrate prettier and eslint Oct 21, 2019
.babelrc chore: upgrade babel and other deps Oct 20, 2019
.eslintignore chore: integrate prettier and eslint Oct 21, 2019
.eslintrc.json chore: integrate prettier and eslint Oct 21, 2019
.gitignore use more idiomatic Vue ssr setup Sep 18, 2017
.huskyrc chore: integrate prettier and eslint Oct 21, 2019
.lintstagedrc chore: integrate prettier and eslint Oct 21, 2019
.prettierignore chore: integrate prettier and eslint Oct 21, 2019
LICENSE Add license - fixes #9 Feb 20, 2018
README.md chore: update readme with latest benchmark result Oct 21, 2019
benchmarks.js chore: integrate prettier and eslint Oct 21, 2019
eslintrc.json chore: integrate prettier and eslint Oct 21, 2019
index.marko chore: upgrade/migrate Marko files Oct 21, 2019
init.js chore: integrate prettier and eslint Oct 21, 2019
package-lock.json chore: integrate prettier and eslint Oct 21, 2019
package.json chore: integrate prettier and eslint Oct 21, 2019
server.js chore: integrate prettier and eslint Oct 21, 2019

README.md

isomorphic-ui-benchmarks

This repo includes multiple benchmarks for various UI libraries. Each benchmark is designed to measure rendering performance (on the server and in the browser) and the time that it takes to update the DOM (client-side only).

Current results

Search results

Search Results Benchmarks

Color picker

Color Picker Benchmarks


Below are the results of a run on October 21, 2019

Environment:

  • Node.js v10.16.1
  • MacBook Pro (13-inch, 2017)
  • Processor: 3.5 GHz Intel Core i7
  • Memory: 16 GB 2133 MHz LPDDR3
  • macOS Mojave: 10.14.6
  • Google Chrome Version 77.0.3865.120 (Official Build) (64-bit)

Server-side

Warming up...

Warmup complete.

Running "search-results"...

Running benchmark "marko"...

marko x 6,399 ops/sec ±2.71% (84 runs sampled)

Running benchmark "preact"...

preact x 746 ops/sec ±2.88% (81 runs sampled)

Running benchmark "react"...

react x 765 ops/sec ±5.02% (72 runs sampled)

Running benchmark "vue"...

vue x 2,657 ops/sec ±4.41% (60 runs sampled)

Running benchmark "inferno"...

inferno x 3,014 ops/sec ±1.78% (87 runs sampled)

Fastest is marko

--------------


Warming up...

Warmup complete.

Running "color-picker"...

Running benchmark "marko"...

marko x 24,540 ops/sec ±1.48% (86 runs sampled)

Running benchmark "preact"...

preact x 4,587 ops/sec ±1.81% (85 runs sampled)

Running benchmark "react"...

react x 4,300 ops/sec ±4.72% (72 runs sampled)

Running benchmark "vue"...

vue x 9,120 ops/sec ±5.56% (70 runs sampled)

Running benchmark "inferno"...

inferno x 21,453 ops/sec ±2.12% (84 runs sampled)

Fastest is marko

--------------


DONE!

~/marko-js/isomorphic-ui-benchmarks (master)>  node -v
v10.16.1

Client-side

Search results

Google Chrome

Warming up...
Warmup complete.
Running "search-results"...
Running benchmark "marko"...
marko x 175 ops/sec ±1.84% (53 runs sampled)
Running benchmark "preact"...
preact x 132 ops/sec ±1.66% (48 runs sampled)
Running benchmark "react"...
react x 210 ops/sec ±1.36% (53 runs sampled)
Running benchmark "vue"...
vue x 142 ops/sec ±1.31% (52 runs sampled)
Running benchmark "inferno"...
inferno x 239 ops/sec ±1.24% (55 runs sampled)
Fastest is inferno

Color picker

Google Chrome

Warming up...
Warmup complete.
Running "color-picker"...
Running benchmark "marko"...
marko x 6,008 ops/sec ±1.66% (34 runs sampled)
Running benchmark "preact"...
preact x 6,435 ops/sec ±0.96% (59 runs sampled)
Running benchmark "react"...
react x 7,358 ops/sec ±1.43% (58 runs sampled)
Running benchmark "vue"...
vue x 4,291 ops/sec ±1.96% (55 runs sampled)
Running benchmark "inferno"...
inferno x 17,078 ops/sec ±2.17% (60 runs sampled)
Fastest is inferno

Additional details

Included libraries

The following UI libraries are currently included:

Included benchmarks

This repo currently includes the following benchmarks

Search Results

This benchmark measures the time it takes to render pages of search results. Each page includes 100 search result items. Every iteration renders an entirely new set of search results. As a result of rendering new search results for every cycle, a significant number of DOM nodes must be updated.

Color Picker

This benchmark measures the time it takes to cycle through a selected color. The selected color index changes every cycle. When the selected color index changes two things happen:

  • The new selected color is highlighted
  • The old selected color is unhighlighted
  • The selected color is shown at the end

Compared to the search results benchmark, there are a relatively small number of changes to the DOM for every cycle.

Running the benchmarks

Install

git clone https://github.com/marko-js/isomorphic-ui-benchmarks.git
cd isomorphic-ui-benchmarks
npm install
npm run build # Build client-side JS bundles

Run server-side benchmarks

npm run benchmark

Run client-side benchmarks

Start

npm start

Open http://localhost:8080/ in your browser and choose a benchmark to run.

Contributions and Feedback

If you see any problems or have any suggestions please let us know. Every effort was made to be as fair and accurate as possible, but mistakes do happen. If you find a problem please open a Github issue to discuss.

You can’t perform that action at this time.