深挖vue3基本原理之二 —— 编译时优化

本文链接：https://blog.youkuaiyun.com/ZhooooYuChEnG/article/details/145542752

二、编译时优化

2.1 模板编译全链路优化

完整编译流水线：

原始模板 → 词法分析（Tokenizer） → 语法解析（Parser） → AST 转换 → 语义分析 → 代码生成 → 优化后渲染函数

阶段一：词法分析（Tokenizer）

状态机解析：通过有限状态自动机（FSM）处理 HTML 标记
上下文感知：智能识别 <script>, <style> 等特殊区块
动态绑定检测：精准捕获 {{ }}、v-bind、v-on 等指令

阶段二：AST 转换

interface ElementNode {
  type: NodeTypes.ELEMENT
  tag: string
  props: Array<AttributeNode | DirectiveNode>
  children: TemplateChildNode[]
  codegenNode?: CodegenNode // 关键优化载体
}

结构重写：扁平化嵌套条件表达式
静态分析：标记不可变节点树
作用域分析：追踪变量引用关系

阶段三：代码生成策略

动态优先：优先处理含动态绑定的节点
缓存优化：对重复模式进行哈希缓存
SSR 优化：区分服务端/客户端渲染路径

2.2 静态节点提升（Hoist Static）深度解析

静态节点判定标准：

无任何动态绑定（包括属性、子节点）
无组件或自定义元素
无 v-for、v-if 等结构化指令

提升机制：

// 原始 AST 节点
{
  type: 1,
  tag: 'div',
  children: [/* 静态子节点 */],
  codegenNode: {
    type: 'VNODE_CALL',
    isStatic: true,
    hoisted: true // 提升标记
  }
}

// 提升后生成代码
const _hoisted_1 = _createVNode("div", null, [...] )

多级提升策略：

子树提升：当父节点为静态时，整个子树提升
跨模板共享：相同静态模板复用同一提升引用
内存优化：对大型静态节点启用 WeakMap 缓存

性能影响：

首次渲染：减少 30% VNode 创建时间
更新阶段：完全跳过静态子树 diff
内存占用：降低重复对象创建开销

2.3 补丁标志（Patch Flags）二进制掩码技术

标志位复合运算：

// 标志位定义
enum PatchFlags {
  TEXT = 1,        // 00000001
  CLASS = 1 << 1,  // 00000010
  STYLE = 1 << 2,  // 00000100
  PROPS = 1 << 3,  // 00001000
  FULL_PROPS = 1 << 4, // 00010000
  HYDRATE_EVENTS = 1 << 5,
  STABLE_FRAGMENT = 1 << 6,
  KEYED_FRAGMENT = 1 << 7,
  UNKEYED_FRAGMENT = 1 << 8,
  NEED_PATCH = 1 << 9,
  DYNAMIC_SLOTS = 1 << 10,
}

// 复合标志示例：同时需要 TEXT 和 CLASS 更新
const flags = PatchFlags.TEXT | PatchFlags.CLASS // 00000011

运行时优化处理：

function patchElement(n1, n2) {
  const { patchFlag } = n2
  
  if (patchFlag & PatchFlags.CLASS) {
    // 仅处理 class 变更
    updateClass(n2.el, n2.props.class)
  } else if (patchFlag & PatchFlags.TEXT) {
    // 仅更新文本内容
    updateText(n2.el, n2.children)
  }
  
  // 无标志时执行全量 diff
  if (!patchFlag) {
    fullDiff(n1, n2)
  }
}

动态属性优化：

// 输入模板
<div :class="cls" :style="styles">{{ text }}</div>

// 生成代码
_createVNode("div", {
  class: _ctx.cls,
  style: _ctx.styles
}, _toDisplayString(_ctx.text), 3 /* TEXT + CLASS + STYLE */)

此时补丁标志为 1 | 2 | 4 = 7，运行时仅需检查这三类变更

2.4 Block Tree 与动态节点收集

Block 数据结构：

interface Block {
  type: symbol
  children: (VNode | Block)[]
  dynamicChildren: VNode[] | null // 关键优化字段
  patchFlag: number
}

动态节点追踪算法：

入口标记：通过 openBlock() 开启动态收集
层级穿透：自动穿透静态父节点捕获动态子节点
结构保持：维持原始 DOM 层级关系

编译时转换示例：

// 原始模板
<div>
  <span v-if="cond1"></span>
  <span>{{ dynamic }}</span>
  <div v-for="item in list"></div>
</div>

// 生成代码
const _block = openBlock()
const _hoisted_1 = /* 静态节点提升 */

return (_openBlock(),
_createBlock("div", null, [
  _ctx.cond1
    ? (_openBlock(), _createBlock("span", { key: 0 }))
    : null,
  _createVNode("span", null, _toDisplayString(_ctx.dynamic), 1),
  (_openBlock(true), // 启用 unstable 标记
  _createBlock(_Fragment, null, _renderList(_ctx.list, (item) => {
    return _createVNode("div")
  }), 256 /* UNKEYED_FRAGMENT */))
]))

运行时优化策略：

快速定位：通过 dynamicChildren 直接访问动态节点
批次更新：对同一 Block 内的动态节点进行合并处理
结构稳定：避免父结构变化导致全量 diff

2.5 编译器内核优化技术

1. 预字符串化（Pre-stringification）

对纯静态模板直接生成 HTML 字符串
减少 VNode 创建开销

// 输入
<div><span>static</span></div>

// 输出
const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<div><span>static</span></div>", 1)

2. 缓存事件处理（Cache Event Handlers）

// 输入
<button @click="count++">Inc</button>

// 输出
function _cache_1() {
  return (_ctx.count++)
}

_createVNode("button", { onClick: _cache_1 }, "Inc")