⚡Virtual DOM
Every component creates a new virtual DOM tree every time it gets re-rendered.
React compares the new virtual DOM tree with the old one and then updates the browser DOM to match the virtual DOM.
The two main advantages are:
🐳 First, You don’t need to compile anything, so you can use any programming language to implement the component as far as the virtual DOM is concerned.
🐳 Second, The rendering process results in a value that can be used for testing, debugging, etc …
⚡Incremental DOM
The incremental DOM is developed and used by Google.
Every component gets compiled into a series of instructions. These instructions create DOM trees and update them in place when the data changes. The set of generated instructions isn’t rendered by the rendering engine of the framework, the instructions are by the rendering engine.
The two main advantages of the incremental DOM are:
🐳 The incremental DOM is tree-shakable.
🐳 The incremental DOM has a low memory footprint.
A Virtual DOM creates a whole DOM tree from scratch whenever you rerender something, resulting in a lot of memory usage.
The incremental DOM only has to allocate the memory when the DOM nodes are added or removed.
Because the incremental DOM doesn’t interpret components but the set of instructions, it can remove all unused instructions at compile time, resulting in a tree-shakable rendering process.
Angular has always opted to use HTML and templates. That is why the language-agnostic virtual DOM doesn’t bring much to the table for Angular.
The situation is more nuanced, and the comfort level ultimately hinges on the specific framework and the developer’s preferences.
Top comments (0)