Warning: These results are preliminary - use with caution (they may e.g. be from different browser versions). Official results are published on the results page.

The benchmark was run on benchmark-test (Intel Xeon E3-1231 v3 @ 3.40GHz, 4C/8T, 31 GiB RAM, Ubuntu Linux 6.8 x86_64), Chrome 147.0.7727.55(x86_64) using the puppeteer benchmark driver with reduced tracing.

After chrome 119 official results we've changed a detail for the benchmark: We now open a new tab for each benchmark iteration, earlier runs reused the tab per benchmark and implementation.

Starting with chrome 118 the benchmark uses a weighted geometric mean to compute the overall result.

Starting with chrome 137 we're benchmarking the non-keyed implementations only for even chrome versions.

Copy/paste current selection
median results
total duration

Keyed results

Keyed implementations create an association between the domain data and a dom element by assigning a 'key'. If data changes the dom element with that key will be updated. In consequence inserting or deleting an element in the data array causes a corresponding change to the dom.

Duration in milliseconds ± 95% confidence interval (Slowdown = Duration / Fastest)


Duration for...		vanillajsgea-v1.3.0svelte-v5.42.1solid-v1.9.12vue-v3.6.0-alpha.2react-hooks-v19.2.0
Implementation notes772
Implementation linkcodecodecodecodecodecode
LanguageJavaScriptJavaScriptJavaScript
creating 1,000 rows. (5 warmup runs).
97.40.9
(1.00)		99.11.0
(1.02)		103.91.6
(1.07)		101.81.1
(1.05)		118.01.2
(1.21)		121.61.6
(1.25)
updating all 1,000 rows. (5 warmup runs).
105.20.9
(1.00)		106.30.8
(1.01)		118.31.3
(1.12)		112.00.9
(1.06)		127.81.6
(1.21)		138.32.2
(1.31)
updating every 10th row for 1,000 row. (3 warmup runs). 4 x CPU slowdown.
48.61.0
(1.00)		52.11.3
(1.07)		53.31.3
(1.10)		53.91.2
(1.11)		58.21.0
(1.20)		63.41.6
(1.30)
highlighting a selected row. (5 warmup runs). 4 x CPU slowdown.
9.70.3
(1.02)		9.50.2
(1.00)		17.90.6
(1.88)		12.90.4
(1.36)		13.80.3
(1.45)		17.40.5
(1.83)
swap 2 rows for table with 1,000 rows. (5 warmup runs). 4 x CPU slowdown.
52.81.2
(1.00)		55.11.1
(1.04)		57.71.1
(1.09)		58.91.5
(1.12)		58.21.3
(1.10)		437.64.3
(8.29)
removing one row. (5 warmup runs). 2 x CPU slowdown.
44.70.9
(1.00)		46.10.9
(1.03)		46.60.9
(1.04)		47.90.9
(1.07)		55.20.7
(1.23)		50.80.8
(1.14)
creating 10,000 rows. (5 warmup runs).
980.714.6
(1.00)		989.87.2
(1.01)		1,007.54.3
(1.03)		997.66.4
(1.02)		1,131.76.8
(1.15)		1,361.96.9
(1.39)
appending 1,000 to a table of 1,000 rows. (5 warmup runs).
117.02.0
(1.00)		118.41.5
(1.01)		118.51.5
(1.01)		123.01.8
(1.05)		131.21.4
(1.12)		134.51.3
(1.15)
clearing a table with 1,000 rows. (5 warmup runs). 4 x CPU slowdown.
32.10.8
(1.02)		31.60.5
(1.00)		37.40.9
(1.18)		44.31.2
(1.40)		46.21.4
(1.46)		65.21.0
(2.06)
of all factors in the table1.001.021.101.101.221.43
compare: Green means significantly faster, red significantly slower

Memory allocation in MBs ± 95% confidence interval

vanillajsgea-v1.3.0svelte-v5.42.1solid-v1.9.12vue-v3.6.0-alpha.2react-hooks-v19.2.0
Memory usage after page load.
0.57
(1.04)		0.55
(1.00)		0.68
(1.24)		0.57
(1.04)		0.88
(1.60)		1.17
(2.13)
Memory usage after adding 1,000 rows.
1.83
(1.00)		2.05
(1.12)		2.87
(1.57)		2.64
(1.44)		3.76
(2.05)		4.36
(2.38)
Memory usage after creating and clearing 1000 rows 5 times
0.63
(1.00)		0.72
(1.14)		1.01
(1.60)		0.74
(1.17)		1.20
(1.90)		1.93
(3.06)
of all factors in the table1.011.091.461.211.842.49

Transferred size (in kBs) and first paint

vanillajsgea-v1.3.0svelte-v5.42.1solid-v1.9.12vue-v3.6.0-alpha.2react-hooks-v19.2.0
uncompressed size of all implementation files (excluding /css and http headers)
11.3
(1.36)		8.3
(1.00)		34.3
(4.13)		11.5
(1.39)		63.7
(7.67)		190.3
(22.93)
brotli compressed size of all implementation files (excluding /css and http headers)
2.5
(1.00)		3.3
(1.32)		12.2
(4.88)		4.5
(1.80)		22.8
(9.12)		51.4
(20.56)
first paint
63.0
(1.12)		56.5
(1.00)		120.5
(2.13)		62.2
(1.10)		154.7
(2.74)		381.9
(6.76)
of all factors in the table1.151.103.501.405.7714.72

Known issues and notes

  • 634 [Issue]: The HTML structure for the implementation is not fully correct.
  • 772 [Note]: Implementation uses manual DOM manipulations
  • 796 [Note]: Implementation uses explicit requestAnimationFrame calls
  • 800 [Note]: View state on the model
  • 801 [Note]: Implementation uses manual event delegation
  • 1139 [Note]: Implementation doesn't pass strict CSP
  • 1261 [Note]: Manual caching of (v)dom nodes