虚拟DOM和diff算法
1. DOM操作非常耗费性能
以前用jquery,可以自行控制DOM操作的时机，手动调整
Vue和React是数据驱动视图，如何有效控制DOM操作?
2. 有了一定复杂度，想减少计算次数比较难
能不能把计算，更多的转移为js计算？因为js执行速度很快
vdom-->用js模拟DOM结构，计算出最小的变更，操作DOM
<div class="aaa" id="div1">
<p>vdom</p>
<ul style="font-size:20px">
<li>a</li>
</ul>
</div> 用js模拟DOM结构，上面的html转成下面的结构
{
tag:‘div‘,
props:{
className:‘aaa‘,
id:‘div‘
},
children:[{
tag:‘p‘,
children:‘vdom‘
},{
tag:‘ul‘,
props:{style:‘font-size:20px‘},
children:[{
}]
}]
} 3.通过snabbdom学习vdom
生成vnode:h函数:传入tag元素、属性、子节点等，返回vnode数据结构return { sel, data, children, text, elm, key };
patch函数-->patch(vnode, newVnode),对比tag,对比tag与key,对比children
updateChidren==>更新children==>key的重要性
const snabbdom = window.snabbdom
// 定义 patch
const patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners
])
// 定义 h
const h = snabbdom.h
const container = document.getElementById(‘container‘)
// 生成 vnode
const vnode = h(‘ul#list‘, {}, [
h(‘li.item‘, {}, ‘Item 1‘),
h(‘li.item‘, {}, ‘Item 2‘)
])
patch(container, vnode)
document.getElementById(‘btn-change‘).addEventListener(‘click‘, () => {
// 生成 newVnode
const newVnode = h(‘ul#list‘, {}, [
h(‘li.item‘, {}, ‘Item 1‘),
h(‘li.item‘, {}, ‘Item B‘),
h(‘li.item‘, {}, ‘Item 3‘)
])
patch(vnode, newVnode)
}) 4. diff算法-->最大程度减少渲染的范围，通过把DOM通过js去模拟，找出最小变更和范围
dif算法是vdom中最核心和最关键的部分
diff算法能在日常使用vue React中体现出来（如key）
5.diff算法概述
diff即对比，是一个广泛的概念，如 linux diff,git diff
两个js做对比
两棵树做diff,这里的vdom diff
6.树diff的时间复杂度 O(n^3)
1.遍历第一棵树
2.遍及第二棵树
3.排序
三次循环，1000个节点，要计算1亿次，算法不可用
===>
优化时间复杂度到O(n)
1.0 只比较同一层级，不跨级比较
2.0 tag不同，则直接删掉重建，不深度比较
3.0 tag和key,两者都相同，则认为是相同节点，不再深度比较
7.diff算法源码-->生成vnode:h函数:传入tag元素、属性、子节点等，返回vnode数据结构return { sel, data, children, text, elm, key };
patch函数-->patch(vnode, newVnode),对比tag,对比tag与key,对比children
updateChidren==>更新children==>key的重要性
8.vdom和diff算法总结
细节不重要，核心概念很重要：h,vnode,patch,diff,key
相关推荐
星星有所不知 2020-10-12
zuncle 2020-09-28
huaoa 2020-09-14
北京老苏 2020-08-17
luvhl 2020-08-17
Kakoola 2020-07-29
drdrsky 2020-07-29
书虫媛 2020-07-08
liaoxuewu 2020-07-08
SIMONDOMAIN 2020-07-08
爱读书的旅行者 2020-07-07
tianzyc 2020-07-04
Lophole 2020-06-28
liaoxuewu 2020-06-26
ApeLife技术 2020-06-26
北京老苏 2020-06-25
Lophole 2020-06-14
SIMONDOMAIN 2020-06-14