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 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.
| angular v1.6.1-keyed | angular v2.4.3-keyed | bobril v5.0.4 | domvm v2.0.1-keyed | elm v0.18.0 | ember v2.10.0-beta.3 | ember v2.6.1 | kivi v1.0.0-rc2 | knockout v3.4.1 | mithril v0.2.5 | mithril v1.0.0-alpha | nx v1.0.0-beta.1.1.0-keyed | plastiq v1.33.0 | preact v7.1.0 | ractive v0.8.9-keyed | react-lite v0.15.30 | react v15.4.2-keyed | react v15.4.2-mobX-v3.0.1 | react v15.4.2-redux-v3.6.0 | vidom v0.7.1 | vue v2.1.10-keyed | vanillajs-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 mean | 1.50 | 1.21 | 1.06 | 1.10 | 1.34 | 1.43 | 2.14 | 1.02 | 2.15 | 2.36 | 1.22 | 2.15 | 1.17 | 1.22 | 1.71 | 1.86 | 1.26 | 1.43 | 1.33 | 1.09 | 1.15 | 1.01 |
| angular v1.6.1-keyed | angular v2.4.3-keyed | bobril v5.0.4 | domvm v2.0.1-keyed | elm v0.18.0 | ember v2.10.0-beta.3 | ember v2.6.1 | kivi v1.0.0-rc2 | knockout v3.4.1 | mithril v0.2.5 | mithril v1.0.0-alpha | nx v1.0.0-beta.1.1.0-keyed | plastiq v1.33.0 | preact v7.1.0 | ractive v0.8.9-keyed | react-lite v0.15.30 | react v15.4.2-keyed | react v15.4.2-mobX-v3.0.1 | react v15.4.2-redux-v3.6.0 | vidom v0.7.1 | vue v2.1.10-keyed | vanillajs-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 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.
| angular v2.4.3-non-keyed | aurelia v1.0.7 | binding.scala v10.0.1 | cyclejs-dom v14.1.0 | dio v3.0.5 | domvm v2.0.1-non-keyed | inferno v1.2.0 | nx v1.0.0-beta.1.1.0-non-keyed | polymer v1.7.0 | ractive-edge | ractive v0.8.9-non-keyed | react v15.4.2-non-keyed | riot v3.0.7 | simulacra v1.5.5 | svelte v1.0.1 | tsers v1.0.0 | vue v2.1.10-non-keyed | vanillajs | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 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 mean | 1.18 | 1.29 | 1.39 | 1.39 | 1.04 | 1.12 | 1.06 | 1.28 | 1.25 | 1.50 | 1.64 | 1.35 | 1.46 | 1.38 | 1.05 | 2.01 | 1.16 | 1.02 |
| angular v2.4.3-non-keyed | aurelia v1.0.7 | binding.scala v10.0.1 | cyclejs-dom v14.1.0 | dio v3.0.5 | domvm v2.0.1-non-keyed | inferno v1.2.0 | nx v1.0.0-beta.1.1.0-non-keyed | polymer v1.7.0 | ractive-edge | ractive v0.8.9-non-keyed | react v15.4.2-non-keyed | riot v3.0.7 | simulacra v1.5.5 | svelte v1.0.1 | tsers v1.0.0 | vue v2.1.10-non-keyed | vanillajs | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 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) |