diff算法

需要知道虚拟dom和真实dom的区别

真实

<ul id="list">
    <li class="item">哈哈</li>
    <li class="item">呵呵</li>
    <li class="item">嘿嘿</li>
</ul>

虚拟的

{
    sel: 'div',// 表述标签，如p、sapn
    data: {
        
    },
    children: undefined,
    text: 'virtual dom', //标签内的文本，
    ele: undefined,
    key: undefined
}

什么是diff算法

diff是一种对比算法，对比的是新旧虚拟dom，对比是哪个虚拟节点更改了，找出这个虚拟dom节点，并只更新这个虚拟节点的对应真实节点，而不更新其他数据没发生改变的节点，实现精准地更新真实dom，从而提高效率。

使用虚拟dom算法的损耗计算： 总损耗 = 虚拟DOM增删改+（与Diff算法效率有关）真实DOM差异增删改+（较少的节点）排版与重绘

直接操作真实DOM的损耗计算：总损耗 = 真实DOM完全增删改+（可能较多的节点）排版与重绘