• Stars
    star
    245
  • Rank 165,304 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 8 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Client/server benchmarks for various UI libraries

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.

More Repositories

1

marko

A declarative, HTML-based language that makes building web apps fun
JavaScript
13,178
star
2

htmljs-parser

An HTML parser recognizes content and string placeholders and allows JavaScript expressions as attribute values
TypeScript
137
star
3

templating-benchmarks

Benchmarking framework for multiple templating engines
HTML
135
star
4

run

The Marko application framework
TypeScript
131
star
5

writable-dom

Utility to stream HTML content into a live document.
TypeScript
100
star
6

cli

command-line tools for Marko
JavaScript
94
star
7

examples

54
star
8

vite

A Marko plugin for Vite
TypeScript
53
star
9

micro-frame

A Marko tag for building SSR friendly micro frontends.
HTML
50
star
10

language-server

Marko autocomplete, intellisense and editor support.
TypeScript
38
star
11

website

The markojs.com website
Marko
36
star
12

atom-language-marko

Syntax highlighting in Atom for the Marko templating language
JavaScript
33
star
13

testing-library

Simple and complete Marko testing utilities that encourage good testing practices.
TypeScript
33
star
14

tags

Not quite core components.
JavaScript
22
star
15

tags-api-preview

Preview the Marko 6 "Tags API" in Marko 5!
TypeScript
22
star
16

marko-tmbundle

TextMate bundle for the Marko templating language
Marko
20
star
17

x

experiments. do not use.
TypeScript
19
star
18

rollup

A Marko plugin for Rollup.
TypeScript
16
star
19

markojs.com-legacy

Source code for markojs.com
JavaScript
14
star
20

prettier

A prettier plugin for parsing and printing Marko files.
Marko
13
star
21

webpack

A loader for marko files and a plugin for universal bundling
JavaScript
13
star
22

fastify

Render Marko templates in a Fastify application.
TypeScript
10
star
23

ssr-to-html

Crawl a server rendered application and output html files.
TypeScript
9
star
24

express

Render Marko templates in an express application.
TypeScript
9
star
25

jest

A preprocessor and preset to use Marko with Jest
TypeScript
8
star
26

urql

An isomorphic URQL GraphQL client for Marko
TypeScript
7
star
27

tutorial-blog

Blog site tutorial to demonstrate basic concepts in Marko
Marko
6
star
28

community

Meetings, proposals & other community related discussions
5
star
29

fixture-snapshots

A tool for loading fixtures and creating snapshot tests
TypeScript
5
star
30

marko-migrate

Tool for migrating a project using marko v2 to marko v3
JavaScript
5
star
31

branding

Logos and other graphics for Marko
4
star
32

utils

A set of utilities used by the Marko ecosystem. 🛠
JavaScript
4
star
33

marko-js.github.io

Statically generated files for markojs.com
HTML
4
star
34

screencasts

Project source code associated with Marko screencasts
JavaScript
3
star
35

relative-import-path

Like path.relative for generating short require'able paths.
TypeScript
1
star
36

compat

Marko compat taglibs
JavaScript
1
star
37

markojs-website-v3

Marko v3 website (legacy)
JavaScript
1
star
38

migrate-v3-widget

Migrates a Marko v3 widget to a v4 component.
TypeScript
1
star
39

marko.run

Marko Run website
Marko
1
star