NOTE: The benchmark was run on a MacBook Pro 15 (2,5 GHz i7, 16 GB RAM, OSX 10.13.6, Chrome 69.0.3497.100 (64-bit)). The result is from https://www.stefankrause.net/wp/?p=504.

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

image.png

Startup metrics (lighthouse with mobile simulation)

image.png

Memory allocation in MBs ± standard deviation

image.png

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

image.png

Startup metrics (lighthouse with mobile simulation)

image.png

Memory allocation in MBs ± standard deviation

image.png

If you want to see more comparison result, you can refer to the link https://stefankrause.net/js-frameworks-benchmark8/table.html