Do you know that the update granularity of different Javascript frameworks is different? Let's talk about it in detail.
Coarse grained
Almost all the framework updates based on vdom are coarse-grained. The unit they update is component, and then the whole component will be re rendered for reconciliation.
Such as react, fre……
There are the advantages of vdom, but it will cause unnecessary updates. The react team says that the performance of JS runtime is negligible, so the coarse-grained update of vdom has always been a good way.
I agree with this option, because if it is not for coarse-grained update, asynchronous rendering will not be easy, and the essence of concurrent mode is repeated parallel rendering.
Fine grained
Some proxy based frameworks are fine-grained. Such as svelte, vue1. They hijack the keys of state and can update them accurately.
This is a good idea most of the time, but when there is a long list, too many proxies will be generated, and the performance will be degraded.
Block grained
This is a compromise, that is, when a block is encountered, the runtime is used for reconciliation.
Such as vue3:
<div v-for="item in items" key="item.key"/>
output like this:
for(items, (item)=> item.key)
The for function is a runtime function that performs internal reconciliation.
trade off
Three different granularity are good and bad, as a framework, the author should weigh the choice.
Fre uses vdom, so its updates are coarse-grained, which is more conducive to asynchronous rendering.
But I think that for frameworks like svelte, using block granularity is the best, because many algorithms are runtime optimizations.
Finally, if you are interested in the new framework, take a look at fre.
Top comments (0)