美文网首页JS
虚拟DOM

虚拟DOM

作者: 泡杯感冒灵 | 来源:发表于2020-08-03 13:50 被阅读0次

    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

    相关文章

      网友评论

        本文标题：虚拟DOM

        本文链接：https://www.haomeiwen.com/subject/sebsrktx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        JS

        关于我们|服务条款|联系我们|虚拟DOM|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！