javascript - Why is the efficiency of virtual DOM in react faster than directly operating DOM?

Question

Is there a concept of virtual DOM in react?
The difference between it and the native DOM operation is that it uses JS to generate a virtual dom similar to an intermediary.
This is a DOM implemented using JS, and it records the changes before and after. Some records, and then when re-rendering, perform partial rendering of the differentiated parts. This avoids rendering of the entire page? So the native operation of DOM is to render the entire page? I see many examples on the Internet that say that every time the native changes, the innerHTML is directly reset. If a large amount of data is used in this operation, it will be GG, ha? Virtual DOM records changes, then uses its diff algorithm to optimize, and finally renders locally where there are changes. So I can't achieve the same effect using native? Can't I also find the changes through comparison and then use the diff algorithm to modify innerHTML at the specified location? Will this efficiency be worse than virtual dom? Solve

Answer 1

My understanding is that you can do it faster than React if you can do two things:

1. Avoid unnecessary re-render.

2. Have a better diff algorithm!

Please seestackoverflow上virtual domthe author’s answer for details.

Answer 2

It's like this:
First of all, virtual dom is not faster than direct native operation. The so-called "fast" is conditional
For example, like, number +1, direct operation of dom will be faster.
If you can figure it out yourself The rule is, every time you manually operate the dom, only change what should be changed. Then the dom operation will always be faster than the virtual dom.
But if your changes are connected to many places and you want to maintain the state, then the automatic diff of the virtual dom will undoubtedly Let you save more worry.
For example, in a list, the list items have status such as likes, number of replies and other information, there are dynamic additions, and dynamic loading. At this time, it will be very cumbersome for you to directly operate the dom.
The core of the virtual dom is diff, it automatically calculates for you those areas that should be adjusted, and then only modifies the areas that should be modified. What is saved is not the small speed such as running speed, but the "overall speed" such as development speed/maintenance speed/logic simplicity. Of course, virtual DOM also has its shortcomings, which I won’t go into here

Answer 3

If you spend a lot of effort to optimize every DOM change on every page, you will definitely be faster than automated virtual DOM;
The problem is that under normal circumstances you will not do this.
So in most cases, vitrual DOM can provide stronger capabilities (such as rendering controls to canvas) under faster conditions.

Answer 4

Visual DOM is not faster than directly manipulating the DOM (provided the code you write is good enough), it appears because of the React re-render all mechanism. That is to say, for React, any change requires re-rendering the entire application. If it is a real DOM, such performance is unacceptable.

You can check Youda’s answer for details

Answer 5

(Use VDOM diff to selectively update DOM) (generally) faster than (rebuild DOM each time)

The diff algorithm generally sacrifices quality in order to reduce time complexity and is not guaranteed to give the minimum diff. Then it should be possible to construct several VDOMs so that the diff result is to reconstruct the DOM. In this case, VDOMs may be slower.