js-framework-benchmark results for Chrome 130.0.6723.58

A description of the benchmark and the source code and can be found in the github repository.

The benchmark was run on a MacBook Air 13 (16 GB RAM, 8 Cores, OSX 15.1), Chrome 130.0.6723.58(arm64) 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.

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...		oku-ui-v0.7.5radix-vue-v1.9.10reka-ui-v1.0.0-alpha.5
Implementation notes
Implementation linkcodecodecode
creating 10 rows. (5 warmup runs).
210.811.3
(1.00)		376.66.4
(1.79)		389.35.0
(1.85)
updating all 10 rows. (5 warmup runs).
195.80.9
(1.00)		380.13.7
(1.94)		391.03.8
(2.00)
updating every 2th row for 10 row. (3 warmup runs). 4 x CPU slowdown.
3.91.9
(1.00)		3.91.3
(1.00)		3.91.6
(1.00)
highlighting a selected row. (5 warmup runs). 4 x CPU slowdown.
4.41.0
(1.52)		2.91.3
(1.00)		4.50.7
(1.55)
swap 2 rows for table with 10 rows. (5 warmup runs). 4 x CPU slowdown.
26.415.8
(1.00)		44.41.2
(1.68)		44.40.7
(1.68)
removing one row. (5 warmup runs). 2 x CPU slowdown.
5.71.3
(1.43)		4.01.5
(1.00)		10.21.6
(2.55)
creating 20 rows. (5 warmup runs).
762.87.9
(1.00)		1,224.16.5
(1.60)		1,252.55.1
(1.64)
appending 10 to a table of 10 rows. (5 warmup runs).
370.21.6
(1.00)		606.74.3
(1.64)		617.92.7
(1.67)
clearing a table with 10 rows. (5 warmup runs). 4 x CPU slowdown.
18.50.3
(1.00)		35.40.7
(1.91)		35.30.3
(1.91)
of all factors in the table1.071.481.72
compare: Green means significantly faster, red significantly slower

Memory allocation in MBs ± 95% confidence interval

oku-ui-v0.7.5radix-vue-v1.9.10reka-ui-v1.0.0-alpha.5
Memory usage after page load.
1.1
(1.00)		1.2
(1.09)		1.2
(1.09)
Memory usage after adding 10 rows.
9.2
(1.00)		18.0
(1.96)		18.5
(2.01)
Memory usage after clicking update every 2th row 5 times
9.2
(1.00)		18.0
(1.96)		18.5
(2.01)
Memory usage after creating and clearing 10 rows 5 times
4.3
(1.00)		17.4
(4.05)		17.9
(4.16)
Memory usage after adding 20 rows.
15.7
(1.00)		32.8
(2.09)		33.8
(2.15)
of all factors in the table1.002.042.09

Transferred size (in kBs) and first paint

oku-ui-v0.7.5radix-vue-v1.9.10reka-ui-v1.0.0-alpha.5
uncompressed size of all implementation files (excluding /css and http headers)
140.2
(1.00)		156.7
(1.12)		158.1
(1.13)
brotli compressed size of all implementation files (excluding /css and http headers)
43.5
(1.00)		47.2
(1.09)		47.6
(1.09)
first paint
246.1
(1.00)		278.4
(1.13)		268.0
(1.09)
of all factors in the table1.001.111.10

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 uses runtime code generation
  • 1261 [Note]: Manual caching of (v)dom nodes