Static marking of the virtual DOM

The Principle of Static Marking in Virtual DOM

Static marking in the Virtual DOM is one of the core performance optimization mechanisms in Vue 3. When there are static nodes in the template that never change, Vue will identify them through static analysis during the compilation phase, thereby skipping the comparison of these nodes during subsequent updates.

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

// Generated render function after compilation
function render() {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("h1", null, "Static Title", 1 /* HOISTED */),
    _createVNode("p", null, _toDisplayString(_ctx.dynamicContent), 1 /* TEXT */)
  ]))
}

Static Hoisting

Vue 3's compiler hoists static nodes outside the render function to avoid recreating them on every render:

// Static nodes are hoisted as constants
const _hoisted_1 = _createVNode("h1", null, "Static Title", -1 /* HOISTED */)

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

Patch Flag System

Vue 3 introduces the Patch Flag system, which uses bitwise operations to mark dynamic content:

// Patch Flag type examples
export const enum PatchFlags {
  TEXT = 1,            // Dynamic text content
  CLASS = 1 << 1,      // Dynamic class
  STYLE = 1 << 2,      // Dynamic style
  PROPS = 1 << 3,      // Dynamic props (excluding class and style)
  FULL_PROPS = 1 << 4, // Dynamic key, requires full props comparison
  HYDRATE_EVENTS = 1 << 5,
  STABLE_FRAGMENT = 1 << 6,
  KEYED_FRAGMENT = 1 << 7,
  UNKEYED_FRAGMENT = 1 << 8,
  NEED_PATCH = 1 << 9,
  DYNAMIC_SLOTS = 1 << 10,
  HOISTED = -1,        // Static node
  BAIL = -2            // Requires full diff
}

Static Root Node Optimization

When an entire subtree consists of static nodes, Vue marks it as a static root:

const template = `
  <div class="container">
    <header>
      <h1>Website Title</h1>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
    </header>
    <main>{{ content }}</main>
  </div>
`

// After compilation, a structure like this is generated
const _hoisted_1 = /*#__PURE__*/_createVNode("header", null, [
  /*#__PURE__*/_createVNode("h1", null, "Website Title"),
  /*#__PURE__*/_createVNode("nav", null, [
    /*#__PURE__*/_createVNode("a", { href: "/" }, "Home"),
    /*#__PURE__*/_createVNode("a", { href: "/about" }, "About")
  ])
], -1 /* HOISTED */)

Compile-Time Static Analysis

Vue's compiler performs static analysis during the compilation phase:

1. Identifies purely static nodes (no dynamic bindings)
2. Identifies static attributes (attributes without dynamic bindings)
3. Identifies static child node trees
4. Adds appropriate PatchFlags to dynamic parts

// Complex example
const template = `
  <div :class="containerClass">
    <img src="/logo.png" alt="Logo">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
    <footer :style="footerStyle">
      <p>Copyright {{ year }}</p>
    </footer>
  </div>
`

// The compilation result will include:
// - Hoisted img node
// - ul with FOR flag
// - footer with STYLE flag
// - copyright text with TEXT flag

Runtime Optimization Effects

Static marking primarily improves performance in the following ways:

1. Skips static subtree comparison: Reuses previous VNodes directly during patching
2. Reduces memory allocation: Static nodes are hoisted as constants, avoiding repeated creation
3. More precise updates: Only compares necessary parts via PatchFlags

// Simplified diff algorithm logic during updates
function patchElement(n1, n2) {
  const el = n2.el = n1.el
  const oldProps = n1.props || {}
  const newProps = n2.props || {}
  
  // Determines how to update based on PatchFlag
  if (n2.patchFlag > 0) {
    if (n2.patchFlag & PatchFlags.CLASS) {
      // Only updates class
    }
    if (n2.patchFlag & PatchFlags.STYLE) {
      // Only updates style
    }
    // Other flag handling...
  } else {
    // Full props comparison
  }
  
  // Child node processing...
}

Comparison with Vue 2

Vue 2's optimization strategy is relatively simpler:

1. Only distinguishes between static and dynamic nodes
2. Static nodes generate and cache DOM after the first render
3. Subsequent updates clone DOM nodes directly

Vue 3's improvements:

1. More granular dynamic content marking (PatchFlag)
2. Hoists static nodes outside the render function
3. Supports static subtree hoisting
4. Generates more optimized code during compilation

// Vue 2's static node handling
function render() {
  with(this) {
    return _c('div', [
      _m(0),  // Static node marker
      _c('p', [_v(_s(dynamicContent))])
    ])
  }
}

// Static node rendering method
function renderStatic() {
  this._staticTrees = this._staticTrees || []
  const tree = this._staticTrees[index]
  return tree || (this._staticTrees[index] = this.$options.staticRenderFns[index].call(this))
}

Practical Application Scenarios

Static marking is particularly effective in the following scenarios:

1. Large static lists: Fixed headers/footers in tables
2. UI framework components: Static structures of buttons, cards, etc.
3. Marketing pages: Large amounts of static content with minimal dynamic interactions

<template>
  <!-- Entire navigation bar can be hoisted -->
  <nav class="main-nav">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>
  </nav>
  
  <!-- Dynamic content area -->
  <main>
    <article v-for="post in posts" :key="post.id">
      <h2>{{ post.title }}</h2>
      <div>{{ post.content }}</div>
    </article>
  </main>
  
  <!-- Static footer -->
  <footer>
    <p>© 2023 My Website</p>
    <p>Contact: info@example.com</p>
  </footer>
</template>

Compiler Implementation Details

Vue 3's compiler implements static analysis through the following steps:

1. AST transformation: Converts the template into an abstract syntax tree
2. Static attribute detection: Marks attributes without dynamic bindings
3. Static node detection: Identifies completely static nodes
4. Static root detection: Finds static subtrees that can be hoisted entirely
5. Code generation: Generates optimized render functions based on analysis results

// Simplified compiler logic
function compile(template: string) {
  const ast = parse(template)
  transform(ast, {
    nodeTransforms: [
      markStaticNodes,  // Marks static nodes
      markStaticRoots,  // Marks static roots
      hoistStatic       // Hoists static nodes
    ]
  })
  return generate(ast)
}

Manual Optimization Techniques

Developers can leverage static marking through the following methods:

1. Reasonable component splitting: Extract static parts into separate components
2. Avoid unnecessary dynamic bindings: Use strings for static classes instead of objects
3. Use the v-once directive: Forces content to be marked as static
4. Be cautious with inline functions: Avoid breaking static analysis

<template>
  <!-- Not recommended dynamic approach -->
  <div :class="{ 'static-class': true }"></div>
  
  <!-- Recommended static approach -->
  <div class="static-class"></div>
  
  <!-- Use v-once to force static content -->
  <div v-once>
    <h1>Never-changing content</h1>
    <p>This block will be completely static</p>
  </div>
</template>

Synergy with Other Optimization Strategies

Static marking works in tandem with Vue 3's other optimization mechanisms:

1. Tree-shaking: Statically imported components are easier to tree-shake
2. SSR optimization: Static content only needs to be generated once during SSR
3. Caching mechanisms: Works better with caching strategies like keep-alive
4. Reactivity optimization: Reduces unnecessary reactive dependency tracking

// Static components are easier to tree-shake
const staticComponents = {
  Footer: /*#__PURE__*/ () => _createVNode("footer", null, "Static Footer")
}

// Dynamic components need to be retained
const dynamicComponents = {
  UserProfile: {
    setup() {
      const user = inject('user')
      return () => _createVNode("div", null, user.name)
    }
  }
}

Performance Impact Testing

Benchmark tests reveal:

1. Initial render: Static marking has minimal impact on initial render
2. Update performance: More static content leads to more noticeable update performance improvements
3. Memory usage: Static hoisting reduces memory allocation frequency
4. GC pressure: Constant VNodes alleviate garbage collection pressure

// Performance test example (pseudo-code)
test('update performance', () => {
  const app = createApp({
    template: `<div><static/><dynamic :value="count"/></div>`
  })
  
  // Initial render
  const start1 = performance.now()
  render(app)
  const firstRenderTime = performance.now() - start1
  
  // Update render
  const start2 = performance.now()
  updateData()
  const updateTime = performance.now() - start2
  
  console.log(`Static marking improved update performance by ${calculateImprovement()}%`)
})

Edge Case Handling

Static marking needs to handle special scenarios:

1. Dynamic components: <component :is="type"> requires special handling
2. Slot content: Default slot content may contain dynamic elements
3. Custom directives: Directives may modify static nodes
4. Server-side rendering: Requires special consideration for hydration

<template>
  <!-- Dynamic components cannot be hoisted -->
  <component :is="currentComponent" />
  
  <!-- Slot content requires careful handling -->
  <static-component>
    <!-- This default slot content won't be hoisted -->
    <p>{{ dynamicText }}</p>
  </static-component>
</template>

Future Optimization Directions

The Vue team continues to improve static marking:

1. Smarter static analysis: Identifies more optimizable patterns
2. Compile-time pre-calculation: Evaluates simple expressions during compilation
3. Cross-component static sharing: Shares identical static nodes across components
4. WASM acceleration: Uses WebAssembly to speed up compilation

// Possible future optimization directions
function compile(template) {
  // Pre-calculates simple expressions
  if (isConstantExpression(template)) {
    return generateConstantRenderFn(evaluateAtCompileTime(template))
  }
  
  // Cross-component static node sharing
  if (isSharedStaticNode(template)) {
    return useSharedStaticNode(template)
  }
  
  // Regular compilation flow...
}