Shulou(Shulou.com)06/02 Report--

This article is about what the virtual dom principle refers to. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Virtual dom principle: when using libraries such as native js or jquery to operate DOM, the browser will start to run the whole process from building a DOM tree, so frequent operation of DOM will cause unnecessary calculations, lead to page stutters, and affect the user experience, and Virtual DOM can solve this problem very well.

Virtual dom principle:

1. Why do you need virtual DOM

Let's first introduce what it takes for a browser to load a web page; we only discuss the page parsing process, regardless of the web request process.

After the browser kernel gets the html file, it is roughly divided into the following five steps:

Parse html elements and build dom tree

Parse CSS and generate page css rule tree (Style Rules)

Associate the dom tree with the css rule tree to generate the render tree

Layout (layout/ reflow), the browser determines the size and location on the screen for each node on the Render tree

Draw the Render tree, draw the page pixel information to the screen, this process is called paint

When you use libraries such as native js or jquery to operate DOM, the browser will start to run the whole process from building the DOM tree, so frequent DOM operations will cause unnecessary calculations, lead to page stutters and affect the user experience. And Virtual DOM can solve this problem very well. It uses javascript objects to represent virtual node (VNode), calculates the minimum changes that the real DOM needs to make according to VNode, and then operates the real DOM nodes to improve rendering efficiency.

2. Virtual DOM

The structure of the virtual DOM to represent the VNode,VNode with the javascript object is as follows:

Virtual node (vNode) structure

The following is the algorithm flow chart of the virtual DOM:

Flow chart of virtual DOM algorithm

React Diff algorithm

An efficient diff algorithm can guarantee minimal changes to the actual DOM. However, the standard Diff algorithm complexity requires O (n ^ 3), which obviously can not meet the performance requirements. In order to achieve the goal that each interface can be refreshed as a whole, it is necessary to optimize the algorithm. In React, two simple assumptions are made according to the characteristics of Web interface, so that the complexity of Diff algorithm is directly reduced to O (n).

1. Two identical components produce similar DOM structures, while different components produce different DOM structures.

two。 For a set of child nodes at the same level, they can be distinguished by a unique id.

The optimization of the algorithm is the basis of the whole interface Render of React, which ensures the performance of the overall interface rendering.

Comparison of different node types

In order to compare between trees, we first need to be able to compare two nodes, that is, compare two virtual DOM nodes in React, and what to do when the two nodes are different. This is divided into two cases: (1) the node type is different, (2) the node type is the same, but the attributes are different.

Different node types: delete the original node directly and insert the new node.

React's DOM Diff algorithm actually only compares trees layer by layer, and the two trees only compare nodes at the same level as described below.

Dom tree

React only compares DOM nodes within the same color box, that is, all child nodes under the same parent node. When it is found that the node no longer exists, the node and its child nodes will be completely deleted and will not be used for further comparison. In this way, you only need to traverse the tree once to complete the comparison of the entire DOM tree.

Comparison of nodes of the same type

React resets the attributes to achieve node conversion.

Thank you for reading! This is the end of the article on "what the principle of Virtual dom refers to". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.