静态节点提升

静态节点提升是 Vue.js 编译器优化策略之一，通过识别模板中永远不会变化的静态节点，将其提升到渲染函数外部，避免重复渲染时的性能开销。

静态节点提升的原理

Vue 的模板编译器在编译阶段会分析模板结构，将静态节点（即不包含任何动态绑定或指令的节点）标记出来。这些节点在组件更新时不会发生变化，因此可以被提取到渲染函数之外，只在初始化时创建一次。

<div>
  <h1>Static Title</h1>
  <p>{{ dynamicContent }}</p>
</div>

在这个例子中，<h1> 标签是静态节点，而 <p> 标签因为包含插值表达式所以是动态节点。编译后的代码会将静态节点提升：

const _hoisted_1 = /*#__PURE__*/_createVNode("h1", null, "Static Title", -1 /* HOISTED */)

function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    _hoisted_1,
    _createVNode("p", null, _toDisplayString(_ctx.dynamicContent), 1 /* TEXT */)
  ]))
}

静态节点提升的优势

1. 减少虚拟 DOM 创建开销：静态节点只需要创建一次虚拟 DOM 节点，后续更新时直接复用
2. 优化 patch 过程：在 diff 算法中可以完全跳过静态节点的比对
3. 内存效率提升：多个组件实例可以共享同一个静态节点的引用

静态节点识别条件

Vue 编译器认为以下节点是静态的：

• 纯文本节点
• 不包含任何动态绑定的元素节点
• 不包含 v-if、v-for 等指令的节点
• 不包含插值表达式 {{ }} 的节点
• 不包含动态属性绑定的节点

<!-- 静态节点 -->
<div class="container">
  <p>Hello World</p>
</div>

<!-- 动态节点 -->
<div :class="containerClass">
  <p>{{ message }}</p>
</div>

多级静态树的提升

Vue 能够识别并提升整个静态子树，而不仅仅是单个节点：

<div>
  <header>
    <h1>App Title</h1>
    <nav>
      <ul>
        <li>Home</li>
        <li>About</li>
      </ul>
    </nav>
  </header>
  <main>{{ content }}</main>
</div>

在这个例子中，整个 <header> 及其子节点都会被提升为一个静态树：

const _hoisted_1 = /*#__PURE__*/_createVNode("header", null, [
  /*#__PURE__*/_createVNode("h1", null, "App Title"),
  /*#__PURE__*/_createVNode("nav", null, [
    /*#__PURE__*/_createVNode("ul", null, [
      /*#__PURE__*/_createVNode("li", null, "Home"),
      /*#__PURE__*/_createVNode("li", null, "About")
    ])
  ])
], -1 /* HOISTED */)

静态提升与服务器端渲染

静态节点提升在 SSR 中特别有效，因为：

1. 服务器端渲染时，静态内容可以直接作为字符串缓存
2. 客户端激活时可以直接复用这些静态内容
3. 减少了服务器端渲染时的虚拟 DOM 创建开销

// SSR 场景下的静态节点会被序列化为字符串
const staticNode = '<h1>Static Title</h1>'

强制静态提升的技巧

有时我们希望确保某些节点被静态提升，可以使用以下方法：

1. 使用 v-once 指令强制节点只渲染一次
2. 将静态内容提取为子组件
3. 使用计算属性缓存动态内容

<template>
  <div v-once>
    <h1>This will only render once</h1>
  </div>
</template>

静态提升的边界情况

有些情况下静态提升可能不会按预期工作：

1. 包含 v-pre 指令的节点不会被提升
2. 使用 v-bind 绑定静态值的节点不会被提升
3. 插槽内容默认不会被静态提升

<!-- 不会被提升 -->
<div v-pre>
  <p>This won't be hoisted</p>
</div>

<!-- 不会被提升 -->
<div :class="'static-class'">
  <p>This looks static but won't be hoisted</p>
</div>

静态提升的性能影响

通过一个简单的性能测试可以观察到静态提升的效果：

// 没有静态提升的组件
const NonHoistedComponent = {
  template: `
    <div>
      <h1>Same Title</h1>
      <p>{{ count }}</p>
    </div>
  `,
  data() {
    return { count: 0 }
  }
}

// 有静态提升的组件
const HoistedComponent = {
  template: `
    <div>
      <h1>Same Title</h1>
      <p>{{ count }}</p>
    </div>
  `,
  data() {
    return { count: 0 }
  }
}

// 性能测试
console.time('non-hoisted')
for (let i = 0; i < 10000; i++) {
  render(h(NonHoistedComponent))
}
console.timeEnd('non-hoisted')

console.time('hoisted')
for (let i = 0; i < 10000; i++) {
  render(h(HoistedComponent))
}
console.timeEnd('hoisted')

测试结果通常会显示静态提升版本有显著的性能优势。

编译器配置与静态提升

在 Vue 编译器中，可以通过以下配置影响静态提升行为：

const { compile } = require('@vue/compiler-dom')

const { code } = compile(template, {
  hoistStatic: true, // 启用静态提升
  cacheHandlers: true, // 缓存事件处理器
  prefixIdentifiers: true // 标识符前缀
})

静态提升与 TypeScript

当使用 TypeScript 时，静态提升的节点类型会被正确推断：

const _hoisted_1 = /*#__PURE__*/_createVNode("div", null, "static", -1 /* HOISTED */)

// TypeScript 能正确识别 _hoisted_1 的类型为 VNode

静态提升的调试

可以通过以下方式检查静态提升是否生效：

1. 查看编译后的渲染函数代码
2. 使用 Vue Devtools 检查虚拟 DOM 结构
3. 在编译选项中添加 comments: true 查看提升注释

const { code } = compile(template, {
  comments: true // 保留编译注释
})

静态提升与组合式 API

在组合式 API 中，静态提升的行为与选项式 API 完全一致：

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <div>
    <h1>Static Title</h1>
    <p>{{ count }}</p>
  </div>
</template>

编译后 <h1> 仍然会被静态提升。

静态提升的限制

静态提升并非万能，有以下限制：

1. 对于大量静态内容，内存占用可能会增加
2. 在极端情况下，过度提升可能导致初始化变慢
3. 动态组件内部的静态内容不会被提升

<component :is="dynamicComponent">
  <p>This static content won't be hoisted</p>
</component>

静态提升的最佳实践

为了最大化利用静态提升：

1. 将大型静态内容拆分为独立组件
2. 避免在动态节点中包裹大量静态内容
3. 合理使用 v-once 处理极少变化的节点
4. 定期检查编译输出确认提升效果

<!-- 好的实践 -->
<StaticHeader/>
<DynamicContent :data="data"/>

<!-- 不太好的实践 -->
<div v-for="item in list">
  <div class="static-content">...</div>
</div>

静态提升与其他框架对比

与其他框架的类似优化比较：

1. React 通过 React.memo 实现类似效果
2. Svelte 在编译时自动优化静态内容
3. Angular 的变更检测策略天然跳过静态内容

// React 的类似优化
const MemoizedComponent = React.memo(() => (
  <div>
    <h1>Static Title</h1>
    <p>{dynamicContent}</p>
  </div>
))

静态提升的未来发展

Vue 3 的静态提升比 Vue 2 更加激进：

1. 支持更多场景的静态提升
2. 改进的编译器能够识别更多静态模式
3. 与 Suspense 等新特性更好配合

<Suspense>
  <template #default>
    <AsyncComponent/>
  </template>
  <template #fallback>
    <div>Loading...</div> <!-- 这个静态内容会被提升 -->
  </template>
</Suspense>