Talking about the virtual DOM of the biggest highlight of React

In Web development, it is necessary to reflect the change in data in real time to the UI. At this time, it is necessary to operate the DOM, but complex or frequent DOM operations are usually caused by performance bottlenecks. To this end, React introduces virtual Mechanism of DOM (Virtual DOM).

First, what is a virtual DOM?

In React, the result of Render execution is not a real DOM node, and the result is only a lightweight JavaScript object, which we call Virtual Dom.

Virtual DOM is a large highlight of React, with Batching (batch) and efficient DIFF algorithms. This allows us to “refresh” at any time “refresh” at any time without worrying about performance issues, by virtual DOM to ensure that only the actual DOM operation is performed only on the interface on the interface. It is basically no need to care about how virtual DOM works in actual development, but it is understood that its operating mechanism not only helps better understand the life cycle of the React component, but also helps further optimize the React program.

Second, the virtual DOM VS direct operation of native DOM?


If there is no Virtual DOM, it is simply resetting InnerHTML. In this way, in the case of all data, all data has changed, it is reasonable, but when only one line of data changes, it needs to reset the entire InnerHTML, which obviously causes a lot of waste.

Compare the redrawing process of InnerHTML and Virtual DOM as follows:


Virtual DOM: Render Virtual Dom + DIFF + necessary DOM update

and DOM operations are compared, JS calculations are very cheap. Virtual Dom Render + DIFF is obviously slower than rendering HTML string, but it is still a calculation of a pure JS level, which is still cheaper than the DOM operation later. Of course, some people have verified that React’s performance is better than direct operation of real DOM, the code is as follows:


function raw () {var data = _builddata (), html = ” “; … for (VAR i = 0; i


Although a string containing 1000 TAG is constructed, it is added to the DOM tree In, but only a DOM operation. However, in the actual development process, this 1000 element updates may be distributed in 20 logic blocks, and 50 elements are included in each logic block. When the page needs to be updated, it will be caused The DOM tree is updated, the above code is approximated to the following format:

function Raw () {var Data = _builddata (), html = “”; … For (var i = 0; i
  In this way, the performance of React is much better than the native DOM operation. <data.length; i++) {
    var render = template;
    render = render.replace("{{className}}", "");
    render = render.replace("{{label}}", data[i].label);
    html += render;
  }
  ...
  container.innerHTML = html;
  ...
} 
Moreover, The DOM is completely not JavaScript (not in the JavaScript engine) .. JavaScript is actually a very independent engine, and the DOM is actually a group of browser leads to the API of the JavaScript to operate the HTML document. In immediate compiled era, call DOM The overhead is very big. The execution of Virtual DOM is completely in the JavaScript engine, and there will be no money at all.

React.js has a large performance advantage relative to direct operation of native DOM, to a large extent, to Virtual Dom’s Batching and Diff. Batching collected all DOM operations, submitted to real DOM at once. DIFF algorithm time complexity is also reduced from O (N ^ 3) of the standard DIFF algorithm to O (n). Here is a next blog separately.

Third, the virtual DOM VS MVVM?
  Compared to React, other MVVM frameworks such as Angular, Knockout, and Vue, avalon use data binding: through the Directive / Binding object, observe data change and retain the actual The reference to the DOM element is performed when there is a data change. The change of MVVM is the data level, while React's check is the DOM structure. The performance of the MVVM also varies depending on the principle of change detection: Angular's dirty inspection makes any changes have a fixed O (Watcher Count); KnockOut / Vue / Avalon has relying on the collection, all in JS and DOM level Yes: <data.length; i++) { 
    var render = template; 
    render = render.replace("{{className}}", ""); 
    render = render.replace("{{label}}", data[i].label); 
    html += render; 
    if(!(i % 50)) {
      container.innerHTML = html;
    }
  } 
  ... 
}
 
Dirty check: Scope Digest + necessary DOM update

Related collection: Re-collected dependence + necessary DOM update

It is seen that Angular’s least efficient place is that there are any small changes and the number of WATCHERs. but! When all data has changed, Angular does not actually lose money. Relying on the collection in initialization and data changes, it needs to be re-collected. This cost can almost ignore when a small amount is updated, but a certain amount of consumption is generated when the amount of data is large.

When the MVVM rendered list,Every line has its own data scope, so it is usually a corresponding ViewModel instance in each line, or a slightly lightweight “scope” object that uses prototype inherited, but also has a certain price. Therefore, the initialization of the MVVM list rendering is almost a slower than React, because the creation of the ViewModel / Scope instance is much more expensive than the Virtual DOM, so it is much more expensive than the VIRTUAL DOM. One common problem with all MVVM here is how to effectively multiplex the VIEWMODEL instances and DOM elements that have been created when the data is new objects. If there is no optimization of any multiplexing, since the data is “new”, the MVVM actually needs all instances before destruction, recreate all instances, and finally rendering! This is why Angular / Knockout implementations linking in the topic are relatively slow. In contrast, the change of React is inspected because of the DOM structure level, even new data, as long as the final rendering result is not changed, then it is not necessary to do useless.


Angular and Vue provide an optimization mechanism for list redrawn, which is how the “Tips” framework is effectively multiplexed instances and DOM elements. For example, the same object in the database, in the two front end API calls will become different objects, but they still have the same UID. At this time you can prompt the Track By UID to let Angular know that both objects are actually the same data. Then, the examples of this data correspond to the DOM elements can be reused, and only the changes have been updated. Alternatively, you can also directly track by $ index for “original multiplexing”: directly according to the location in the array. In the example given in the topic, if the Angular implementation plus track by $ index, the follow-up redraw is not slower than React. Even in the DBMonster test, Angular and Vue used TRACK BY $ INDEX than R.EACT is fast: DBMON (Note Angular default version is not optimized, optimized in the following)

When comparing performance, it is clear that the initial rendering, small data update, and a large amount of data update. occasion. Virtual DOM, dirty check MVVM, data collection MVVM has different performance and different optimization requirements in different occasions. Virtual DOM also requires targeted optimization, such as ShouldComponentUpdate or Immutable Data.

Initial rendering: Virtual DOM> Dirty inspection> = dependency collection

Small data update: Dependent Collection >> Virtual DOM + Optimization> Dirty Check (Optimized)> Virtual Dom No optimization
  1. A large amount of data update: dirty check + optimization> = dependency collection + optimization> Virtual DOM (no / no need to optimize) >> MVVM no optimization
  2. (this paragraph borrowed from knowing Related answer)
Fourth, misunderstandings for React Virtual DOM?


React never said “React is faster than native operation”. React gives us a guarantee that it can still give us a resulting performance without manual optimization.


React masks the underlying DOM operation, which can be used to describe our goal in a more declarative manner, so that the code is more easily maintained. Below, I still have learned from the answer: No frame can be faster than the pure manual optimization DOM operation, because the DOM operating layer of the frame requires the possible operation of any upper API, and its implementation must be universally. For any Benchmark, I can write faster manual optimization than any framework, but what is the meaning? When building an actual application, isn’t youDo you do manual optimization in one place? This is obviously impossible for maintainability considerations.


The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment