The virtual DOM was created to address performance issues caused by frequent manipulation of the real DOM. It is a lightweight, in-memory representation of the real DOM, which can be later used as a reference to update the actual web page. (View Highlight)
With newer frameworks like Svelte, the virtual DOM isn’t even used because of the performance overhead. Instead, Svelte uses a technique called “dirty checking” to determine what has changed. Fine-grained reactivity frameworks like SolidJS take this a step further by pinpointing exactly what has changed and updating only that part of the DOM. (View Highlight)
Static Analysis: The virtual DOM is analyzed to extract dynamic parts of the tree into an “Edit Map,” or the list of the “edits” (mappings) of the dynamic parts of the virtual DOM to the state. (View Highlight)
Dirty Checking: The state (not the virtual DOM tree) is diffed to determine what has changed. If the state has changed, the DOM is updated directly via the Edit Map. (View Highlight)
You can see that the dirty checking example takes much less computation than the diffing step. This is because the dirty checking step is only concerned with the state, not the virtual DOM, as each virtual node might need many levels of recursion to determine if it has changed, state just needs a shallow equality check. (View Highlight)
Block virtual DOM is best used when there is a lot of static content with little dynamic content. The biggest advantage the block virtual DOM has is that it doesn’t need to think about the static parts of the virtual DOM, so if it can skip over a lot of static content, it can be very fast. (View Highlight)
Note: 块虚拟 DOM的适用场景？
块虚拟 DOM 并不是万能的优化方案，使用的时候需要注意
块虚拟DOM在静态内容较多、动态内容较少的情况下最为适用。块虚拟DOM的最大优势在于它不需要考虑虚拟DOM的静态部分，因此如果能够跳过大量的静态内容，它可以非常快速。
但是如果组件的动态内容较多，那么使用块虚拟 DOM 可能看不出性能差异，而且还可能比常规虚拟 DOM 性能更差