- DOM 常用 API
- 虚拟 DOM：浏览器渲染过程 -> 真实 DOM 和虚拟 DOM -> Diff 算法
DOM常用API
1. 节点创建型
2. 页面修改型
3. 节点查询型
4. 节点关系型
5. 元素属性型
6. 元素样式型
虚拟DOM
1. 浏览器渲染过程
解析html->构建DOM树->布局render树->渲染render树
对于虚拟DOM下文小编针对snabbdom.js来分析
snabbdom做了什么事呢
1. compile 把真实的DOM编译成VNode
2. diff 对比oldNode和newNode的区别
3. patch 根据步骤2, 把不同的虚拟DOM渲染到真的的DOM上
下面我们对diff算法来细细拆分下
英文对应:
oldch: 旧DOM树数组
newch: 新DOM树数组
oldSNode: 旧DOM树头部
oldENode: 旧DOM树尾部
newSNode: 新DOM树头部
newENode: 新DOM树尾部
diff算法核心比对步骤
1. oldSNode是否为null,如果为null,则进行下一轮比较
2. oldENode是否为null,如果为null,则进行下一轮比较
3. newSNode是否为null,如果为null,则进行下一轮比较
4. newENode是否为null,如果为null,则进行下一轮比较
5. oldSNode = newSNode,若相同则进行下一轮比较
6. oldENode = newENode, 若相同则进行下一轮比较
7. oldSNode = newENode,若相同则进行下一轮比较
8. oldENode = newSNode, 若相同则进行下一轮比较
9. 如果都不符合以上条件, 如果oldch没找到newch里有则新增, 如果oldch有,newch没有则删除
参考文章: jianshu.com/p/f45463e7be20
