Static lifting in compilation optimization

Static Hoisting Compilation Optimization

Vue3's compiler performs optimizations on static content during the template compilation phase, with Static Hoisting being a key optimization technique. When the template contains static nodes that do not change, the compiler extracts these nodes outside the render function to avoid recreating them on every render.

// Template before compilation
const template = `
  <div>
    <h1>Static Title</h1>
    <p>{{ dynamicContent }}</p>
  </div>
`

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

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

Static Node Identification

The compiler identifies which nodes can be hoisted through static analysis. Nodes meeting the following criteria are marked as static:

1. No dynamically bound attributes
2. No directives used (except v-if/v-for)
3. All child nodes are static nodes

For nodes containing pure text, the compiler further optimizes:

// Original template
<div>
  <span>This is static text</span>
</div>

// Optimized
const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<span>This is static text</span>", 1)

Hoisting Level Classification

Static hoisting in Vue3 is divided into multiple levels:

1. Fully Static Nodes: The entire node and its children are static

const _hoisted_1 = _createVNode("div", { class: "header" }, [
  _createVNode("h1", null, "Title")
])

2. Static Attribute Nodes: The tag itself is dynamic, but the attributes are static

const _hoisted_1 = { class: "static-class" }

function render() {
  return _createVNode(_ctx.dynamicTag, _hoisted_1, /* ... */)
}

3. Static Subtrees: Part of the subtree is static

const _hoisted_1 = _createVNode("footer", null, [
  _createVNode("p", null, "Copyright")
])

function render() {
  return _createVNode("div", null, [
    _createVNode("main", null, [/* Dynamic content */]),
    _hoisted_1
  ])
}

Compilation Process Analysis

Static hoisting occurs during the transform phase of the compiler, primarily through the following steps:

1. AST Transformation: After parsing the template into AST, mark static nodes

interface ElementNode {
  type: NodeTypes.ELEMENT
  tag: string
  props: Array<AttributeNode | DirectiveNode>
  children: TemplateChildNode[]
  isStatic: boolean
  hoisted?: JSChildNode
}

2. Code Generation: Handle static nodes when generating the render function

// Static node processing logic
if (node.isStatic) {
  const hoisted = generateHoisted(node)
  context.hoists.push(hoisted)
  return `_hoisted_${context.hoists.length}`
}

3. Runtime Integration: Inject hoisted nodes into the render context

function compile(template: string, options?: CompilerOptions): CodegenResult {
  const ast = parse(template)
  transform(ast, {
    hoistStatic: true,
    // ...other options
  })
  return generate(ast, options)
}

Performance Comparison Tests

Benchmark comparing performance with and without static hoisting:

// Test case: 1000 renders of a component with static nodes
const staticTemplate = `
  <div>
    <header class="static-header">
      <h1>Static Title</h1>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
    </header>
    <main>{{ dynamicContent }}</main>
  </div>
`

// Render time without static hoisting: ~15ms
// Render time with static hoisting: ~8ms

Relationship with Static Node Caching

Static hoisting often works in conjunction with caching mechanisms:

1. Reuse of Identical Static Nodes

// Multiple identical static nodes in the template
<div>
  <span class="icon">★</span>
  <span class="icon">★</span>
  <span class="icon">★</span>
</div>

// The compiler reuses the same hoisted node
const _hoisted_1 = _createVNode("span", { class: "icon" }, "★")

2. Special Handling for SSR

// In SSR mode, different static node strings are generated
if (isServer) {
  context.hoists.push(`_ssrNode(${JSON.stringify(staticContent)})`)
} else {
  context.hoists.push(`_hoisted_${id}`)
}

Edge Case Handling

The compiler needs to handle special scenarios:

1. Static Nodes with Keys

// The key attribute prevents nodes from being hoisted
<div v-for="i in 3" :key="i">
  <span>Static content</span>  // Will not be hoisted
</div>

2. Static Content in Slots

// Default slot content can be hoisted if static
<MyComponent>
  <template #default>
    <p>Static slot content</p>  // Can be hoisted
  </template>
</MyComponent>

3. Static Content in Dynamic Components

<component :is="dynamicComponent">
  <div class="static-wrapper">  // Can be hoisted
    {{ dynamicContent }}
  </div>
</component>

Synergy with Other Optimization Strategies

Static hoisting often works with other compilation optimizations:

1. Working with PatchFlags

// Static nodes are marked as HOISTED
const _hoisted_1 = _createVNode("div", null, "static", PatchFlags.HOISTED)

2. Combining with Tree Flattening

// Hoisted nodes are collected into separate arrays after flattening
const _hoisted_1 = [_createVNode("p", null, "static1")]
const _hoisted_2 = [_createVNode("p", null, "static2")]

function render() {
  return [_hoisted_1, dynamicNode, _hoisted_2]
}

3. Working with Pre-stringification

// Consecutive static nodes are stringified
const _hoisted_1 = _createStaticVNode(
  `<div><p>static1</p><p>static2</p></div>`,
  2
)

Debugging and DevTools

During development, you can inspect static hoisting effects:

1. View Output via compiler-sfc

vue-compile --hoist-static template.vue

2. Inspect Render Function in Browser

console.log(app._component.render.toString())

3. Custom Compiler Options

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

const result = compile(template, {
  hoistStatic: false  // Disable static hoisting for comparison
})

Manual Control of Hoisting Behavior

Developers can control hoisting with comments:

// Use __NO_HOIST__ comment to disable hoisting
<div>
  <!--__NO_HOIST__-->
  <span>This won't be hoisted</span>
</div>

For specific components, global configuration is available:

app.config.compilerOptions = {
  hoistStatic: process.env.NODE_ENV === 'production'
}

Limitations of Static Hoisting

This optimization has some constraints:

1. Root Nodes of Dynamic Components Cannot Be Hoisted

<component :is="dynamic">
  <div>static content</div>  // Root node cannot be hoisted
</component>

2. Nodes with v-if/v-for Directives

<div v-if="show">
  <p>Static content</p>  // Entire div cannot be hoisted
</div>

3. Nodes with Custom Directives

<div v-custom-directive>
  Static content  // Cannot be hoisted
</div>

Comparison with Other Frameworks

Comparing similar optimizations in other frameworks:

1. Comparison with React.memo

// Static component optimization in React
const StaticComponent = React.memo(() => (
  <div className="static">Content</div>
))

2. Static Node Optimization in Preact

// Static node marking in Preact
const staticVNode = h('div', { __k: true }, 'static')

3. Compilation Optimization in Svelte

<!-- Static content handling in Svelte -->
<div class="static">
  {#if dynamic}
    <p>dynamic</p>
  {:else}
    <p>static</p>  // Will be hoisted
  {/if}
</div>

Source Code Implementation Analysis

Core implementation is in the transform module of compiler-core:

// packages/compiler-core/src/transforms/hoistStatic.ts
export function hoistStatic(root: RootNode, context: TransformContext) {
  walk(root, context, new Map())
  
  // Static root node processing
  if (root.hoists.length) {
    context.hoists.push(...root.hoists)
  }
}

function walk(
  node: ParentNode,
  context: TransformContext,
  cache: Map<TemplateChildNode, HoistNode>
) {
  // Depth-first traversal of AST
  for (let i = 0; i < node.children.length; i++) {
    const child = node.children[i]
    if (isStaticNode(child)) {
      // Mark and hoist static nodes
      child.codegenNode = context.hoist(child.codegenNode!)
    }
  }
}

Runtime Support

Runtime logic for handling hoisted nodes:

// packages/runtime-core/src/renderer.ts
function patch(
  n1: VNode | null,
  n2: VNode,
  container: RendererElement,
  anchor: RendererNode | null,
  parentComponent: ComponentInternalInstance | null,
  parentSuspense: SuspenseBoundary | null,
  isSVG: boolean,
  optimized: boolean
) {
  if (n2.patchFlag & PatchFlags.HOISTED) {
    // Directly reuse hoisted nodes
    cloneIfMounted(n2, n1)
    return
  }
}

Special Handling for SSR

Differences in static hoisting implementation for SSR mode:

// packages/server-renderer/src/render.ts
function renderComponentVNode(
  vnode: VNode,
  parentComponent: ComponentInternalInstance | null = null
): Promise<string> | string {
  if (vnode.shapeFlag & ShapeFlags.HOISTED) {
    // Directly return cached static content
    return vnode.el as string
  }
}

Evolution History of Static Hoisting

Development of this feature in Vue3:

1. Optimization Limitations in 2.x

// Vue2's static node handling was simpler
if (node.static) {
  node.staticInFor = isInFor
}

2. Initial Implementation in 3.0

// Early experimental implementation
const hoistId = context.hoistCounter++
context.hoists.push(codegenNode)
return `_hoisted_${hoistId}`

3. Performance Improvements in 3.2

// Introduction of a more refined patchFlag system
const patchFlag = getPatchFlag(node)
if (patchFlag === PatchFlags.HOISTED) {
  // Special handling logic
}

Real-world Application Scenarios

Optimization effects in typical scenarios:

1. Static Parts of Large Lists

<ul>
  <li v-for="item in list" :key="item.id">
    <div class="item-static">  <!-- Can be hoisted -->
      <Icon type="star"/>
      <span>Static Label</span>
    </div>
    {{ item.content }}
  </li>
</ul>

2. Layout Component Optimization

<Layout>
  <template #header>  <!-- Can be hoisted -->
    <Header>
      <Logo/>
      <Navbar/>
    </Header>
  </template>
  <MainContent/>  <!-- Dynamic content -->
</Layout>

3. Static Structures in Forms

<Form>
  <div class="form-group">  <!-- Can be hoisted -->
    <label>Username</label>
    <Input v-model="user.name"/>
  </div>
</Form>

Compiler Configuration Options

Detailed explanation of related configuration parameters:

interface CompilerOptions {
  hoistStatic?: boolean  // Whether to enable static hoisting
  hoistStaticThreshold?: number  // Hoisting threshold
  cacheHandlers?: boolean  // Event handler caching
  prefixIdentifiers?: boolean  // Prefix identifiers
}

Threshold configuration example:

// Only hoist static nodes larger than 3
app.config.compilerOptions = {
  hoistStatic: true,
  hoistStaticThreshold: 3
}

Memory Considerations for Static Hoisting

Memory impact of optimization:

1. Memory Usage of Hoisted Nodes

// Hoisted nodes remain in memory
const _hoisted_1 = _createVNode(...)  // Exists in module scope

2. Balance with Caching

// Compiler decides whether to hoist based on node size
if (nodeSize > config.hoistStaticThreshold) {
  // Only sufficiently large nodes are worth hoisting
}

3. Special Handling for Long Lists

// For repeated static nodes in very long lists
const _hoisted_1 = _createVNode("td", { class: "cell" }, "static")
// Reusing in v-for is more efficient than hoisting each instance

Support for Custom Renderers

Interfaces custom renderers need to implement:

interface RendererOptions<Node, Element> {
  cloneNode?: (node: Node) => Node
  insertStaticContent?: (
    content: string,
    parent: Element,
    anchor: Node | null,
    isSVG: boolean
  ) => Element
}

Implementation example:

const rendererOptions = {
  cloneNode(node) {
    // Clone hoisted static nodes
    return node.cloneNode(true)
  },
  insertStaticContent(content, parent) {
    // Insert pre-rendered static content
    const temp = document.createElement('div')
    temp.innerHTML = content
    const el = temp.firstChild!
    parent.insertBefore(el, null)
    return el
  }
}