vdom VS diff算法 （王者级别)

vdom VS diff算法 （王者级别)

需求： 有一个变量 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字符输出花费的时间

    // 我们肯定会这么写
  count = 0 
  console.time( 'b' )
  for( var i = 0 ; i < 10001 ; i++ ){
    count ++ 
  }

  box.innerHTML = count 

  console.timeEnd( 'b' )

对比以上 a b 输出花费的时间,得出结论：
更少的dom操作会更加减少 时间花费 减少性能损耗

我们应该先 操作数据  再去操作dom
由以上结论慢慢的前端将一个 概念引入在 框架中    虚拟dom 

1. 虚拟dom是什么？

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

需求： vdom如何模拟真实dom，如果将来我想在增加一个li，里的内容为 ： 这里是 CDNS

普通：

<div class = "box">
    <ul>
        <li> 这里是1903 </li>
    </ul>
</div>

var list = document.querySelector( '.list' )
var li = document.createElement( 'LI' )
li.innerHTML = ' 这里是 CDNS '

list.appendChild( li )

1. 虚拟dom的使用基本流程
   • 1.获取数据

var data = {
      id: 1,
      name: '1903'
    }

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 = ‘骏哥’

 data.name = '骏哥'

 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的惰性原则 ）

3. 什么是jsx?

1. jsx javascript + xml

4. diff算法是什么？

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

5. diff算法运行结束之后，返回什么？

返回一个补丁对象（patch）