perf: replace Svelte with vanilla JS

nolanlawson commented 8 months ago

This is an experimental version of the emoji picker where Svelte is removed and we build our own small custom framework.

I'm not sure we actually want to do this, but I'm kind of doing a bake-off between this and Svelte v5: #376

github-actions[bot] commented 8 months ago

📊 Tachometer Benchmark Results

Summary

benchmark-total

emoji-picker-element-change-tab: unsure 🔍 -1% - +4% (-0.29ms - +2.14ms)
^{this-change vs tip-of-tree}
emoji-picker-element-database-interactions: unsure 🔍 -3% - +7% (-3.47ms - +7.01ms)
^{this-change vs tip-of-tree}
emoji-picker-element-first-load: unsure 🔍 -8% - +7% (-4.32ms - +3.62ms)
^{this-change vs tip-of-tree}
emoji-picker-element-search: unsure 🔍 -2% - +0% (-0.99ms - +0.26ms)
^{this-change vs tip-of-tree}
emoji-picker-element-second-load: unsure 🔍 -4% - +1% (-1.90ms - +0.45ms)
^{this-change vs tip-of-tree}

Results

emoji-picker-element-change-tab

Browser: chrome-headless 120.0.6099.71
Sample size: 50
Built by: Benchmarks #372
Commit: 962c38e

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree
this-change	58.45ms - 60.50ms	-	unsure 🔍 -1% - +4% -0.29ms - +2.14ms
tip-of-tree tip-of-tree	57.91ms - 59.20ms	unsure 🔍 -4% - +0% -2.14ms - +0.29ms	-

emoji-picker-element-database-interactions

Browser: chrome-headless 120.0.6099.71
Sample size: 50
Built by: Benchmarks #372
Commit: 962c38e

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree
this-change	105.00ms - 112.95ms	-	unsure 🔍 -3% - +7% -3.47ms - +7.01ms
tip-of-tree tip-of-tree	103.79ms - 110.62ms	unsure 🔍 -6% - +3% -7.01ms - +3.47ms	-

emoji-picker-element-first-load

Browser: chrome-headless 120.0.6099.71
Sample size: 50
Built by: Benchmarks #372
Commit: 962c38e

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree
this-change	52.19ms - 57.61ms	-	unsure 🔍 -8% - +7% -4.32ms - +3.62ms
tip-of-tree tip-of-tree	52.35ms - 58.16ms	unsure 🔍 -7% - +8% -3.62ms - +4.32ms	-

emoji-picker-element-search

Browser: chrome-headless 120.0.6099.71
Sample size: 50
Built by: Benchmarks #372
Commit: 962c38e

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree
this-change	53.35ms - 54.03ms	-	unsure 🔍 -2% - +0% -0.99ms - +0.26ms
tip-of-tree tip-of-tree	53.54ms - 54.58ms	unsure 🔍 -0% - +2% -0.26ms - +0.99ms	-

emoji-picker-element-second-load

Browser: chrome-headless 120.0.6099.71
Sample size: 50
Built by: Benchmarks #372
Commit: 962c38e

Version	Avg time	vs this-change	vs tip-of-tree tip-of-tree
this-change	43.90ms - 45.39ms	-	unsure 🔍 -4% - +1% -1.90ms - +0.45ms
tip-of-tree tip-of-tree	44.46ms - 46.27ms	unsure 🔍 -1% - +4% -0.45ms - +1.90ms	-

_{tachometer-reporter-action v2 for Benchmarks}

github-actions[bot] commented 8 months ago

Size Change: -6.07 kB (-14%) 👏

Total Size: 36.7 kB

Filename	Size	Change
`./bundle.js`	36.7 kB	-6.07 kB (-14%)	👏

_{compressed-size-action}

nolanlawson commented 7 months ago

Memory usage baseline:

| Scenario | Bytes             | Relative to blank page |
| -------- | ----------------- | ---------------------- |
| blank    | 380 kB (379592)   | 0 B (0)                |
| picker   | 1.23 MB (1228824) | 849 kB (849232)        |
| compact  | 1.11 MB (1108494) | 729 kB (728902)        |
| full     | 1.38 MB (1379992) | 1 MB (1000400)         |

Memory usage:

| Scenario | Bytes             | Relative to blank page |
| -------- | ----------------- | ---------------------- |
| blank    | 380 kB (379572)   | 0 B (0)                |
| picker   | 1.15 MB (1152129) | 773 kB (772557)        |
| compact  | 1.11 MB (1108494) | 729 kB (728922)        |
| full     | 1.37 MB (1366658) | 987 kB (987086)        |

nolanlawson commented 7 months ago

Memory improved a bit further:

| Scenario | Bytes             | Relative to blank page |
| -------- | ----------------- | ---------------------- |
| blank    | 380 kB (379572)   | 0 B (0)                |
| picker   | 1.09 MB (1091802) | 712 kB (712230)        |
| compact  | 1.1 MB (1101890)  | 722 kB (722318)        |
| full     | 1.37 MB (1366658) | 987 kB (987086)        |

nolanlawson commented 7 months ago

Updated memory numbers with Chrome 120:

Baseline:

Scenario	Bytes	Relative to blank page
blank	388 kB (387700)	0 B (0)
picker	1.23 MB (1228916)	841 kB (841216)
compact	1.11 MB (1108494)	721 kB (720794)
full	1.38 MB (1379992)	992 kB (992292)

This PR:

Scenario	Bytes	Relative to blank page
blank	393 kB (392730)	0 B (0)
picker	1.09 MB (1091875)	699 kB (699145)
compact	1.11 MB (1108494)	716 kB (715764)
full	1.38 MB (1377992)	985 kB (985262)

nolanlawson commented 7 months ago

OK, I've decided to pull the trigger and switch to a custom framework. yolo

nolanlawson / emoji-picker-element