Web Components Benchmark

Benchmark Web Components technologies with various examples

What's this ?

The purpose of this project is to benchmark all available Web Components technologies with different implementations :

  • simple one with TodoMVC
  • extreme with Pascal Triangle
  • and soon real with RealWorld example implementation

Frequently Asked Questions

Which code is served for the benchmark ?

The demos do not use any Polyfill & are build to ES6/ES2015 code for benchmarks purpose. Please use Chrome, Safari or Firefox > v63.

Where did the benchmarks are running ?

The benchmark is running on Travis during a CI process, results are constant between two builds. Benchmarks are run by the Lighthouse library with fast 4g throttling set up (Network slow down with 4x CPU slower).

Where did the results came from ?

Page load and specific use-cases like creating 50 todos

The benchmark use the great Puppeteer Node.js library for manipulating a Chrome headless instance.
Puppeteer has some APIs for generating a RAW trace file which can be opened in Chrome DevTools or timeline viewer.

The data extracted from the RAW JSON is the "top down tree" total time in DevTools Performance tab of Chrome, which is an addition of scripting, rendering & painting time in the graph below.

Time to interactive

The benchmark use Lighthouse Node.js library under the hood. The Lighthouse configuration use the interactive audit where you can have "Time to interactive" number.

Why two different categories "Libraries or compilers" & "Classic frameworks exporting to Web Components" ?

The first one is for libraries or compilers that are "Web components" friendly first. The second one is for mainstream front-end frameworks which support "Web Components" and can also "export" their own "component" material to standard "Web Components".

When did the last build run ?

The last build run : 22/08/2019 - 21:56:39


Anchors to implementation's results

Todo List | Pascal triangle



Todo List


This benchmark consist of 4 scenarios : page load, create 50 todos, delete 50 todos, editing 50 todos. Lower numbers are better.


Libraries or compilers

Assets size Gzipped
(in Ko)
Page load
(in ms)
Time to interactive
(in ms)
Create 50 todos
(in ms)
Delete 50 todos
(in ms)
Edit 50 todos
(in ms)
Native
 
2.2
44
807
855
649
1059
Atomico
1.5.2
250 
4.3
40
786
484
8
14
Hybrids
4.0.2
1288 
7.9
55
954
539
108
112
HyperHTMLElement
3.10.0
141 
12.8
42
999
403
235
92
LitElement
2.2.1
2169 
10.3
52
976
424
240
167
Omi
6.9.0
8900 
11.9
38
1118
608
406
225
Riot
4.4.0
13682 
9.7
51
964
399
144
117
SkateJS & lit-html
0.0.1
2991 
11.3
64
1442
495
8
18
SkateJS & Preact
0.0.1
2991 
16.1
55
1453
472
8
18
Slim.js
4.0.7
643 
5.4
36
977
470
246
59
Solid
0.5.1
533 
7.8
54
944
476
238
161
Stencil
1.3.0
5608 
NaN
29
992
396
105
145
Svelte
3.9.1
17839 
6.5
47
971
419
138
18

Classic frameworks exporting to Web Components

Assets size Gzipped
(in Ko)
Page load
(in ms)
Time to interactive
(in ms)
Create 50 todos
(in ms)
Delete 50 todos
(in ms)
Edit 50 todos
(in ms)
Angular Elements
8.2.3
48702 
133.7
188
3415
628
373
337
Angular Elements Ivy
~8.0.0
48702 
NaN
Vue.js
2.6.10
140129 
40.2
84
1324
603
33
144
Dojo
5.0.4
150 
NaN
74
1612
527
351
233

Pascal triangle


This benchmark display a Pascal Triangle. Lower numbers are better.


Libraries or compilers

Assets size Gzipped
(in Ko)
Page load
(in ms)
Time to interactive
(in ms)
Native
 
1
340
1355
Atomico
1.5.2
250 
3.4
307
1295
Hybrids
4.0.2
1288 
6.6
28
2525
HyperHTMLElement
3.10.0
141 
11.5
17
3791
LitElement
2.2.1
2169 
8.1
964
2800
Omi
6.9.0
8900 
10.5
172
3025
Riot
4.4.0
13682 
8.7
1484
2879
SkateJS & lit-html
0.0.1
2991 
9.4
856
3010
SkateJS & Preact
0.0.1
2991 
8.6
502
2303
Slim.js
4.0.7
643 
4.2
32
6342
Solid
0.5.1
533 
5.9
481
2017
Svelte
3.9.1
17839 
2.8
445
1648

Classic frameworks exporting to Web Components

Assets size Gzipped
(in Ko)
Page load
(in ms)
Time to interactive
(in ms)
Angular Elements
8.2.3
48702 
120.2
736
3739
Angular Elements Ivy
~8.0.0
48702 
20.4
164
1948
Vue.js
2.6.10
140129 
37.5
1982
4411
Dojo
5.0.4
150 
15.6
5031
8408

Web Components Benchmark by Vincent Ogloblinsky. Licensed under MIT.

Page 1 Created with Sketch.