需要知道虚拟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完全增删改+(可能较多的节点)排版与重绘