虚拟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结构
 <ul id="list">
      <li class="item">Item1</li>
      <li class="item">Item2</li>
 </ul>

//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的实现方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>演示页面</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
  <div id="container">

  </div>
  <button id="btn-change">change</button>

  <script type="text/javascript">
    var data = [
        {
          name: '张三',
          age: 20,
          address:'北京'
        },
        {
          name: '李四',
          age: 25,
          address:'上海'
        },
        {
          name: '王五',
          age: 30,
          address:'广州'
        }
    ]

    // 点击按钮，修改数据，重新渲染表格
    $('#btn-change').click(function(){
      data[0].name = '张三哥'
      data[1].age = 28
      // re-render 再次渲染
      render(data)
    })

    // 渲染函数
    function render(data){
      var $container = $('#container')
      // 渲染函数，一定要清空容器，否则每次点击，都要在原来的基础上增加内容了
      $container.html('')
      // 创建表格，并填充表格
      var table = $('<table></table>')
      // 表头
      table.append($('<tr><th>name</th><th>age</th><th>address</th></tr>'))
      // 遍历数据，把数据放进表格
      data.forEach(function(item){
        table.append('<tr><td>'+item.name+'</td><td>'+item.age+'</td><td>'+item.address+'</td><tr>')
      })
      // 把表格放入容器
      $container.append(table)
    }

    // 页面加载完立即执行（初次渲染）
    render(data)
  </script>
</body>
</html>

下边是渲染的页面

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呢？
<body>
  <div id="container">

  </div>
  <button id="btn-change">change</button>


  <script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.1/snabbdom.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.1/snabbdom-class.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.1/snabbdom-props.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.1/snabbdom-style.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.1/snabbdom-eventlisteners.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.1/h.js"></script>
  <script type="text/javascript">
    // cdn 引入snabbdom后，全局对象上就有了snabbdom
    var snabbdom = window.snabbdom

    // snabbdom有两个核心的函数，h 和 patch

    //定义patch 函数 (补丁函数)
    var patch = snabbdom.init([  //用所选模块初始化补丁函数
      snabbdom_class,   // 轻松切换类
      snabbdom_props,   // 用于设置DOM元素的属性
      snabbdom_style,   // 处理元素的样式，并支持动画
      // snabbdom_eventListeners  // 附加事件侦听器
    ])

    // 定义h函数 （用于创建vNode的助手函数,返回一个vnode）
    // vnode 虚拟节点，对应node,js模拟的node
    // h 函数的参数有3个，第一个元素类型(可以跟ID和calss);第二个参数是元素属性;第三个参数是元素的子节点(如果多个子节点，就是数组，如果单个子节点，就文本字符串)
    var h = snabbdom.h

    var container = document.getElementById('container')

    var vnode = h('ul#list',{},[
      h('li.item',{},'item1'),
      h('li.item',{},'item2')
    ])

    // patch函数的第一种用法
    // 接受两个参数，第一个参数是容器，第二个参数是虚拟节点vnode;作用就是用vnode的内容替换container节点
    
    patch(container,vnode)
  </script>
</body>
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重新写一下之前的列表例子
<body>
  <div id="container">

  </div>
  <button id="btn-change">change</button>


  <script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.1/snabbdom.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.1/snabbdom-class.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.1/snabbdom-props.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.1/snabbdom-style.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.1/snabbdom-eventlisteners.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/snabbdom/0.7.1/h.js"></script>
  <script type="text/javascript">
    var snabbdom = window.snabbdom
    var patch = snabbdom.init([  //用所选模块初始化补丁函数
      snabbdom_class,   // 轻松切换类
      snabbdom_props,   // 用于设置DOM元素的属性
      snabbdom_style,   // 处理元素的样式，并支持动画
      // snabbdom_eventListeners  // 附加事件侦听器
    ])

    var h = snabbdom.h
    var data = [
        {
          name: '张三',
          age: 20,
          address:'北京'
        },
        {
          name: '李四',
          age: 25,
          address:'上海'
        },
        {
          name: '王五',
          age: 30,
          address:'广州'
        }
    ]

    data.unshift({
      name:'姓名',
      age:'年龄',
      address:'地址'
    })

    var container = document.getElementById('container')
    var vnode;
    function render(data){
      var newVnode = h('table',{},data.map(function(item){
        var tds = []
        var i 
        for(i in item){
          if(item.hasOwnProperty(i)){
            tds.push(
              h('td',{},item[i]+'')
            )
          }
        }
        return h('tr',{},tds)
      }))
      
      // 如果vnode存在，说明以及渲染过了，那就把新老vnode进行比对，然后重新渲染变化的部分
      if(vnode){
        patch(vnode,newVnode)
      }else{  // vnode不存在，就是初次渲染，那就把生成的vnode替换掉container节点就好了
        patch(container,newVnode)
      }

      // 存储当前vnode结果
      vnode = newVnode
    }

    // 初次渲染
    render(data)


    var btn = document.getElementById('btn-change')
    btn.addEventListener('click',function(){
      data[1].age = 50
      data[3].address = '杭州'
      render(data)
    })

  </script>
</body>

初次渲染


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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,921评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,635评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,393评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,836评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,833评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,685评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,043评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,694评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,671评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,424评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,027评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2赞 351
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2赞 343