Why is virtual DOM fast?

The virtual DOM is not typesetted or redrawn. The virtual DOM changes frequently and then compares and modifies the real DOM once and for all (note!). The efficiency of frequent typesetting and redrawing of the real DOM is quite low. The virtual DOM can effectively reduce the redrawing and typesetting of a large area (real DOM nodes), because the final result is different from the real DOM. Loss calculation using virtual DOM can only be performed for partial rendering (same as 2) : Total loss = increase, deletion and modification of virtual DOM + (related to the efficiency of Diff algorithm) Difference increase, deletion and modification of real DOM + (fewer nodes) Loss calculation using real DOM directly: Total loss = complete addition, deletion and modification of the real DOM + (possibly more nodes) layout and redrawing. In short, in order to reduce the performance problems caused by frequent large-area redrawing, different frameworks do not necessarily need virtual DOM. The key is whether the framework frequently causes large-area DOM operations.

Virtual DOM optimization practice

If I have 1000 pieces of data, and I change two of them, the real DOM will re-render 1000 pieces of data, and any change will re-render all of the data, and the virtual DOM will generate 1000 objects (it won’t be graphically rendered by the browser), and the stuff in the virtual DOM will be bound to the real DOM, When the data changes, the virtual DOM is compared with the previous virtual DOM. When the data changes, the real DOM element of the changed data is updated

However, the array does not have a default identifier, so the array must be reordered every time it changes, which has a significant impact on performance. Therefore, when listening to traversal data in real time, you need to introduce the key attribute to identify the array data, which is generally identified by subscripts

<template> <div> <ul><! The key attribute is added to optimize vNode while iterating through the array"(item,index) in list"
          :key="index" 
          @click="list.push('laowang')"
          >
          {{item}}
        </li>
      </ul>
  </div>
</template>
 
<script>
export default {
  mounted() {
    console.log(this);
  },
  data() {
    return {
      list: ["zhangsan"."lisi"]}; }}; </script> <style> </style>Copy the code

Let’s talk about the DOM key. If you don’t give a key to the tag of the for loop, the browser will console you with a warning. What is the use of this key and why index is not recommended?

Left describes an array, we at the time of rendering to an array of five data generated five virtual DOM tree, and then we added a data, because of we don’t give the key node values, so that when we were doing two virtual DOM ratio, the relationship between the node and node are difficult to be established, it will loss ratio on the performance of the process.

So suggest that we must in a loop to the node with the key values, why not recommend the use of the index in the key value, because the two virtual DOM comparison, if the key value is fixed (such as the object itself, if the data read from the database, the key value can be set to the data of id), then compare the efficiency will be very expensive.

If index is used as the key value, the index value will be misaligned when we delete an item of data, such as:

Original data: A-0, B-1, C-2 At this time, we delete A, the data becomes: B-0, C-1

In this way, the key value loses its existence meaning, so the official advice is to use a stable value to make the key value.

The above is the VNode and DIff algorithm introduced in this issue, you can pay attention to the front of the order of the public number, pay attention to more front-end knowledge, access to the front group, there are many well-known Internet front end friends, front-end technology update too fast, can not be out of date, learn together, common progress!