Virtual DOM, often nouns

7788 vague, a weekly summary of knowledge to start recording, virtual DOM today to record this knowledge

List1: What is a virtual DOM?

ta is an object, a simulated target DOM tree, includes tag, props, children three properties

<div id="app">
  <p class="text">hello world!!!</p>
</div>

The above HTML converted to a virtual DOM follows:

{
  tag: 'div' ,
  props: {
    id: 'app'
  },
  chidren: [
    {
      tag: 'p' ,
      props: {
        className: 'text'
      },
      chidren: [
        'hello world!!!'
      ]
    }
  ]
}

List2: He is used to solve the problem?

DOM is a virtual browser in order to solve performance problems are designed. For example, we have one operation three times to update the DOM operation at this time will not immediately operate virtual DOM DOM for page updates, but to save the contents of these three updates to the local JS objects, the object will be a one-time update to the real DOM tree, handed over to the browser to draw, so in order to avoid a lot of unnecessary calculations.

Added: Many people think that the biggest advantage of virtual DOM is diff algorithms to reduce the consumption of JavaScript performance brought operations of real DOM. Although this is an advantage to bring virtual DOM, but not all. Virtual DOM biggest advantage is the original abstract rendering process to achieve cross-platform capability, not just the browser's DOM, may be Android and IOS native components can be very hot in recent applets, can be various GUI. (Copied to the maximum advantage of the piece being understanding is not very thorough)

List3: Wait, why questions weak weak operating performance overhead DOM large le?

In fact, instead of querying large DOM tree overhead, but the module DOM tree and JS module is separate from the communication between these modules adds overhead. Coupled with DOM operations will cause the page to redraw or reflux, making huge performance overhead, in today's popular mobile end of the world, while the phone uneven performance, the performance problem is particularly prominent.

List4: That virtual DOM is how to enhance the performance of le?

When the DOM is changed, by comparison algorithm diff native object JavaScript, DOM calculated needs to be changed, then only the operation for changing the DOM, instead of updating the entire view

List5: How to convert HTML to virtual DOM le?

Observation of the mainstream of today's virtual DOM library snabbdom , Virtual-dom , there is usually a function h, that is, React in React.createElement, as well as the Vue render method createElement。而React 是通过 babel 将 jsx 转换为 h 函数渲染的形式，而 Vue 是使用 vue-loader 将模版转为 h 函数渲染的形式，整个h函数返回的就是虚拟DOM的对象

TO DO: follow-up will involve diff algorithm to make up back again

References:

1) https://juejin.im/post/5c051597e51d45517b0cf7e6 (What is a virtual DOM)

2) https://efe.baidu.com/blog/the-inner-workings-of-virtual-dom/ (the inner workings of Vitual DOM)

3) https://juejin.im/post/5d085ce85188255e1305cda1#heading-1 (what in the end is a virtual DOM)

4) https://juejin.im/post/5d36cc575188257aea108a74#heading-14 (in-depth analysis: Vue core of the virtual DOM)

Virtual DOM, often nouns

Guess you like