The optimization effect of static tree hoisting

Optimization Effects of Static Tree Hoisting

Vue 3 performs extensive static analysis of templates during the compilation phase, with Static Tree Hoisting being a key optimization. By identifying static nodes in the template and hoisting them outside the render function, it avoids repeatedly creating the same VNodes during each render, significantly improving performance.

Definition and Identification of Static Nodes

Static nodes are DOM nodes that do not change during component rendering. The Vue 3 compiler identifies static nodes based on the following characteristics:

1. No dynamically bound attributes (e.g., v-bind)
2. No directives (e.g., v-if, v-for)
3. All child nodes are static nodes

<!-- Example of a static node -->
<div class="static-container">
  <p>This is static content</p>
  <span>Never changes</span>
</div>

<!-- Example of a dynamic node -->
<div :class="dynamicClass">
  <p>{{ dynamicText }}</p>
</div>

Implementation Principle of Hoisting Mechanism

The compiler converts static nodes into constants and stores them outside the render function. Below is a simplified implementation logic:

// 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")

function render() {
  return _createVNode("div", null, [
    _hoisted_1,  // Using the hoisted static node
    _createVNode("p", null, _toDisplayString(_ctx.dynamicContent))
  ])
}

Performance Comparison Tests

Benchmark tests clearly demonstrate the optimization effects. The following test case compares performance with and without static hoisting:

// Test case: Render the same component 10,000 times
const TestComponent = {
  template: `
    <div>
      <header class="header">
        <h1>Static Header</h1>
      </header>
      <main>{{ content }}</main>
    </div>
  `,
  data() {
    return { content: 'Dynamic content' }
  }
}

// Without static hoisting (simulating Vue 2)
function renderWithoutHoisting() {
  const start = performance.now()
  for (let i = 0; i < 10000; i++) {
    // Create the complete VNode tree each time
    _createVNode("div", null, [
      _createVNode("header", { class: "header" }, [
        _createVNode("h1", null, "Static Header")
      ]),
      _createVNode("main", null, _ctx.content)
    ])
  }
  return performance.now() - start
}

// With static hoisting (Vue 3 implementation)
const _hoisted_header = _createVNode("header", { class: "header" }, [
  _hoisted_h1 = _createVNode("h1", null, "Static Header")
])

function renderWithHoisting() {
  const start = performance.now()
  for (let i = 0; i < 10000; i++) {
    _createVNode("div", null, [
      _hoisted_header,
      _createVNode("main", null, _ctx.content)
    ])
  }
  return performance.now() - start
}

Test results show that static hoisting can improve rendering speed by approximately 30-40%, with even more noticeable effects in large-scale applications.

Synergistic Optimization with Static Attribute Hoisting

Static tree hoisting often works in tandem with static attribute hoisting. The compiler further optimizes the attributes of static nodes:

<!-- Original template -->
<div class="static-box" data-test="123">
  <p>Static content</p>
</div>

<!-- Compiled output -->
const _hoisted_1 = { class: "static-box", "data-test": "123" }
const _hoisted_2 = _createVNode("p", null, "Static content")

function render() {
  return _createVNode("div", _hoisted_1, [_hoisted_2])
}

Analysis of Practical Application Scenarios

Static hoisting is particularly effective in the following scenarios:

1. Static parts within large lists

<ul>
  <li v-for="item in items" :key="item.id">
    <div class="item-icon">📦</div>  <!-- Static part is hoisted -->
    <div class="item-content">{{ item.text }}</div>
  </li>
</ul>

2. Fixed structures in layout frameworks

<app-layout>
  <template #header>  <!-- Static slot content is hoisted -->
    <h1>Application Title</h1>
    <nav>
      <router-link to="/">Home</router-link>
    </nav>
  </template>
  
  <main>{{ dynamicContent }}</main>
</app-layout>

Compiler Implementation Details

In Vue 3's @vue/compiler-core module, the relevant logic is primarily implemented in transformHoist.ts. Key processing steps include:

1. Traversing the AST to mark static nodes

function walk(node: ParentNode, context: TransformContext) {
  if (node.type === NodeTypes.ELEMENT) {
    const isStatic = isStaticNode(node)
    if (isStatic) {
      context.hoists.push(node)
    }
  }
  // Recursively process child nodes
}

2. Generating hoisted code

function genHoists(hoists: (TemplateChildNode | IfNode)[], context: CodegenContext) {
  if (!hoists.length) return
  
  context.push(`const _hoisted_${hoists.length} = [`)
  hoists.forEach((node, i) => {
    if (i > 0) context.push(`, `)
    genNode(node, context)
  })
  context.push(`]\n`)
}

Relationship with Other Optimizations

Static tree hoisting works in synergy with the following optimizations:

1. Patch Flag Optimization: Dynamic nodes receive patch flags, while static nodes are entirely skipped during diffing.
2. Cached Event Handlers: Event handlers on static nodes are cached.
3. SSR Optimization: Static node strings are directly reused during server-side rendering.

// Example combining patch flags
const _hoisted_1 = _createVNode("div", { class: "static" }, "hello")

function render() {
  return _createVNode("div", null, [
    _hoisted_1,
    _createVNode("div", {
      class: normalizeClass({ active: isActive })
    }, null, 2 /* CLASS */)
  ])
}

Development Considerations

Although static hoisting happens automatically, developers can maximize its effects by:

1. Avoiding unnecessary dynamic bindings on static nodes

<!-- Not recommended -->
<div :class="'static-class'">
  <p>{{ 'static text' }}</p>
</div>

<!-- Recommended -->
<div class="static-class">
  <p>static text</p>
</div>

2. Properly separating static and dynamic content

<!-- Before optimization -->
<div>
  <h1>{{ title }}</h1>
  <div class="content">
    <p>Static paragraph</p>
    <p>Another static text</p>
    <div>{{ dynamicContent }}</div>
  </div>
</div>

<!-- After optimization -->
<div>
  <h1>{{ title }}</h1>
  <StaticContent />
  <div>{{ dynamicContent }}</div>
</div>

Debugging and Verification

You can verify whether static hoisting is effective through the following methods:

1. Inspecting the compiled output

# Use Vue CLI to view compilation results
vue inspect --mode production > output.js

2. Controlling compiler options

// vite.config.js
export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: {
        hoistStatic: false // Disable static hoisting
      }
    }
  })]
})

3. Comparing performance using profiling tools

// Compare performance in Chrome DevTools between the two modes
const profileRender = (component) => {
  console.profile('rendering')
  app.component('Test', component).mount('#app')
  console.profileEnd()
}

profileRender(StaticHeavyComponent)