1. React's virtual DOM
In web development, it is necessary to reflect the changes of data to the UI in real time. At this time, it is necessary to operate the DOM, but complex or frequent DOM operations are usually the cause of performance bottlenecks. For this reason, React introduces virtual DOM (Virtual DOM ) DOM) mechanism.
1. What is virtual DOM?
In React, the result of render execution is not a real DOM node, but a lightweight JavaScript object, which we call virtual DOM (Virtual DOM). It has batching (batch processing) and efficient Diff algorithm. Only do actual DOM manipulation on the parts of the interface that really change. Batching collects all DOM operations and submits them to the real DOM at one time. The time complexity of the diff algorithm is also reduced and becomes more efficient.
2. Virtual DOM VS direct operation of native DOM?
If there is no Virtual DOM, simply reset innerHTML directly. When only one row of data changes, it also needs to reset the entire innerHTML, which obviously causes a lot of waste.
Comparing the redrawing process of innerHTML and Virtual DOM is as follows:
- innerHTML : render html string + recreate all DOM elements
- Virtual DOM : render Virtual DOM + diff + necessary DOM updates
React's performance is far better than native DOM operations, and DOM does not belong to Javascript at all (nor does it exist in the Javascript engine). Javascript is actually a very independent engine, and DOM is actually a set of APIs introduced by the browser to allow Javascript to manipulate HTML documents . In the era of just-in-time compilation, the overhead of calling DOM is very high. The execution of Virtual DOM is completely in the Javascript engine, and there will be no such overhead at all.
3. Virtual DOM VS MVVM? / What is the difference between React and MVVM-based frameworks?
- The change check of the MVVM framework is at the data level, while the check of React is at the DOM structure level .
- Dirty check (Angular): scope digest + necessary DOM update (any change has a fixed O(watcher count) cost)
- Dependency collection (Vue, Avalon): re-collect dependencies + necessary DOM updates (O(change) at both js and DOM levels)
- When MVVM renders a list , since each row has its own data scope, usually each row has a corresponding ViewModel instance , or a slightly lighter "scope" object that uses prototype inheritance, but there is also a certain price . So, MVVM list rendering initialization is almost certainly slower than React , because creating ViewModel/scope instances is much more expensive than Virtual DOM.
- When the data is a brand new object, without any optimization in terms of reuse of already created ViewModel instances and DOM elements , since the data is "brand new", MVVM actually needs to destroy all previous instances, recreate all instances, and finally One more render! Because React 's change check is at the DOM structure level, even if it is brand new data, as long as the final rendering result remains unchanged, then there is no need to do useless work. Therefore, both Angular and Vue have been improved. 01-provides an optimization mechanism for list redrawing. When the data changes, the uid of the object that does not change will be used to " remind " that the original instance and DOM element corresponding to this data can be restored. Use , only need to update the changed part, 02- use track by $index to perform "in-place multiplexing" and directly multiplex according to the position in the array .
- Performance comparison in different scenarios:
When comparing performance, it is necessary to distinguish the different occasions of initial rendering, small data update, and large data update. Virtual DOM, dirty check MVVM (Angular), and dependency collection MVVM (Vue, Avalon) have different performances and different optimization requirements in different occasions. In order to improve the performance of a small amount of data update, Virtual DOM also needs targeted optimization, such as shouldComponentUpdate or immutable data.
01- Initial rendering : Virtual DOM > Dirty Checking >= Dependency Collection
02- Small data update : dependency collection >> Virtual DOM + optimization > dirty check (unable to optimize) > Virtual DOM without optimization
03- Large data update : Dirty check + optimization >= dependency collection + optimization > Virtual DOM (cannot/need to optimize) >> MVVM without optimization
4. Misunderstanding of React virtual DOM?
React hides the underlying DOM operations and can describe our purpose in a more declarative way, making the code easier to maintain . No framework can be faster than pure manual optimization of DOM operations, because the DOM operation layer of the framework needs to deal with any operations that may be generated by the upper-level API, and its implementation must be universal.