对前端中的虚拟dom和diff算法的一些理解

对前端中的虚拟dom和diff算法的一些理解

一、虚拟dom是什么？

我们先看一下下面的这个需求：

有一个变量 count 的初始值时 0，经过一系列运算，得到10001，然后将结果写入box中

我们可能会这么写：

 var box = document.querySelector( '.box' )
 var count = 0 ;
  console.time( 'a' )
  for( var i = 0 ; i < 10001 ; i++ ){
    count ++ 
    box.innerHTML = count
  }
  console.timeEnd( 'a' ) // a字符输出花费的时间

我们也可会这么写：

var count = 0 
  console.time( 'b' )
  for( var i = 0 ; i < 10001 ; i++ ){
    count ++ 
  }

  box.innerHTML = count 

  console.timeEnd( 'b' )

• 对比以上 a b 输出花费的时间,我们可以从以上小实验得出一个结论：
• 更少的dom操作会更加减少时间的花费及减少性能损耗
• 我们应该先 操作数据 再去操作dom

根据以上结论，前端慢慢的将一个 概念引入在 框架中，就是虚拟dom

那么虚拟dom究竟是什么呢？

它是一个Object对象模型，用来模拟真实dom节点的结构

二、虚拟dom的使用基本流程

我们再来看下面这个需求：

如果将来我想再增加一个li，里的内容为 ：Mike, 再增加10个li,内容为： xxx

我们根据这个需求来看下vdom是如何模拟真实dom的（vdom的使用流程） ：

// 1.获取数据（ ajax   fetch ）
    var data = {
      id: 1,
      name: 'Mike'
    }

  // 2. 创建vdom
    /*   <div class = "box">
        <ul>
          <li> {{ data.name }} </li>
        </ul>
      </div> */

  // 3. 通过render函数解析jsx，将其转换成  vdom结构
    var vdom = {
      tag: 'div',
      attr: {
        className: 'box'
      },
      content: [
        {
          tag: 'ul',
          content: [
            {
              tag: 'li',
              content: data.name
            }
          ]
        }
      ]
    }

  // 4. 将vdom渲染成真实dom
    // render函数

  // 5. 数据更改了， data.name = 'Lucy'

    data.name = 'Lucy'

    vdom = {
      tag: 'div',
      attr: {
        className: 'box'
      },
      content: [
        {
          tag: 'ul',
          content: [
            {
              tag: 'li',
              content: data.name
            }
          ]
        }
      ]
    }

    // 6. 使用diff算法比对两次vdom,生成patch对象

     /*  
      diff算法是比较两个文件的差异，并将两个文件不同之处，将这个不同之处生成一个补丁对象（patch） 
      diff算法来源后端
      前端将其应用于虚拟dom的diff算法
      vue中将 虚拟dom的diff算法放在了   patch.js文件中 
        使用js来进行两个对象的比较（ vdom 对象模型）
      diff算法是同级比较
        给每一个层级打一个标记，这个标记是一个数字（ 这个数字就是 key  ）
     */

    // 7. 根据key将patch对象渲染到页面中改变的结构上，而其他没有改变的地方是不做任何修改的（ 虚拟dom的惰性原则 ）

三、diff算法是什么？

• diff算法是比较两个文件的差异，并将两个文件不同之处，将这个不同之处生成一个补丁对象（patch）

• diff算法来源后端

• 前端将其应用于虚拟dom的diff算法

• vue中将 虚拟dom的diff算法放在了 patch.js文件中

​ 使用js来进行两个对象的比较（ vdom 对象模型）

• diff算法是同级比较

​ 给每一个层级打一个标记，这个标记是一个数字（ 这个数字就是 key ）

四、diff算法运行结束之后，返回什么？

返回的是补丁对象patch