Virtual DOM for react

A major feature of Reactjs is the introduction of the virtual DOM concept. Why we need Virtual dom,virtual DOM gives us a little advantage.

First, let's look at the workflow of the browser.

What does the browser do when we get the requested HTML from a service?

(1) Creating a DOM tree

Once the browser receives the HTML file, the rendering engine starts parsing it and generates a DOM node (nodes) based on the HTML element (elements) one by one, forming a DOM tree.

(2) Creating a render tree

Also, the browser parses inline styles from external CSS files and elements. Typically the browser will create another tree, often called a render tree, for these style information, along with the nodes on the DOM tree that contain the style information.

(3) Layout layouts

Also referred to as reflow. After the rendering tree has been constructed, the browser engine starts to lay out. Layout, each node on the render tree assigns a set of screen coordinate values based on the exact position it should appear on the screen.

(4) Drawing Painting

Next, the browser will draw these render objects by traversing the render tree and invoking the paint method of each node. The Paint method uses a different UI back-end API (agnostic UI backend API) depending on the browser platform. By drawing, the content will eventually be displayed on the screen.

We know that when the layout of the page changes, the browser is going to re-render, this is the reflow. Each time a browser is re-rendered, it can cause a bad user experience if the DOM structure is frequently manipulated.

React's virtual DOM, an optimization of this, simply means that multiple DOM operations are synthesized once, reducing the number of reflow.

The real problem with DOM manipulation is that each operation triggers a change in layout, modification and rendering of the DOM tree. So, when you modify 30 nodes one by one, it causes 30 (potential) layout re-calculation, 30 (potential) redraw, and so on.

Virtual DOM does not actually use any entirely new technology, just to apply the "double buffering" technique to the DOM. This way, when you modify the 30 nodes one by one on this separate virtual DOM tree, it does not trigger repainting every time, so the cost of modifying the nodes becomes smaller. After that, once you've passed the changes to the real DOM, all of the changes are integrated into the DOM operation once. This time, the layout calculations and redraws caused by DOM operations may be larger, but in contrast, the consolidated changes are done only once, reducing (multiple) calculations.

However, this can be done without actually using virtual dom. You can manually integrate all DOM operations into a DOM fragment (DOM fragment) and then pass it to the DOM tree.

——————————————————

Original link: http://mp.weixin.qq.com/s?__biz=MzI0ODA2ODU2NQ==&mid=2651130413&idx=1&sn= 56a1cc3ac225a09982fc0c4a508222c7&chksm= F257ca97c5204381b559763f4af839ab72eda009c47b0f0a4d47492852b87211c601dee8987a&scene=23&srcid= 0910yhpjontori3itdtknrfu#rd

Virtual DOM for react