"render-table-benchmark" is a collection of different ways to render the same table with the same data.
The purpose is to experiment different Javascript template engines and benchmark them with Vanilla implementation.
Template engines currently tested:
Vanilla implementation currently tested:
- string concatenation
- dom api (thanks to @illibejiep for his contribution)
start webpack dev server
npm run devbuild assets in the public folder (it will be the source of the demo page)
npm run buildThe benchmark is very simple: render a table with 500 rows and 5 columns and then, every second, randomly update one row.
| technique | ms | diffing algorithm |
|---|---|---|
| hyperhtml | ~ 100 | ? |
| lighterhtml | ~ 100 | yes |
| lit-html | ~ 8 | yes |
| nanomorph | ~ 400 | yes |
| pug | ~ 50 | no |
| pug + nanomorph | ~ 300 | yes |
| vanilla-string-concatenation | ~ 50 | no |
| vanilla-dom api | ~ 5 | no |
| svelte | ~ 0 | no |