虚拟DOM

virtual dom (虚拟DOM)

• 简称 vdom ，它是vue和react的核心。
• vdom比较独立，使用也比较简单。
• 如果面试问到问到vue和react的实现，免不了问vdom

相关问题

• vdom是什么？

1. vdom是virtual dom的缩写，就是虚拟DOM。
2. 用JS来模拟DOM结构。(既然不是真的DOM，那么只能通过其他方式来模拟DOM，前端就只能通过JS了，肯定不能用css)
3. DOM变化的对比，放在JS层来做(只能放在JS层来做，因为前端语言中只有JS是图灵完备的语言，图灵完备语言指的是能实现各种逻辑的语言)
4. 目的是提高重绘性能

// 真实的DOM结构
 

      
Item1
      
Item2
 

//JS模拟DOM结构
{
  tag: 'ul',
  attrs: {
    id:'list'
  },
  children: [
    {
      tag: 'li',
      attrs: {className:'item'},
      children:['item1']
    },
    {
      tag: 'li',
      attrs: {className:'item'},   // 这里之所以用className而不是class是因为class在JS里是关键字
      children:['item2']
    },
  ]
}

假设有这样一个场景，我们有一个数据，页面加载完的时候，把这个数据以表格的形式渲染出来，然后点击按钮的时候，会修改数据，数据修改之后，会重新渲染表格。那么要怎么来实现这些需求呢？

首先是jQuery的实现方式

  
  
  
  


  


  
  change

  

下边是渲染的页面

image.png

当我们点击change按钮的时候，我们只改变了data[0]的name和data[1]的age，也就是说只改变了部分数据，但是我们要更新这个表格，确要清空container容器，重新创建表格，再渲染表格。要知道对于浏览器来说，DOM操作是非常耗费性能的。

为什么说DOM操作耗费性能呢？我们可以看一个例子

    //我们可以遍历一下浏览器创建的DOM节点，看看都有什么
    var div = document.createElement('div')
    var item ,result = ''
    for(item in div){
      result += '|'+item
    }

    console.log(result)

image.png

由此可以看到，浏览器创建的DOM节点，属性非常多，是非常复杂的，所以我们要尽量少的进行DOM操作，尽量多的用JS来代替DOM的操作

• 为什么会存在vdom
  DOM操作是非常昂贵的，将DOM对比操作放在JS中提高效率，所以我们想要尽量减少DOM操作，就需要知道哪些DOM操作是没有必要进行的，该怎么判断呢？ 比如我们上边例子中要修改DOM，虽然只是修改了部分，但是我们确清空了整个容器，实际上，我们完全可以对比一下，我们修改后的DOM 和修改前的DOM ，有一部分是每变的，这没变的部分是没有必要再进行DOM操作的，我们只需要对变化的部分进行DOM操作就可以了。
  而这个对比的过程，就需要JS来完成了。因为涉及到逻辑预算，前端语言只有JS可以满足，而且JS运行效率高。
• vdom如何应用，核心API是什么？
  如何使用：就拿snabbdom库的用法来举例就可以
  核心API：

1. h('<标签名>',{...属性...},[子元素...]) ; h('<标签名>',{...属性...},'...')
2. patch(container,vnode); patch(vnode,newVnode)
   要知道，vdom是一个统称的技术实现，能实现vdom的库很多，snabbdom就是其中一个。该怎么使用snabbdom呢？

  


  
  change


  
  
  
  
  
  
  

image.png

初次渲染完成以后，我们去点击按钮，然后去修改数据，第一个li我们不变，文本还是item1,第二个li的文本我们变为itemB,然后新增了第三个li，文本为item3。按照预期，第一个li是不会重新渲染的。

    var btn = document.getElementById('btn-change')
    btn.addEventListener('click',function(){
      var newVnode = h('ul#list',{},[
        h('li.item',{},'item1'),
        h('li.item',{},'itemB'),
        h('li.item',{},'item3')
      ])

       // patch函数的第二种用法
       // 接受两个桉树，第一个参数是旧的vnode,第二个参数是新的vnode;然后对这两个vnode进行对比。
       // 对比过后，对更新的部分进行渲染，没有变的部分则不管
      patch(vnode,newVnode)
    })

点击change按钮

image.png

我们用snabbdom重新写一下之前的列表例子

  


  
  change


  
  
  
  
  
  
  

初次渲染

image.png

点击按钮，修改数据，再次渲染。我们从截图上可以看到，只有两个地方闪烁了(也就是被重新渲染了)

image.png

我们之前用jquery来做这个列表的时候，一点击按钮，是整个table全部都重新渲染了，而现在用vdom,只修改了数据变动的两个地方。数据没有变化的地方，DOM也没有重新渲染。减少了很多DOM操作。性能自然有所提升

介绍一下 diff 算法

• 什么是diff算法？
  我们创建两个txt文件 log1,log2,然后控制台输入linux很古老的一个命令diff,就可以看到这两个文本文件的不同之处
  
  image.png
  
  
  image.png
  
  还有就是可以用git diff命令，来查看git管理的两个版本修改和修改后的差异。我们可以先git status看下改了哪些文件，然后再git diff xxx文件名，就可以看到具体哪些内容修改过
  
  image.png

网上的 diff对比工具

image.png

diff算法，并不是一个由vue啊,或者react啊或者虚拟DOM提出的一个新概念，而是一个早已存在的，对比文本文件差异的东西。现在只不过是被用到了虚拟dom中，用来对比两个虚拟DOM的节点而已，但是对比的原理是一样的，都是找出两者的差异。

• 去繁就简

1. diff算法非常复杂，实现难度很大，源码量很大
2. 所以，弄明白核心流程，不要死扣细节
3. 面试的时候，基本关系的是核心流程

• vdom为什么用diff算法

1. DOM操作时昂贵的，因此尽量减少DOM操作。
2. 找出本次DOM必须更新的节点来更新，其他的不更新
3. 这个找出的过程就需要diff算法
   一句话 diff算法，在vdom中的真正用途是：找出前后两个vdom之间的差异，然后更新这些差异，其他的不更新。

diff算法的实现流程

• 我们重点关注patch函数，之前我们说过patch函数的两种用法

1. 初次渲染的时候 patch(container,vnode) 直接把vnode替代容器节点
2. 经过初次渲染后，patch(vnode，newVnode) ,vnode发生了变化后,把新的vnode和旧的vnode传入函数，函数会进行对比，把对比出的差异更新到之前的vnode中

先说第一种情况，patch会把虚拟节点变为真实节点后，才会渲染到空的容器中，那么patch是如何让左边的虚拟节点，变为右边的真实的节点呢？

image.png

我们可以写一个函数，大概模拟它的过程,这个函数并不能执行，因为真实的vnode结构可能会非常复杂。

function createElement(vnode) {
  var tag = vnode.tag,
  var attrs = vnode.attrs || []
  var children = vnode.children || []

  if (!tag) {
    return null
  }

  // 创建真实的DOM元素
  var elem = document.createElement(tag)
  // 属性
  var attrName
  // for in遍历，都需要hasOwnProperty判断是否是自己的属性
  for (attrName in attrs) {
    if (attrs.hasOwnProperty(attrName)) {
      // 给elem添加属性
      elem.setAttribute(attrName,attrs[attrName])
    }
  }

  // 子元素
  children.forEach(function (childVnode) {
    // 给elem添加子元素
    elem.appendChild(createElement(childVnode))  //递归
  })

  // 返回真实的DOM元素
  return elem
}

第一种情况下，patch函数把vnode变为真实node,渲染到空容器种，渲染之后，vnode和node就会有一个对应关系，vnode也会继续存在，因为后边更新的时候，新的vnode还要和旧的vnode进行比对，要知道vnode和真实node的对应关系。如下图，tag:ul的vnode 对应右边的ul node，children里的tag:li vnode 对应右边的li node。这个对应关系很关键，因为我们执行patch函数的时候，最终是要找出区别，然后更新到真实的DOM节点上，所以必须要知道更新到哪个DOM节点才行，否则只知道差异，但是不知道更新到哪里是不行的

image.png

假如我们现在的新旧vnode如下图

image.png

更清晰的对比

image.png

可以看出，newvnode比vnode的变化在于 item2变为了item222,新增了item3。下边我们还是写一个模拟函数，大体描述一下新旧vnode的替换流程

function updateChildren(vnode, newVnode) {
  var children = vnode.children || []
  var newChildren = newVnode.children || []

  children.forEach(function (childVnode, index) {
    var newChildVnode = newChildren[index]
    if (childVnode.tag === newChildVnode.tag) {
      // 如果新老vnode的tag相等，就进行深层次对比，递归
      updateChildren(childVnode,newChildVnode)
    } else {
      // 如果标签不一样了，就替换
      replaceNode(childVnode,newChildVnode)
    }
  })
}

// 这个是替换函数，当对比出新老vnode的差异后，就用新的替换旧的 
function replaceNode(vnode, newVnode) {
  var elem = vnode.elem  // 真实的DOM节点
  var newElem = createElement(newVnode)

  // 替换
}

当然，上边的模拟函数是我们建立在vnode很简单，只考虑children有所不同的情况，真实情况要复杂的多

• 节点的新增和删除
• 节点的重新排序
• 节点属性，样式，事件绑定
• 如何极致压榨性能
• ...

总结

• 介绍一下diff算法。diff算法是linux的基础命令。是为了对比文本文件的差异。
• vdom中的diff算法算是diff算法的一个变种，是为了对比JS对象，vdom应用diff算法是为了找出更新的节点
• diff算法的实现，主要关注patch(container,vnode),patch(vnode,newVnode)
• 核心逻辑就是 createElement,updateChildren