Published on

2024-09-17

Authors

Diff算法优化，重写Virtual DOM

https://template-explorer.vuejs.org/

Compiler原理篇

下面是的Vue 3编译器的一些优化机制的详细解释：

1. 静态节点的优化（hoistStatic） ​

静态节点在编译阶段会被提升（hoisting）到渲染函数之外，这样在每次重新渲染时，这些静态节点就不需要重新创建或更新了。这种方式减少了运行时的开销，提高了性能。

SSR优化：在服务端渲染（SSR）中，静态节点的提升还可以减少生成的HTML字符串的大小，从而提高传输效率。 当然可以！我们可以更详细地解释静态节点优化（hoistStatic）及其在客户端和服务端渲染（SSR）中的好处。

静态节点的优化（hoistStatic） ​

在前端框架（例如Vue.js）中，静态节点是指那些在渲染过程中不会改变的DOM节点。在编译阶段，静态节点会被识别并提升（hoisting）到渲染函数之外。这意味着这些节点只会被创建一次，而不是在每次重新渲染时都被重新创建或更新。

​

  1. 减少生成的HTML字符串大小：在SSR中，静态节点的提升可以减少生成的HTML字符串的大小。这是因为静态内容可以被一次性生成，并在不同的请求之间重用。
  2. 提高传输效率：较小的HTML字符串意味着传输到客户端的数据量减少，从而提高传输效率，减少加载时间。
  3. 缓存优化：静态节点可以更容易地缓存，因为它们在每次请求中都不会改变。这可以进一步提高SSR的性能和响应速度。

示例 ​

考虑以下Vue.js模板：

html
<template>
  <div>
    <h1>标题</h1>
    <p>这个段落是静态的，不会改变。</p>
    <p>{{ dynamicContent }}</p>
  </div>
</template>

在编译阶段，Vue.js会识别出哪些部分是静态的，并将其提升到渲染函数之外：

javascript
const staticVNode1 = createVNode('h1', null, '标题');
const staticVNode2 = createVNode('p', null, '这个段落是静态的，不会改变。');

function render() {
  return createVNode('div', null, [
    staticVNode1,
    staticVNode2,
    createVNode('p', null, dynamicContent)
  ]);
}

在这个例子中，staticVNode1 和 staticVNode2 只会被创建一次，而在每次渲染时，它们都会被重用。这大大提高了渲染性能。

希望这个详细的解释对你有帮助！如果你有更多问题，欢迎随时提问。

2. 静态绑定的优化 ​

对于静态绑定的属性（如class和id），编译器会将它们视为静态内容，不会在后续的渲染过程中重新计算或更新。这意味着：

  • 静态class和id：如果绑定的class和id是静态的，那么这些属性在初次渲染后就不会再被更新。
  • PatchFlag：Vue 3 使用 PatchFlag 来标记哪些部分是静态的，哪些部分需要动态更新。在渲染过程中，根据这些标记来决定是否需要更新某个节点。

3. 事件监听器的缓存（cacheHandlers） ​

事件监听器的缓存机制会缓存静态的事件处理函数，从而避免在每次渲染时重新创建事件处理函数。这样可以减少内存的使用和垃圾回收的开销。

4. 静态节点输出优化 ​

hoistStatic不仅提升单个静态节点，还会对多个静态节点进行集合优化，输出为字符串。这种优化可以减少虚拟DOM的创建和比较操作。

vue 2 diff算法 使用传统的双端比较算法，逐个比较和更新节点，效率相对较低。 vue 3

无key, 我们希望尽可能复用老节点 做长度比较，获取最小值， 对于公共部分，进行path工作 如果长于旧，则新增；如果短于旧，则删除 有key 最长稳定序列