双端diff算法

vue和react都是基于vdom的前端框架, 组件渲染会返回vdom,渲染器再把vdom通过增删改查的api同步给dom

当再次渲染时 会产生新的vdom树,将新旧两棵vdom进行差异对比,通过增删改查的api进行更新

对比两颗dom树,找出有差异部分的算法就叫做Diff算法

vue采用了双端diff算法

正常diff算法的时间复杂度为:

1.当前树和另一个树每个节点进行对比 复杂度为n

2.对有变化节点进行增删改查 复杂度为n

3.每个节点都需要执行 复杂度为n

所以正常diff算法的时间复杂度为O(n^3) // n * n * n

n为1000时就需要执行100w次 所以前端框架规定了原则 如果新旧节点type不一样就不再进行对比

patch函数

比较vnode的key 和 selter标签

如果相同就认为是同一个节点 不再深度比较 就只做更新

如果有一个不同创建一个新的dom元素插入新的dom元素(用insertbefore方法) 移除老的dom元素

patch函数使用场景 首次渲染时

patch(第一个参数, 第二个参数)
// 如果第一个参数是真实dom就会创建一个空的vnode元素并且关联一个dom元素
// 然后对第一个参数和第二个参数进行比较, 如果是同一个vnode元素就使用patch更新 如果不是
就创建一个新的dom元素 插入新的元素 移除老的的元素

本文系作者 @ 原创发布在 IT梦。未经许可,禁止转载。

喜欢()
0 0 投票数
Article Rating
订阅评论
提醒
guest
0 评论
内联反馈
查看所有评论
热门搜索
91 文章
0 评论
2 喜欢
Top
0
希望看到您的想法,请您发表评论x