Vue3diff算法原理和优化，CSS字体样式值

2401_84098058

于 2024-04-04 16:33:34 发布

阅读量573

点赞数 16

分类专栏：程序员文章标签：算法 css 前端

本文链接：https://blog.csdn.net/2401_84098058/article/details/137377242

版权

程序员专栏收录该内容

242 篇文章 0 订阅

订阅专栏

Vue2.x diff算法

Vue2.x diff算法原理

传统diff算法通过循环递归对节点进行依次对比效率低下，算法复杂度达到O(N^{3)，主要原因在于其追求完全比对和最小修改，而React、Vue则是放弃了完全比对及最小修改，才实现从O(N}3) => O(N)。

优化措施有：

「分层diff」：不考虑跨层级移动节点，让新旧两个VDOM树的比对无需循环递归（复杂度大幅优化，直接下降一个数量级的首要条件）。这个前提也是Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。

在同层节点中，采用了**「双端比较的算法」**过程可以概括为：oldCh和newCh各有两个头尾的变量StartIdx和EndIdx，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了key，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦StartIdx>EndIdx表明oldCh和newCh至少有一个已经遍历完了，就会结束比较；

当发生以下情况则跳过比对，变为插入或删除操作：

「组件的Type(Tagname)不一致」，原因是绝大多数情况拥有相同type的两个组件将会生成相似的树形结构，拥有不同type的两个组件将会生成不同的树形结构，所以type不一致可以放弃继续比对。
「列表组件的Key不一致」，旧树中无新Key或反之。毕竟key是元素的身份id，能直接对应上是否是同一个节点。
对触发了getter/setter 的组件进行diff，精准减少diff范围

Vue3.0 diff

diff痛点

vue2.x中的虚拟dom是进行**「全量的对比」，在运行时会对所有节点生成一个虚拟节点树，当页面数据发生变更好，会遍历判断virtual dom所有节点（包括一些不会变化的节点）有没有发生变化；虽然说diff算法确实减少了多DOM节点的直接操作，但是这个「减少是有成本的」，如果是复杂的大型项目，必然存在很复杂的父子关系的VNode,「而Vue2.x的diff算法，会不断地递归调用 patchVNode，不断堆叠而成的几毫秒，最终就会造成 VNode 更新缓慢」**。

那么Vue3.0是如何解决这些问题的呢

动静结合 PatchFlag

来个???：

{msg}

静态文字

在Vue3.0中，在这个模版编译时，编译器会在动态标签末尾加上 /* Text*/ PatchFlag。**「也就是在生成VNode的时候，同时打上标记，在这个基础上再进行核心的diff算法」**并且 PatchFlag 会标识动态的属性类型有哪些，比如这里的TEXT 表示只有节点中的文字是动态的。而patchFlag的类型也很多。这里直接引用一张图片。

其中大致可以分为两类：

当 patchFlag 的值「大于」 0 时，代表所对应的元素在 patchVNode 时或 render 时是可以被优化生成或更新的。
当 patchFlag 的值「小于」 0 时，代表所对应的元素在 patchVNode 时，是需要被 full diff，即进行递归遍历 VNode tree 的比较更新过程。

看源码：

export function render(_ctx, _cache, $p ro p s,$ setup, $d a t a,$ options) {

return (_openBlock(), _createBlock(“div”, null, [

_createVNode(“p”, null, “‘HelloWorld’”),

_createVNode(“p”, null, _toDisplayString(_ctx.msg), 1 /* TEXT */)

]))

}

这里的_createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)就是对变量节点进行标记。

总结：「Vue3.0对于不参与更新的元素，做静态标记并提示，只会被创建一次，在渲染时直接复用。」

其中还有cacheHandlers（事件侦听器缓存），这里就不讲了。

diff算法源码解析

以数组为栗子：

newNode:[a,b,c,d,e,f,g]

oldNode:[a,b,c,h,i,j,f,g]

步骤1:「从首部比较new vnode 和old vnode」,如果碰到不同的节点，跳出循环，否则继续，直到一方遍历完成；

由此我们得到newNode和oldNode首部相同的片段为 a,b,c，

源码：

const patchKeyedChildren = (

c1,

c2,

container,

parentAnchor,

parentComponent,

parentSuspense,

isSVG,

optimized

) => {

let i = 0;

const l2 = c2.length

let e1 = c1.length - 1

let e2 = c2.length - 1

while (i <= e1 && i <= e2) {

const n1 = c1[i]

const n2 = c2[i]

if (isSameVNodeType(n1, n2)) {

patch(

n1,

n2,

container,

parentAnchor,

parentComponent,

parentSuspense,

isSVG,

optimized

)

} else {

break

}

i++

}

//这里的isSameVNodeType

export function isSameVNodeType(n1: VNode, n2: VNode): boolean {

// 比较类型和key是否一致（）

return n1.type === n2.type && n1.key === n2.key

}

「Tip」:这里的isSameVNodeType从**「type和key」**，因此key作为唯一值是非常重要的，这也就解释了 v-for循环遍历不能用index作为key的原因。

步骤2:「从尾部比较new vnode 和old vnode」,如果碰到不同的节点，跳出循环，否则继续，直到一方遍历完成；

由此我们得到newNode和oldNode尾部相同的片段为 f,g

while (i <= e1 && i <= e2) {

const n1 = c1[e1]

const n2 = c2[e2]

if (isSameVNodeType(n1, n2)) {

patch(

n1,

n2,

container,

parentAnchor,

parentComponent,

parentSuspense,

isSVG,

optimized

)

} else {

break

}

e1–

e2–

}

在遍历过程中满足i > e1 && i < e2，说明 「仅有节点新增」

if (i > e1) {

if (i <= e2) {

const nextPos = e2 + 1;

const anchor = nextPos < l2 ? c2[nextPos] : parentAnchor

while (i <= e2) {

patch(

null,

c2[i],

container,

anchor,

parentComponent,

parentSuspense,

isSVG

)

i++

}

} else if {

…

} else {

…

}

在遍历过程中满足i > e1 && i > e2，说明 「仅有节点移除」

if (i > e1) {

} else if (i > e2) {

while (i <= e1) {

unmount(c1[i], parentComponent, parentSuspense, true)

i++

}

} else {

}

步骤3: 「节点移动、新增或删除」

经过以上步骤，剩下的就是不确定的元素，那么diff算法将遍历所有的new node，将key和索引存在keyToNewIndexMap中，为map解构，

if (i > e1) {

} else if (i > e2) {

} else {

const s1 = i

const s2 = i

const keyToNewIndexMap = new Map()

for (i = s2; i <= e2; i++) {

const nextChild = c2[i]

if (nextChild.key !== null) {

keyToNewIndexMap.set(nextChild.key, i)

}

接下来

for (i = s1; i <= e1; i++) { /* 开始遍历老节点 */

const prevChild = c1[i]

if (patched >= toBePatched) { /* 已经patch数量大于等于， */

/* ① 如果 toBePatched新的节点数量为0 ，那么统一卸载老的节点 */

unmount(prevChild, parentComponent, parentSuspense, true)

continue

}

let newIndex

/* ② 如果,老节点的key存在，通过key找到对应的index */

if (prevChild.key != null) {

newIndex = keyToNewIndexMap.get(prevChild.key)

} else { /* ③ 如果,老节点的key不存在 */

for (j = s2; j <= e2; j++) { /* 遍历剩下的所有新节点 */

if (

newIndexToOldIndexMap[j - s2] === 0 && /* newIndexToOldIndexMap[j - s2] === 0 新节点没有被patch */

isSameVNodeType(prevChild, c2[j] as VNode)

) { /* 如果找到与当前老节点对应的新节点那么，将新节点的索引，赋值给newIndex */

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

Vue3diff算法原理和优化，CSS字体样式值

Vue2.x diff算法

Vue2.x diff算法原理

Vue3.0 diff

diff痛点

动静结合 PatchFlag

diff算法源码解析

更多面试题

更多面试题