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 : 23/08/2019 - 23:55:05


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
39
806
783
598
975
Atomico
1.5.2
250 
4.3
38
787
437
8
14
Hybrids
4.0.2
1288 
7.9
51
959
491
92
104
HyperHTMLElement
3.10.0
141 
12.8
42
982
348
211
76
LitElement
2.2.1
2169 
10.3
48
973
367
211
148
Omi
6.9.0
8900 
11.9
35
1114
532
370
180
Riot
4.4.0
13682 
9.7
49
960
351
133
96
SkateJS & lit-html
0.0.1
2991 
11.3
57
1428
409
8
17
SkateJS & Preact
0.0.1
2991 
16.1
49
1443
379
8
17
Slim.js
4.0.7
643 
5.4
35
980
393
224
54
Solid
0.5.1
533 
7.8
51
943
370
200
125
Stencil
1.3.0
5608 
NaN
27
990
335
88
119
Svelte
3.9.1
17839 
6.5
45
965
354
111
19

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
168
3388
476
296
280
Angular Elements Ivy
~8.2.3
48702 
NaN
Vue.js
2.6.10
140129 
40.2
79
1316
475
29
108
Dojo
5.0.4
150 
NaN
66
1674
458
301
192

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
310
1372
Atomico
1.5.2
250 
3.4
284
1260
Hybrids
4.0.2
1288 
6.6
26
2491
HyperHTMLElement
3.10.0
141 
11.5
17
3834
LitElement
2.2.1
2169 
8.1
897
2686
Omi
6.9.0
8900 
10.5
145
3046
Riot
4.4.0
13682 
8.7
1375
2844
SkateJS & lit-html
0.0.1
2991 
9.4
791
2933
SkateJS & Preact
0.0.1
2991 
8.6
450
2295
Slim.js
4.0.7
643 
4.2
30
5959
Solid
0.5.1
533 
5.9
438
2024
Svelte
3.9.1
17839 
2.8
394
1652

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
684
3704
Angular Elements Ivy
~8.2.3
48702 
20.4
148
1953
Vue.js
2.6.10
140129 
37.5
1911
4447
Dojo
5.0.4
150 
15.6
4628
8280

Web Components Benchmark by Vincent Ogloblinsky. Licensed under MIT.

Page 1 Created with Sketch.