vdom 虚拟节点是由js对象节点组成的一个树状结构，通过diff算法对比js对象节点来更新，最后映射到原生的dom中

 

一、真实DOM和其解析流程？

---

    浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting

    第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。

    第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。

    第三步，将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有attach方法，接受样式信息，返回一个render对象(又名renderer)。这些render对象最终会被构建成一颗Render树。

    第四步，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标。

    第五步，Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来。 

    DOM树的构建是文档加载完成开始的？构建DOM数是一个渐进过程，为达到更好用户体验，渲染引擎会尽快将内容显示在屏幕上。它不必等到整个HTML文档解析完毕之后才开始构建render数和布局。

    Render树是DOM树和CSSOM树构建完毕才开始构建的吗？这三个过程在实际进行的时候又不是完全独立，而是会有交叉。会造成一边加载，一遍解析，一遍渲染的工作现象。

    CSS的解析是从右往左逆向解析的(从DOM树的下－上解析比上－下解析效率高)，嵌套标签越多，解析越慢。

                                   

                                                                    webkit渲染引擎工作流程

 

二、JS操作真实DOM的代价！

---

        用我们传统的开发模式，原生JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。

 

三、为什么需要虚拟DOM，它有什么好处?

---

        Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化，

        虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

 

四、实现虚拟dom

---

 例如一个真实的DOM节点。

<div id="container">
  <h1 style="color: red">vdom与html相互转换</h1>
  <p>vdom and html</p>
  <ul>
    <li class="item">item1</li>
	<li class="item">item2</li>
    <li class="item">item3</li>
  </ul>
</div>

用JS来模拟DOM节点实现虚拟DOM。

//创建虚拟dom树实例  (html-->vdom)
const vNodeTree = new VNode("div", {id:'container'},[
  new VNode('h1', {style:'color: red'}, ['vdom与html相互转换']),
  new VNode('p', {}, ['vdom and html']),
  new VNode('ul', {}, [
    new VNode('li', {class:'item'},['item1'])
    new VNode('li', {class:'item'},['item2'])
    new VNode('li', {class:'item'},['item2'])
  ])	
])

const nodeTree = vNodeTree.render();       // 将虚拟dom渲染为真实dom  (vdom-->html)
document.getElementById('realDom').appendChild(nodeTree);      //将真实dom树插入文档中

其中的VNode构造函数（用于创建虚拟dom）方法具体怎么实现的呢？

function VNode(tagName, props, children){
  this.tagName = tagName;
  this.props = props || {};
  this.children = children || [];
}

  第一个参数是节点名（如div），第二个参数是节点的属性（如class），第三个参数是子节点（如ul的li）。其相当于形成了虚拟DOM树。

                                                            

有了虚拟dom对象（vdom）后，最终还需要将其映射成真实DOM 

// 构造函数原型方法：将虚拟DOM渲染成真实DOM     (vdom-->html)
VNode.prototype.render = function(){
			
  const el = document.createElement(this.tagName);  // 创建标签

  const props = this.props;            // 设置标签props属性
    for(const propName in props) {
      setAttr(el, propName, props[propName]);
    }
  
  this.children.forEach((child) => {           // 递归从创建子节点children
    const childNode = (child instanceof VNode)?child.render() : 
      document.createTextNode(child);         //判断是dom节点还是文本节点
	el.appendChild(childNode)
  })

  return el;
}

我们已经完成了创建虚拟DOM并将其映射成真实DOM，这样所有的更新都可以先反应到虚拟DOM上，如何反应？需要用到Diff算法。

 

全部代码

//真实dom
<div id="container">
  <h1 style="color: red">vdom与html相互转换</h1>
  <p>vdom and html</p>
  <ul>
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
  </ul>
</div>


//创建虚拟dom树实例  (html-->vdom)
const vNodeTree = new VNode("div", {id:'container'},[
  new VNode('h1', {style:'color: red'}, ['vdom与html相互转换']),
  new VNode('p', {}, ['vdom and html']),
  new VNode('ul', {}, [
    new VNode('li', {class:'item'},['item1'])
	new VNode('li', {class:'item'},['item2'])
	new VNode('li', {class:'item'},['item2'])
  ])	
])

const nodeTree = vNodeTree.render();   // 将虚拟dom渲染为真实dom  (vdom-->html)
document.getElementById('realDom').appendChild(nodeTree);  //将真实dom树插入文档中

// 构造函数：创建虚拟dom节点
function VNode(tagName, props, children){
  this.tagName = tagName;
  this.props = props || {};
  this.children = children || [];
}

// 构造函数原型方法：将虚拟DOM渲染成真实DOM     (vdom-->html)
VNode.prototype.render = function(){		
  const el = document.createElement(this.tagName);  // 创建标签
  const props = this.props;                     // 设置标签props属性
  for(const propName in props) {
    setAttr(el, propName, props[propName]);
  }

  this.children.forEach((child) => {      // 递归从创建子节点children
    //判断是dom节点还是文本节点
   const childNode=(child instanceof VNode)?child.render():document.createTextNode(child)    
   el.appendChild(childNode)
  })

  return el;
}	

// 设置对象的属性
function setAttr(node, key, value){
  switch (key) {
    case 'style':
      node.style.cssText = value
      break
    case 'value':
      var tagName = node.tagName || ''
      tagName = tagName.toLowerCase()
      if (tagName === 'input' || tagName === 'textarea') {
        node.value = value
      } else {
        node.setAttribute(key, value)
      }
      break
    default:
      node.setAttribute(key, value)
      break
  }
}		

 

 

总结：

• 什么是虚拟DOM（VDOM）
  • virtual dom，虚拟DOM，用JS模似DOM结构。DOM变化的对比，放在JS层来做（图灵完备语言），
• 虚拟DOM的工作原理
  • 初始渲染时，首先将数据渲染为 Virtual DOM，然后由 Virtual DOM 生成 DOM。
  • 数据更新时，渲染得到新的 Virtual DOM，与上一次得到的 Virtual DOM 进行 diff，得到所有需要在 DOM 上进行的变更，然后在 patch 过程中应用到 DOM 上实现UI的同步更新。
• 虚拟DOM的好处
  • 在有多个节点需要刷新的情况下，通过查找VDOM的diff来一次更新，所以只需要操作一次DOM。
  • 提高重绘性能。减少DOM操作，js运行效率高。

 

 

 

 

参考：vue核心之虚拟DOM(vdom)   

 【Vue】源码分析--vdom与html的相互转换 

何为Virtual DOM（VDOM）   

vdom