Read on Twitter
While working on speeding up Aether, I recently discovered the Vue 'performance' mode, which outputs detailed info to Chrome perf devtools. After playing around this for a few days, here are my impressions. These apply to Vue, but React works the same way, so it's likely similar.
1/n Javascript is shockingly single-threaded. That means if you have a view with 10 posts, they are going to be calculated and painted ... one ... by ... one ... in sequence. This turns the components you repeat into critical hot paths. No parallelism! At all! This is COBOL.
2/n You say web workers. I say I tried them, and it converted my 2ms render component into a 730ms render component. Why? Because web workers start a new execution stack, which needs JS to be fed to it anew. In Turkish there's a term for this: 'astari yuzunden pahaliya gelmek'.
3/n Components ain't free. Every component incurs a parse/render/patch penalty. I discovered this bc. I was using a component for rendering a username within a post component. That made the post component 20% slower. Same username code inlined removed that 20%.
4/n Big and few components are better than many and small components. This sucks (not a fault of Vue) because many and small (thus simpler individually) is more human friendly.
5/n The deeper your component stack goes, the more penalty you're going to incur for all those passthrough components that do nothing but hold state and handle communication between peer components.
6/n The best way to make something fast is to make it do less. Deep object trees cost real time in parsing, triply so if they're feeding to a deep component stack. Do less. Use computed properties sparingly, they are magical but have a cost.
7/n Lastly, for now: 2ms Extra in a repeating 'post' component sounds like nothing, but with 100 posts in a for loop, it will cost you 200ms since the whole DOM thing is single-threaded. That 2ms is worth spending the time to reduce to 1ms, that saves you 100ms.
8/n I'll add to this thread the more I learn about this perf mode. Highly recommend you try it if you use Vue, it improved my understanding of what's going on by 3x overnight. Here's a good starter article: https://vuedose.tips/tips/measure-runtime-performance-in-vue-js-apps/
