krausest / js-framework-benchmark

A comparison of the performance of a few popular javascript frameworks
https://krausest.github.io/js-framework-benchmark/
Apache License 2.0
6.52k stars 811 forks source link

Replace plotly with chart.js #1624

Closed nakrovati closed 2 months ago

krausest commented 2 months ago

Somehow I think we're going in the wrong direction. Chrome 117 results (before using vite etc.): Screenshot 2024-03-08 at 20 25 16 with charts: Screenshot 2024-03-08 at 20 26 16

Chrome 118 version (using vite): Screenshot 2024-03-08 at 20 27 09 739 kb with charts: Screenshot 2024-03-08 at 20 28 05

Chrome 122 version (using vite): Screenshot 2024-03-08 at 20 20 29 824 kb with charts: Screenshot 2024-03-08 at 20 21 25

Redesign with ant: Screenshot 2024-03-08 at 20 22 15 972 kb with charts: Screenshot 2024-03-08 at 20 22 38

Redesign and charts.js Screenshot 2024-03-08 at 20 23 14 1.6 mb with charts: Screenshot 2024-03-08 at 20 23 39

Maybe we should rewind and go back to the 248 kb version? (I admin it'll be bigger due to render-only and js-only results, but the trend really doesn't look good).

nakrovati commented 2 months ago

I have different results (in Arc):

117

117, Plotly

122

122, Plotly

122 - Ant

Current, Ant + Plotly

next - Ant + Chart.js

Improve design, Ant + Chartjs

The increase between 117 and 122 (without Ant) was due to two reasons: the increase in the number of benchmarks and frameworks (by ~300kb of results.ts file), and the addition of Ant design (~200kb). After replacing Plotly with Chart.js, the size of the bundle was further reduced (~1mb). Of course I refactored the code and replaced Redux with Zustand, but it's not significant.

If you want, I can remove Ant Design and use Radix primitives. The size will be slightly larger than before adding Ant.

krausest commented 2 months ago

No, please leave it. I was wrong. I measured (only) the version with charts.js on my local machine and that server doesn't compress the js files. On github pages everything looks good: Screenshot 2024-03-09 at 11 25 24 With the boxplot: Screenshot 2024-03-09 at 11 29 15

So everything is OK. I'll see it I can make the result file a bit smaller. Some numbers in there have unnecessary many digits.

nakrovati commented 2 months ago

Cool, I'll remove unnecessary renders then, try to memoize the tables and refactor reducer.ts and Common.ts.

By the way, if you want you can change the structure of results.ts from

{
 f:string,
 b:string,
 v:{ [k:string]: number[] }
}[]

to

{
 f:string,
 b:[
  n: string, // benchmark name
  v:{ [k:string]:number[] } 
 ]
}[]

This will save ~10 percent of the file size by reducing the number of repetitions of framework names, as well as reducing the run through the array with them. As in this article under "Optimizing JSON Performance" https://medium.com/data-science-community-srm/json-is-incredibly-slow-heres-what-s-faster-ca35d5aaf9e8

krausest commented 2 months ago

I improved result size. Only 1 decimal digit, f and b as index instead of string and the structure you proposed. Screenshot 2024-03-09 at 20 07 28 381 kb, nice!