Forked from js-framework-benchmark. You can find the source code on this repo.
The benchmark was run on a MacBook Pro 13-inch, 2020 (1.4 GHz Quad-Core Intel Core i5, 16 GB RAM, UmacOS 10.15.5, Chrome 83.0.4103.106 (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 ± 95% confidence interval (Slowdown = Duration / Fastest)
| Name Duration for... | vue-next-v3.0.0-beta.15-keyed | vue-v2.6.2-keyed | vue2-composition-api-v0.6.5-keyed |
|---|---|---|---|
| Issues for the implementation | |||
| create rows creating 1,000 rows | 149.44.1 (1.00) | 174.93.4 (1.17) | 188.17.7 (1.26) |
| replace all rows updating all 1,000 rows (5 warmup runs). | 146.71.2 (1.00) | 162.92.3 (1.11) | 168.71.2 (1.15) |
| partial update updating every 10th row for 1,000 rows (3 warmup runs). 16x CPU slowdown. | 299.216.7 (1.00) | 352.416.1 (1.18) | 369.922.3 (1.24) |
| select row highlighting a selected row. (no warmup runs). 16x CPU slowdown. | 216.512.8 (1.00) | 424.518.4 (1.96) | 508.55.6 (2.35) |
| swap rows swap 2 rows for table with 1,000 rows. (5 warmup runs). 4x CPU slowdown. | 66.51.7 (1.00) | 85.63.2 (1.29) | 93.93.7 (1.41) |
| remove row removing one row. (5 warmup runs). | 30.30.1 (1.00) | 34.10.6 (1.13) | 35.90.3 (1.18) |
| create many rows creating 10,000 rows | 1,356.99.9 (1.00) | 1,496.321.3 (1.10) | 1,681.433.9 (1.24) |
| append rows to large table appending 1,000 to a table of 10,000 rows. 2x CPU slowdown | 335.55.8 (1.00) | 371.06.2 (1.11) | 417.311.0 (1.24) |
| clear rows clearing a table with 1,000 rows. 8x CPU slowdown | 191.24.2 (1.00) | 222.06.9 (1.16) | 229.97.7 (1.20) |
| slowdown geometric mean | 1.00 | 1.22 | 1.33 |
Startup metrics (lighthouse with mobile simulation)
| Name | vue-next-v3.0.0-beta.15-keyed | vue-v2.6.2-keyed | vue2-composition-api-v0.6.5-keyed |
|---|---|---|---|
| consistently interactive a pessimistic TTI - when the CPU and network are both definitely very idle. (no more CPU tasks over 50ms) | 2,178.80.9 (1.00) | 2,328.60.4 (1.07) | 2,327.80.4 (1.07) |
| script bootup time the total ms required to parse/compile/evaluate all the page's scripts | 16.00.0 (1.00) | 16.00.0 (1.00) | 16.00.0 (1.00) |
| total kilobyte weight network transfer cost (post-compression) of all the resources loaded into the page. | 186.10.0 (1.00) | 210.80.0 (1.13) | 219.60.0 (1.18) |
| slowdown geometric mean | 1.00 | 1.07 | 1.08 |
Memory allocation in MBs ± 95% confidence interval
| Name | vue-next-v3.0.0-beta.15-keyed | vue-v2.6.2-keyed | vue2-composition-api-v0.6.5-keyed |
|---|---|---|---|
| ready memory Memory usage after page load. | 1.2 (1.00) | 1.2 (1.04) | 1.3 (1.07) |
| run memory Memory usage after adding 1000 rows. | 3.4 (1.00) | 4.0 (1.19) | 5.1 (1.52) |
| update eatch 10th row for 1k rows (5 cycles) Memory usage after clicking update every 10th row 5 times | 3.6 (1.00) | 4.4 (1.23) | 5.5 (1.55) |
| replace 1k rows (5 cycles) Memory usage after clicking create 1000 rows 5 times | 4.0 (1.00) | 4.6 (1.15) | 5.8 (1.45) |
| creating/clearing 1k rows (5 cycles) Memory usage after creating and clearing 1000 rows 5 times | 2.6 (1.00) | 2.7 (1.01) | 2.8 (1.07) |
| slowdown geometric mean | 1.00 | 1.12 | 1.31 |
Known Issues
- 634
- The HTML structure for the implementation is not fully correct.
- 694
- Keyed implementations must move the DOM nodes for swap rows