Optimization Principle of Static Hoisting in Vue3

Problem Description
Static hoisting is one of the core optimization strategies during the compilation phase in Vue3. When there is static content (i.e., DOM nodes or attributes that do not change with the component's state) in the template, Vue3's compiler extracts it to generate static variables outside the render function, avoiding repeated creation of virtual DOM nodes. Please elaborate on its triggering conditions, implementation principles, and performance benefits.

Knowledge Analysis

1. Problem Background

   • In Vue2, each time a component updates, the render function regenerates the complete virtual DOM tree, even if it contains a large amount of static content (such as footer copyright information, icons, etc.).
   • For example, the following template:

     <div>
       <span class="static-text">Fixed Title</span>
       <div>{{ dynamicData }}</div>
     </div>
     

     During each update, the <span> node is repeatedly created and compared, causing performance waste.

2. Static Content Identification

   • During the compilation phase, Vue3's compiler scans the template and marks static nodes based on the following characteristics:
     • Nodes without dynamic bindings (such as {{ }}, v-bind, v-if)
     • Parent nodes whose children are all static (e.g., nested static containers)
   • The compiler adds a hoist identifier to static nodes and serializes them into string constants (e.g., _hoisted_1).

3. Hoisting Levels and Implementation

   • Element-Level Hoisting: Extracts static nodes as variables outside the render function:

     // Compilation result
     const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", {
       class: "static-text"
     }, "Fixed Title", -1 /* HOISTED */)
     
     function render() {
       return (_openBlock(), _createElementBlock("div", [
         _hoisted_1,  // Direct reference to static variable
         _createElementVNode("div", null, _toDisplayString(_ctx.dynamicData), 1 /* TEXT */)
       ]))
     }
     

     • Note: Static nodes directly reference variables in the render function, eliminating the need for repeated creation.
   • Attribute-Level Hoisting: If an element itself is dynamic but some attributes are static (e.g., class="main"), static attribute objects are extracted:

     <div :class="dynamicClass" id="static-id"></div>
     

     After compilation:

     const _hoisted_1 = { id: "static-id" }
     // Merge dynamic and static attributes inside the render function
     _mergeProps(_ctx.dynamicClass, _hoisted_1)
     

4. Performance Benefit Analysis

   • Reduced Virtual DOM Creation Overhead: Static nodes generate virtual DOM only once during component initialization.
   • Optimized Diff Algorithm Efficiency: During the Patch phase, dynamic nodes are marked with PatchFlag, while static nodes are directly skipped for comparison.
   • Memory Optimization: Multiple component instances can share the same virtual DOM reference for static nodes.

5. Edge Case Handling

   • Dynamic slot content within static nodes is not hoisted.
   • Nodes with the v-once directive apply a stronger hoisting strategy (treated as constant nodes).

Summary
Static hoisting leverages static analysis during compilation to extract immutable content into persistent objects. Combined with runtime marking mechanisms, it effectively reduces computational burden during the rendering process. This optimization is particularly beneficial for rich-text scenarios containing large amounts of static content (e.g., documentation sites, official website pages).