Results for js web frameworks benchmark – round 5

Go here for the accompanying article http://www.stefankrause.net/wp/?p=392. Source code can be found in the github repository.

The benchmark was run on a MacBook Pro 15 (2,5 GHz i7, 16 GB RAM, OSX 10.12.3, Chrome 55.0.2883.95 (64-bit))

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 (Slowdown = Duration / Fastest)

angular v1.6.1-keyedangular v2.4.3-keyedbobril v5.0.4domvm v2.0.1-keyedelm v0.18.0ember v2.10.0-beta.3ember v2.6.1kivi v1.0.0-rc2knockout v3.4.1mithril v0.2.5mithril v1.0.0-alphanx v1.0.0-beta.1.1.0-keyedplastiq v1.33.0preact v7.1.0ractive v0.8.9-keyedreact-lite v0.15.30react v15.4.2-keyedreact v15.4.2-mobX-v3.0.1react v15.4.2-redux-v3.6.0vidom v0.7.1vue v2.1.10-keyedvanillajs-keyed
create rows
Duration for creating 1000 rows after the page loaded.
254.725.59
(1.96)
178.123.25
(1.37)
142.903.32
(1.10)
138.611.78
(1.07)
164.668.15
(1.27)
309.0911.50
(2.38)
348.789.77
(2.69)
133.502.30
(1.03)
338.685.81
(2.61)
224.432.15
(1.73)
153.542.22
(1.18)
202.574.92
(1.56)
176.5511.79
(1.36)
171.795.04
(1.32)
320.992.39
(2.47)
166.417.13
(1.28)
184.291.53
(1.42)
235.868.55
(1.82)
208.076.56
(1.60)
145.613.95
(1.12)
151.972.52
(1.17)
129.802.95
(1.00)
replace all rows
Duration for updating all 1000 rows of the table (with 5 warmup iterations).
253.669.23
(1.80)
188.546.65
(1.34)
157.974.48
(1.12)
150.151.22
(1.07)
168.523.18
(1.20)
283.644.39
(2.01)
303.328.82
(2.15)
140.960.90
(1.00)
359.0016.78
(2.55)
238.861.25
(1.69)
163.232.86
(1.16)
1006.578.82
(7.14)
175.936.98
(1.25)
190.514.06
(1.35)
319.955.50
(2.27)
219.742.04
(1.56)
198.686.05
(1.41)
224.465.95
(1.59)
213.751.68
(1.52)
154.561.57
(1.10)
158.722.70
(1.13)
140.941.42
(1.00)
partial update
Time to update the text of every 10th row (with 5 warmup iterations).
10.700.30
(1.00)
9.860.30
(1.00)
11.220.39
(1.00)
15.070.63
(1.00)
22.051.42
(1.38)
14.910.38
(1.00)
39.041.22
(2.44)
9.330.14
(1.00)
9.640.22
(1.00)
51.392.04
(3.21)
18.920.48
(1.18)
11.040.28
(1.00)
15.961.74
(1.00)
12.720.41
(1.00)
15.560.60
(1.00)
27.620.28
(1.73)
15.440.75
(1.00)
14.450.77
(1.00)
17.101.07
(1.07)
11.290.50
(1.00)
15.620.25
(1.00)
9.620.69
(1.00)
select row
Duration to highlight a row in response to a click on the row. (with 5 warmup iterations).
6.123.09
(1.00)
3.891.81
(1.00)
4.722.46
(1.00)
7.940.76
(1.00)
15.071.16
(1.00)
5.940.65
(1.00)
9.390.83
(1.00)
3.601.51
(1.00)
9.530.65
(1.00)
36.511.42
(2.28)
11.390.44
(1.00)
6.380.11
(1.00)
5.062.24
(1.00)
5.142.16
(1.00)
7.030.36
(1.00)
20.090.54
(1.26)
6.861.63
(1.00)
4.510.70
(1.00)
7.581.88
(1.00)
4.941.69
(1.00)
8.370.62
(1.00)
2.190.83
(1.00)
swap rows
Time to swap 2 rows on a 1K table. (with 5 warmup iterations).
12.150.27
(1.00)
11.340.35
(1.00)
10.320.37
(1.00)
15.000.68
(1.00)
25.804.00
(1.61)
15.260.68
(1.00)
37.631.43
(2.35)
10.240.56
(1.00)
12.990.57
(1.00)
52.970.99
(3.31)
18.860.58
(1.18)
138.840.85
(8.68)
11.040.28
(1.00)
11.890.21
(1.00)
18.281.04
(1.14)
27.600.37
(1.73)
13.420.53
(1.00)
17.290.38
(1.08)
14.000.34
(1.00)
13.350.60
(1.00)
16.810.66
(1.05)
9.670.23
(1.00)
remove row
Duration to remove a row. (with 5 warmup iterations).
51.912.06
(1.12)
48.680.63
(1.05)
50.661.83
(1.09)
54.281.19
(1.17)
75.531.21
(1.62)
53.361.30
(1.15)
81.721.18
(1.76)
49.761.38
(1.07)
60.196.90
(1.29)
88.991.09
(1.91)
58.021.95
(1.25)
150.210.93
(3.23)
54.624.05
(1.17)
49.301.51
(1.06)
62.901.17
(1.35)
67.500.43
(1.45)
50.041.01
(1.08)
61.032.41
(1.31)
55.541.88
(1.19)
52.002.16
(1.12)
55.362.16
(1.19)
46.510.91
(1.00)
create many rows
Duration to create 10,000 rows
2208.7335.23
(1.75)
1832.1511.42
(1.45)
1425.6124.13
(1.13)
1413.0214.02
(1.12)
1599.9226.46
(1.27)
2496.8824.94
(1.98)
2918.1694.58
(2.31)
1327.8616.38
(1.05)
3369.83104.62
(2.67)
2775.2840.40
(2.20)
1641.4619.80
(1.30)
2147.0213.45
(1.70)
1745.3024.88
(1.38)
1854.1347.47
(1.47)
2960.7447.00
(2.35)
2257.7746.29
(1.79)
1824.0111.51
(1.45)
2131.2234.17
(1.69)
1886.4023.79
(1.50)
1422.6116.49
(1.13)
1551.0817.83
(1.23)
1260.6013.52
(1.00)
append rows to large table
Duration for adding 1000 rows on a table of 10,000 rows.
375.537.18
(1.53)
288.123.39
(1.17)
263.953.66
(1.07)
348.493.89
(1.42)
457.1416.91
(1.86)
457.755.18
(1.86)
653.2614.54
(2.66)
245.793.18
(1.00)
3782.6188.29
(15.39)
1312.4020.68
(5.34)
403.274.74
(1.64)
344.8512.76
(1.40)
319.216.55
(1.30)
316.132.38
(1.29)
472.7011.09
(1.92)
1890.4919.53
(7.69)
327.648.73
(1.33)
399.676.93
(1.63)
352.521.47
(1.43)
320.575.83
(1.30)
369.416.79
(1.50)
267.361.39
(1.09)
clear rows
Duration to clear the table filled with 10.000 rows.
772.276.19
(3.71)
342.398.86
(1.65)
216.503.86
(1.04)
228.693.03
(1.10)
221.224.12
(1.06)
251.292.22
(1.21)
549.7515.63
(2.64)
207.914.74
(1.00)
585.1321.97
(2.81)
296.662.76
(1.43)
237.723.90
(1.14)
269.366.72
(1.30)
244.325.32
(1.18)
341.625.36
(1.64)
663.9010.51
(3.19)
363.142.36
(1.75)
410.947.98
(1.98)
470.468.38
(2.26)
415.373.63
(2.00)
217.304.58
(1.05)
248.823.33
(1.20)
209.503.24
(1.01)
slowdown geometric mean1.501.211.061.101.341.432.141.022.152.361.222.151.171.221.711.861.261.431.331.091.151.01

Memory allocation in MBs

angular v1.6.1-keyedangular v2.4.3-keyedbobril v5.0.4domvm v2.0.1-keyedelm v0.18.0ember v2.10.0-beta.3ember v2.6.1kivi v1.0.0-rc2knockout v3.4.1mithril v0.2.5mithril v1.0.0-alphanx v1.0.0-beta.1.1.0-keyedplastiq v1.33.0preact v7.1.0ractive v0.8.9-keyedreact-lite v0.15.30react v15.4.2-keyedreact v15.4.2-mobX-v3.0.1react v15.4.2-redux-v3.6.0vidom v0.7.1vue v2.1.10-keyedvanillajs-keyed
ready memory
Memory usage after page load.
5.180.24
(1.71)
5.860.15
(1.93)
3.460.18
(1.14)
3.180.09
(1.05)
3.830.09
(1.26)
10.760.28
(3.54)
9.310.26
(3.07)
3.210.09
(1.06)
3.700.10
(1.22)
3.270.09
(1.08)
3.360.18
(1.11)
3.800.12
(1.25)
3.280.09
(1.08)
3.270.09
(1.08)
5.060.11
(1.67)
3.510.09
(1.16)
4.730.10
(1.56)
5.780.13
(1.91)
5.220.13
(1.72)
3.390.09
(1.12)
3.650.09
(1.20)
3.030.08
(1.00)
run memory
Memory usage after adding 1000 rows.
14.880.58
(2.79)
12.460.47
(2.34)
7.780.54
(1.46)
7.330.43
(1.38)
9.720.35
(1.82)
21.200.63
(3.98)
26.430.61
(4.96)
6.940.48
(1.30)
26.410.51
(4.96)
10.400.55
(1.95)
9.240.71
(1.73)
10.990.70
(2.06)
10.480.54
(1.97)
8.110.40
(1.52)
22.790.50
(4.28)
15.310.49
(2.87)
11.660.46
(2.19)
16.580.45
(3.11)
12.990.53
(2.44)
7.980.41
(1.50)
8.890.74
(1.67)
5.330.46
(1.00)

Non keyed results

Non keyed implementations are allowed to reuse existing dom elements. In consequence inserting or deleting an element in the data array might append after or delete the last table row and update the contents of all elements after the inserting or deletion index. This can perform better, but can cause problems if dom state is modified externally.

Duration in milliseconds (Slowdown = Duration / Fastest)

angular v2.4.3-non-keyedaurelia v1.0.7binding.scala v10.0.1cyclejs-dom v14.1.0dio v3.0.5domvm v2.0.1-non-keyedinferno v1.2.0nx v1.0.0-beta.1.1.0-non-keyedpolymer v1.7.0ractive-edgeractive v0.8.9-non-keyedreact v15.4.2-non-keyedriot v3.0.7simulacra v1.5.5svelte v1.0.1tsers v1.0.0vue v2.1.10-non-keyedvanillajs
create rows
Duration for creating 1000 rows after the page loaded.
179.203.15
(1.41)
178.812.07
(1.40)
304.767.10
(2.39)
150.714.74
(1.18)
136.050.91
(1.07)
140.943.88
(1.11)
142.901.96
(1.12)
208.678.56
(1.64)
199.501.61
(1.57)
297.775.74
(2.34)
321.123.69
(2.52)
181.982.66
(1.43)
303.045.28
(2.38)
292.136.67
(2.29)
136.931.42
(1.08)
255.523.89
(2.01)
152.921.49
(1.20)
127.362.52
(1.00)
replace all rows
Duration for updating all 1000 rows of the table (with 5 warmup iterations).
54.620.59
(1.01)
83.520.91
(1.54)
79.613.28
(1.47)
73.600.89
(1.36)
55.430.89
(1.03)
59.320.47
(1.10)
59.781.60
(1.11)
70.100.52
(1.30)
60.001.40
(1.11)
64.140.95
(1.19)
67.661.06
(1.25)
77.901.08
(1.44)
62.580.46
(1.16)
62.230.40
(1.15)
54.652.13
(1.01)
115.491.77
(2.14)
62.610.56
(1.16)
54.070.84
(1.00)
partial update
Time to update the text of every 10th row (with 5 warmup iterations).
10.400.70
(1.00)
9.970.45
(1.00)
11.070.61
(1.00)
25.080.52
(1.57)
11.640.85
(1.00)
14.870.50
(1.00)
10.630.35
(1.00)
10.720.37
(1.00)
12.330.53
(1.00)
10.790.59
(1.00)
14.440.52
(1.00)
15.611.07
(1.00)
16.390.13
(1.02)
9.720.17
(1.00)
10.260.46
(1.00)
33.820.69
(2.11)
15.510.56
(1.00)
9.590.62
(1.00)
select row
Duration to highlight a row in response to a click on the row. (with 5 warmup iterations).
8.657.02
(1.00)
11.870.45
(1.00)
3.110.43
(1.00)
17.110.25
(1.07)
4.541.02
(1.00)
6.400.41
(1.00)
5.970.62
(1.00)
7.200.78
(1.00)
4.160.37
(1.00)
7.200.79
(1.00)
8.882.65
(1.00)
4.970.25
(1.00)
9.150.45
(1.00)
3.921.00
(1.00)
4.381.71
(1.00)
24.660.70
(1.54)
7.660.18
(1.00)
3.492.00
(1.00)
swap rows
Time to swap 2 rows on a 1K table. (with 5 warmup iterations).
7.850.69
(1.00)
10.940.36
(1.00)
7.080.20
(1.00)
23.180.71
(1.45)
8.390.34
(1.00)
11.280.43
(1.00)
8.020.27
(1.00)
8.250.27
(1.00)
7.850.10
(1.00)
7.940.27
(1.00)
7.510.23
(1.00)
11.310.59
(1.00)
13.820.43
(1.00)
7.570.15
(1.00)
7.550.10
(1.00)
30.200.62
(1.89)
13.600.79
(1.00)
7.280.14
(1.00)
remove row
Duration to remove a row. (with 5 warmup iterations).
37.362.95
(1.09)
61.721.33
(1.79)
46.810.98
(1.36)
54.560.80
(1.59)
38.750.75
(1.13)
44.010.90
(1.28)
41.431.66
(1.20)
51.661.36
(1.50)
49.382.35
(1.44)
67.791.90
(1.97)
62.862.29
(1.83)
66.012.01
(1.92)
44.510.41
(1.29)
48.101.23
(1.40)
34.411.28
(1.00)
76.901.48
(2.24)
46.090.43
(1.34)
38.231.53
(1.11)
create many rows
Duration to create 10,000 rows
1857.487.96
(1.46)
1880.9234.50
(1.48)
2271.9818.13
(1.79)
1610.2521.52
(1.27)
1366.006.70
(1.07)
1453.7736.54
(1.14)
1373.967.52
(1.08)
2141.705.10
(1.68)
1941.8287.09
(1.53)
2737.6947.75
(2.15)
2933.2648.58
(2.31)
1805.8111.77
(1.42)
3365.7127.76
(2.65)
3250.8310.60
(2.56)
1418.787.76
(1.12)
2837.4032.85
(2.23)
1514.019.59
(1.19)
1271.619.44
(1.00)
append rows to large table
Duration for adding 1000 rows on a table of 10,000 rows.
292.795.92
(1.14)
299.999.60
(1.17)
322.246.19
(1.25)
500.5213.50
(1.95)
270.946.74
(1.05)
340.235.38
(1.32)
257.015.24
(1.00)
332.767.53
(1.29)
349.446.56
(1.36)
419.5811.35
(1.63)
491.118.04
(1.91)
326.552.64
(1.27)
574.9332.65
(2.24)
286.446.31
(1.11)
260.944.65
(1.02)
662.4510.26
(2.58)
361.103.18
(1.41)
271.475.27
(1.06)
clear rows
Duration to clear the table filled with 10.000 rows.
336.637.92
(1.67)
291.635.14
(1.45)
368.195.72
(1.83)
257.143.24
(1.28)
201.091.60
(1.00)
230.391.35
(1.15)
204.163.56
(1.02)
271.587.03
(1.35)
293.134.22
(1.46)
390.709.42
(1.94)
669.638.84
(3.33)
423.068.42
(2.10)
287.444.07
(1.43)
350.186.50
(1.74)
258.422.77
(1.29)
319.473.94
(1.59)
246.073.18
(1.22)
204.932.05
(1.02)
slowdown geometric mean1.181.291.391.391.041.121.061.281.251.501.641.351.461.381.052.011.161.02

Memory allocation in MBs

angular v2.4.3-non-keyedaurelia v1.0.7binding.scala v10.0.1cyclejs-dom v14.1.0dio v3.0.5domvm v2.0.1-non-keyedinferno v1.2.0nx v1.0.0-beta.1.1.0-non-keyedpolymer v1.7.0ractive-edgeractive v0.8.9-non-keyedreact v15.4.2-non-keyedriot v3.0.7simulacra v1.5.5svelte v1.0.1tsers v1.0.0vue v2.1.10-non-keyedvanillajs
ready memory
Memory usage after page load.
5.890.15
(1.94)
7.420.14
(2.44)
6.930.11
(2.28)
3.850.16
(1.27)
3.260.09
(1.08)
3.180.09
(1.05)
3.290.09
(1.08)
4.010.21
(1.32)
5.700.22
(1.88)
4.810.12
(1.59)
5.070.11
(1.67)
4.970.10
(1.64)
3.430.09
(1.13)
3.170.09
(1.04)
3.060.09
(1.01)
7.620.30
(2.51)
3.650.09
(1.20)
3.030.09
(1.00)
run memory
Memory usage after adding 1000 rows.
12.460.47
(2.45)
14.150.37
(2.78)
24.780.82
(4.88)
8.290.47
(1.63)
7.330.47
(1.44)
7.460.50
(1.47)
7.240.48
(1.42)
10.990.69
(2.16)
11.320.82
(2.23)
20.950.42
(4.12)
22.600.54
(4.45)
11.640.45
(2.29)
9.240.31
(1.82)
11.820.84
(2.32)
6.050.49
(1.19)
16.100.53
(3.17)
9.250.59
(1.82)
5.080.37
(1.00)