浅谈vue3的编译优化

站长

2022年11月19日 12:42 · 阅读数 20

编译优化：编译器将模版编译为渲染函数的过程中，尽可能地提取关键信息，并以此指导生成最优代码的过程。
优化的方向：尽可能地区分动态内容和静态内容，并针对不同的内容采用不同的优化策略

1.动态节点收集与补丁标志

1.1 传统diff算法的问题

比对新旧两棵虚拟DOM树的时候，总是要按照虚拟DOM的层级结构“一层一层”地遍历

<div id="foo">
    <p class="bar">{{ text }}</p>
</div>

上面这段代码中，当响应式数据text值发生变化的时候，最高效的更新方式是直接设置p标签的文本内容

传统Diff算法做不到如此高效，当text值发生变化的时候，会产生一颗新的虚拟DOM树，对比新旧虚拟DOM过程如下:

对比div节点，以及该节点的属性和子节点
对比p节点，以及该节点的属性和子节点
对比p节点的文本子节点，如果文本子节点的内容变了，则更新，否则什么都不做

可以发现，有很多无意义的对比操作。

总结：

传统diff算法的问题：无法利用编译时提取到的任何关键信息，导致渲染器在运行时不会去做相关的优化。
vue3的编译器会将编译得到的关键信息“附着”在它生成的虚拟DOM上，传递给渲染器，执行“快捷路径”。

1.2 Block 与 PatchFlags

传统Diff算法无法避免新旧虚拟DOM树间无用的比较操作，是因为运行时得不到足够的关键信息，从而无法区分动态内容和静态内容。换句话说，只要运行时能够区分动态内容和静态内容，就可以实现极简的优化策略

举个例子：

<div>
    <div>foo</div>
    <p>{{ bar }}</p>
</div>

只有 {{ bar }}是动态的内容。理想情况下，当数据bar的值变化时，只需要更新p标签的文本节点即可。为了实现这个目标，需要提供信息给运行时

// 传统虚拟DOM描述
const vnode = {
  tag: 'div',
  children: [
    { tag: 'div', children: 'foo' },
    { tag: 'p', children: ctx.bar },
  ]
}

// 编译优化后
const vnode = {
  tag: 'div',
  children: [
    { tag: 'div', children: 'foo' },
    { tag: 'p', children: ctx.bar, patchFlag: 1 }, // 这是动态节点
  ]
}

可以发现，虚拟节点多了一个额外的属性，即 patchFlag（补丁标志），存在该属性，就认为是动态节点

patchFlag（补丁标志）可以理解为一系列的数字标记，含义如下

const PatchFlags = {
  TEXT: 1, // 代表节点有动态的 textContent
  CLASS: 2, // 代表元素有动态的 class 绑定
  STYLE: 3
  // 其他。。。
}

可以在虚拟节点的创建阶段，把它的动态子节点提取出来，并存储到该虚拟节点的 dynamicChildren 数组中

const vnode = {
  tag: 'div',
  children: [
    { tag: 'div', children: 'foo' },
    { tag: 'p', children: ctx.bar, patchFlag: 1 }, // 这是动态节点
  ],
  // 将children 中的动态节点提取到 dynamicChildren 数组中
  dynamicChildren: [
    { tag: 'p', children: ctx.bar, patchFlag:  PatchFlags.TEXT }
  ]
}

Block定义: 带有 dynamicChildren 属性的虚拟节点称为“块” ，即（Block）
一个Block本质上也是一个虚拟DOM, 比普通的虚拟节点多处一个用来存储动态节点的 dynamicChildren属性。（能够收集所有的动态子代节点）

渲染器的更新操作会以Block为维度。当渲染器在更新一个Block时，会忽略虚拟节点的children数组，直接找到dynamicChildren数组，并只更新该数组中的动态节点。跳过了静态内容，只更新动态内容。同时，由于存在对应的补丁标志，也能够做到靶向更新。

Block节点有哪些： 模版根节点、带有v-for、v-if/v-else-if/v-else等指令的节点

1.3 收集动态节点

编译器生成的渲染函数代码中，不会直接包含用来描述虚拟节点的数据结构，而是包含着用来创建虚拟DOM节点的辅助函数，如下

render() {
  return createVNode('div', { id: 'foo' }, [
    createVNode('p', null, 'text')
  ])
}

function createVNode(tag, props, children) {
  const key = props && props.key
  props && delete props.key
  
  // 省略部分代码
  
  return {
    tag,
    props,
    children,
    key
  }
}

createVNode的返回值是一个虚拟DOM节点

举个例子：

<div id="foo">
  <p class="bar">{{ bar }}</p>
</div>

上面模版生成带有补丁标志的渲染函数如下：

render() {
  return createVNode('div', { id: 'foo' }, [
    createVNode('p', { class: 'bar' }, text, PatchFlags.TEXT)
  ])
}

怎么将根节点变成一个Block，如何将动态子代节点收集到该Block的dynamicChildren数组中？

可以发现，在渲染函数内，对createVNode函数的调用是层层嵌套结构，执行顺序是 内层先执行，外层再执行，当外层createVNode函数执行时，内层的createVNode函数已经执行完毕了。因此，为了让外层Block节点能够收集到内层动态节点，需要一个栈结构的数据来临时存储内层的动态节点。代码实现如下：

// 动态节点
const dynamicChildrenStack = []
// 当前动态节点集合
let currentDynamicChildren = null
// openBlock 用来创建一个新的动态节点集合，并将该集合压入栈中
function openBlock() {
  dynamicChildrenStack.push((currentDynamicChildren = []))
}
// closeBlock 用来通过openBlock创建的动态节点集合从栈中弹出
function closeBlock() {
  currentDynamicChildren = dynamicChildrenStack.pop()
}

然后调整createVNode函数

function createVNode(tag, props, children, flags) {
  const key = props && props.key
  props && delete props.key

  const vnode =  {
    tag,
    props,
    children,
    key
  }

  if (typeof flags !== 'undefined' && currentDynamicChildren) {
    // 动态节点添加到当前动态集合节点中
    currentDynamicChildren.push(vnode)
  }

  return vnode
}

接着调整

render() {
  // 1. 使用 createBlock 代替 createVNode 来创建 block
  // 2. 每当调用 createBlock 之前， 先调用 openBlock
  return (openBlock(), createBlock('div', null, [ 
    createVNode('p', { class: 'foo' },  null, 1),
    createVNode('p', { class: 'bar' },  null),
  ])) // 利用逗号运算符的性质来保证渲染函数的返回值仍然是VNode对象
}

function createBlock(tag, props, children) {
  // block 本质上也是一个 vnode
  const block = createVNode(tag, props, children)
  // 将当前动态节点集合作为 block.dynamicChildren
  block.dynamicChildren = currentDynamicChildren

  closeBlock()
  return block
}

1.4.渲染器的运行时支持

传统的节点更新方式如下：

function patchElement(n1, n2) {
  const el = n2.el = n1.el
  const oldProps = n1.props
  const newProps = n2.props

  for (const key in newProps) {
    if (newProps[key] !== oldProps[key]) {
      patchProps(el, key, oldProps[key], newProps[key])
    }
  }

  for (const key in oldProps) {
    if (!(key in newProps)) {
      patchProps(el, key, oldProps[key], null)
    }
  }

  // 在处理 children 时，调用 patchChildren 函数
  patchChildren(n1, n2, el)
}

优化后的更新方式，直接对比动态节点

function patchElement(n1, n2) {
  const el = n2.el = n1.el
  const oldProps = n1.props
  const newProps = n2.props

  // 省略部分代码

  if (n2.dynamicChildren) {
     // 调用 patchBlockChildren 函数，只更新动态节点
    patchBlockChildren(n1, n2)
  } else {
    patchChildren(n1, n2, el)
  }
}

function patchBlockChildren(n1, n2) {
  // 只更新动态节点
  for(let i=0; i<n2.dynamicChildren.length; i++) {
    patchElement(n1.dynamicChildren[i], n2.dynamicChildren[i])
  }
}

存在对应的补丁标志，可以针对性地完成靶向更新

function patchElement(n1, n2) {
  const el = n2.el = n1.el
  const oldProps = n1.props
  const newProps = n2.props

  if (n2.patchFlags) {
    // 靶向更新
    if (n2.patchFlags === 1) {
       // 只需要更新class 
    } else if (n2.patchFlags === 2) {
        // 只需要更新style
    } else if (...) {
      // ...
    }
  } else {
    // 全量更新
    for (const key in newProps) {
      if (newProps[key] !== oldProps[key]) {
        patchProps(el, key, oldProps[key], newProps[key])
      }
    }

    for (const key in oldProps) {
      if (!(key in newProps)) {
        patchProps(el, key, oldProps[key], null)
      }
    }
  }

  // 在处理 children 时，调用 patchChildren 函数
  patchChildren(n1, n2, el)
}

2. Block树

除了模版的根节点是Block外，带有结构化指令的节点，如：v-if、v-for,也都应该是Block

2.1 带有v-if指令的节点

<div>
    <section v-if="foo">
      <p>{{ a }}</p>
    </section>
    <div v-else>
      <p>{{ a }}</p>
    </div>
</div>

假设只有最外层的div标签会作为Block, 那么变量foo的值为true还是false, block收集到的动态节点都是一样的，如下：

const block = {
  tag: 'div',
  dynamicChildren: [
    {
      tag: 'p', children: ctx.a, patchFlags: 1 }
    }
  ]
}

这意味着，在Diff阶段不会更新。显然，foo 不同值下，一个是 section, 一个是 div, 是不同标签，是需要更新的。

再举个例子：

<div>
    <section v-if="foo">
        <p>{{ a }}</p>
    </section>
    <section v-else> // 即使这里是section
        <div> // 这个div标签在diff过程中会被忽略
            <p>{{ a }}</p>
        <div>
    </section>
</div>

一样会导致更新失败

问题在于：dynamicChildren收集的动态节点是忽略虚拟DOM树层级的，结构化指令会导致更新前后模版的结构发生变化，即模版结构不稳定

解决方法： 让带有v-if/v-else-if/v-else等结构化指令的节点也作为Block即可,如下所示

Block(Div)
    - Block(Section v-if)
    - Block(Section v-else)

const block = {
    tag: 'div',
    dynamicChildren: [
        { tag: 'section', { key: 0 /* 不同的block, key不同 */ }，dynamicChildren：[...]},
    ]
}

在Diff过程中，渲染器根据key值区分，使用新的 Block 替换旧的 Block

2.2 带有 v-for 指令的节点

带有 v-for 指令的节点也会让虚拟DOM树变得不稳定

例子：

<div>
    <p v-for="item in list"> {{ item }}</p>
    <i>{{ foo }}</i>
    <i>{{ bar }}</i>
</div>

list 的值由 [1, 2] 变成 [1]

更新前后对应的 Block 树如下：

// 更新前
const prevBlock = {
    tag: 'div',
    dynamicChildren: [
        { tag: 'p', children: 1, 1 /* TEXT */ },
        { tag: 'p', children: 2, 1 /* TEXT */ },
        { tag: 'i', children: ctx.foo, 1 /* TEXT */ },
        { tag: 'i', children: ctx.bar, 1 /* TEXT */ },
    ]
}

// 更新后
const prevBlock = {
    tag: 'div',
    dynamicChildren: [
        { tag: 'p', children: 1, 1 /* TEXT */ },
        { tag: 'i', children: ctx.foo, 1 /* TEXT */ },
        { tag: 'i', children: ctx.bar, 1 /* TEXT */ },
    ]
}

更新前后，动态节点数量不一致，无法进行 diff 操作（diff操作的前提是：操作的节点必须是同层级节点， dynamicChildren不一定是同层级的）

解决方法：让 v-for指令的标签也作为Block角色，保证虚拟DOM树具有稳定的结构，无论 v-for 在运行时怎样变化。如下：

const block = {
    tag: 'div',
    dynamicChildren: [
        // 这是一个 Block, 有dynamicChildren
       { tag: Fragment, dynamicChildren: [/* v-for的节点 */] }，
       { tag: 'i', children: ctx.foo, 1 /* TEXT */ },
       { tag: 'i', children: ctx.bar, 1 /* TEXT */ }, 
    ]
}

由于 v-for指令渲染的是一个片段，所以类型用 Fragment

2.3 Fragment的稳定性

<p v-for="item in list">{{ item }}</p>

// list 的值 由 [1, 2] 变成 [1]

// 更新前
const prevBlock = { 
    tag: Fragment, 
    dynamicChildren: [
        { tag: 'p', children: 1, 1 /* TEXT */ },
        { tag: 'p', children: 2, 1 /* TEXT */ },
    ]
}

// 更新后
const prevBlock = { 
    tag: Fragment, 
    dynamicChildren: [
        { tag: 'p', children: 1, 1 /* TEXT */ },
    ]
}

发现 Fragment 本身收集的动态节点存在结构是不稳定的情况

结构不稳定: 指更新前后一个block的dynamicChildren数组中收集的动态节点的数量或顺序不一致

这种情况无法直接进行靶向更新

解决方法：回退到传统虚拟DOM的Diff手段，即直接使用Fragment的children而非 dynamicChildren来进行Diff操作

Fragment 的子节点仍然可以是由 Block 组成的数组

const block = { 
    tag: Fragment, 
    children: [
        { tag: 'p', children: item, dynamicChildren: [/*...*/, 1 /* TEXT */] },
        { tag: 'p', children: item, dynamicChildren: [/*...*/, 1 /* TEXT */] },
    ]
}

当Fragment 的子节点更新时，就可以恢复优化模式

有稳定的Fragment吗？如下：

// v-for指令的表达式是常量
<p v-for="n in 10"></p>
<p v-for="n in 'abc'"></p>

稳定的Fragment, 可以使用优化模式

vue3模版中的多个根节点，也是稳定的Fragment

<template>
    <div></div>
    <p></p>
    <i></i>
</template>

3. 静态提升

减少更新时创建虚拟DOM带来的性能开销和内存占用

如：

<div>
    <p>static text</p>
    <p>{{ title }}</p>
</div>

没有静态提升时,渲染函数是：

function render(){
    return (openBlock(), createBlock('div', null, {
        createVNode('p', null, 'static text'),
        createVNode('p', null, ctx.title, 1 /* TEXT */),
    }))
}

响应式数据 title 变化后，整个渲染函数会重新执行

把纯静态的节点提升到渲染函数之外

const hoist1 = createVNode('p', null, 'static text')

function render(){
    return (openBlock(), createBlock('div', null, {
        hoist1,
        createVNode('p', null, ctx.title, 1 /* TEXT */),
    }))
}

响应式数据 title 变化后，不会重新创建静态的虚拟节点

注：静态提升是以树为单位的

包含动态绑定的节点本身不会被提升，但是该节点上的静态属性是可以被提升的

<div>
    <p foo="bar" a=b>{{ text }}</p>
</div>

// 静态提升的props对象
const hoistprop = { foo: 'bar', a: 'b'}

function render(ctx) {
    return (openBlock(), createBlock('div', null, [
        createVNode('p', hoistprop, ctx.text)
    ]))
}

可以减少创建虚拟DOM产生的开销以及内存占用

4. 预字符串化

基于静态提升，进一步采用预字符串化优化。

<div>
    <p></p>
    <p></p>
    // ... 20个 p 标签
    <p></p>
</div>

采用静态提升优化策略后

const hoist1 = createVNode('p', null, null, PatchFlags.HOISTED)
const hoist2 = createVNode('p', null, null, PatchFlags.HOISTED)
 // ...20个 hoistx 变量
const hoist20 = createVNode('p', null, null, PatchFlags.HOISTED)

render(){
   return (openBlock(), createBlock('div', null, [
       hoist1, hoist2, /* ...20个变量 */， hoist20
   ]))
}

采用预字符串化将这些静态节点序列化为字符串，并生成一个Static类型的VNode

const hoistStatic = createStatticVNode('<p></p><p></p>...20个...<p></p>')

render() {
    return (openBlock(), createBlock('div', null, [hoistStatic]))
}

优势：

大块的静态内容可以通过 innerHTML设置，在性能上有一定优势
减少创建虚拟节点产生的性能开销
减少内存占用

5. 缓存内联事件处理函数

<Com @change="a+b"/>

function render(ctx) {
    return h(Com, {
     // 内联事件处理函数
     onChange: () => (ctx.a + ctx.b)
    })
}

每次重新渲染时，都会为Com组件创建一个全新的props对象。同时，props对象中onChange属性的值也会是全新的函数。造成额外的性能开销

function render(ctx, cache) { // 数组cache来自组件实例
   return h(Com, {
      // 将内联事件处理函数缓存到 cache中
      onChange: cache[0] || cache[0] = ($event) => (ctx.a + ctx.b)
    })
}

6. v-once

v-once 可以对虚拟DOM进行缓存

<section>
    <div v-once>{{ foo }}</div>
</section>

function render(ctx, cache) {
    return (openBlock(), createBlock('div', null, [
        cache[1] || (cache[1] = createVNode("div", null, ctx.foo, 1 /* TEXT */))
    ]))
}

由于节点被缓存，意味着更新前后的虚拟节点不会发生变化，因此也就不需要这些被缓存的虚拟节点参与Diff操作了。编译后的结果如下：

render(ctx, cache) {
    return (openBlock(), createBlock('div', null, [
        setBlockTracking(-1), //阻止这段 VNode 被 Block缓存    
        cache[1] || (cache[1] = createVNode("div", null, ctx.foo, 1 /* TEXT */)),
        setBlockTracking(1), // 恢复
        cache[1] // 整个表达式的值
    ]))
}

v-once包裹的动态节点不会被父级Block收集，因此不会参与Diff操作

v-once指令通常用于不会发生改变的动态绑定中，例如绑定一个常量

<div v-once>{{ SOME_CONSTANT }}</div>

v-once带来的性能提升

1. 避免组件更新时重新创建虚拟DOM带来的性能开销。因为虚拟DOM被缓存了，所以更新时无需重新创建
1. 避免无用的Diff开销。因为被v-once标记的虚拟DOM树不会被父级Block节点收集

7. 总结

1. vue3提出了 Block 的概念，利用 Block树及补丁标志
2. 静态提升：可以减少更新时创建虚拟DOM产生的性能开销和内存占用
3. 预字符串化：在静态提升的基础上，对静态节点进行字符串化。这样做能够减少创建虚拟节点产生的性能开销以及内存占用
4. 缓存内联事件处理函数：避免造成不必要的组件更新
5. v-once指令：缓存全部或部分虚拟节点，能够避免组件更新时重新创建虚拟DOM带来的性能开销，也可以避免无用的Diff操作