第 17 章 编译优化
霍春阳（HcySunYang）
编译优化指的是编译器将模板编译为渲染函数的过程中，尽可能多地提取关键信息，并以此指导生成最优代码的过程。编译优化的策略与具体实现是由框架的设计思路所决定的，不同的框架具有不同的设计思路，因此编译优化的策略也不尽相同。但优化的方向基本一致，即尽可能地区分动态内容和静态内容，并针对不同的内容采用不同的优化策略。
17.1 动态节点收集与补丁标志
17.1.1 传统 Diff 算法的问题
我们在第三篇中讲解渲染器的时候，介绍了三种关于传统虚拟 DOM 的 Diff 算法。但无论哪一种 Diff 算法，当它在比对新旧两棵虚拟 DOM 树的时候，总是要按照虚拟 DOM 的层级结构“一层一层”地遍历。举个例子，假设我们有如下模板：
在上面这段模板中，唯一可能变化的就是 p 标签的文本子节点的内容。也就是说，当响应式数据 text 的值发生变化时，最高效的更新方式就是直接设置 p 标签的文本内容。但传统 Diff 算法显然做不到如此高效，当响应式数据 text 发生变化时，会产生一棵新的虚拟 DOM 树，传统 Diff 算法对比新旧两棵虚拟 DOM 树的过程如下。
对比 div 节点，以及该节点的属性和子节点。
对比 p 节点，以及该节点的属性和子节点。
对比 p 节点的文本子节点，如果文本子节点的内容变了，则更新之，否则什么都不做。
可以看到，与直接更新 p 标签的文本内容相比，传统 Diff 算法存在很多无意义的比对操作。如果能够跳过这些无意义的操作，性能将会大幅提升。而这就是 Vue.js 3 编译优化的思路来源。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
Vue.js 3 中的编译优化策略通过动态内容和静态内容的区分，实现了运行时的快捷路径，从而提升性能。文章详细介绍了动态节点收集与补丁标志的概念，以及如何通过补丁标志和动态子节点的提取实现优化。引入“Block”概念，渲染器的更新操作以“Block”为维度，实现跳过静态内容，只更新动态内容，从而提升性能。这些优化策略使得 Vue.js 3 在保留虚拟 DOM 的同时，避免了虚拟 DOM 带来的性能开销。文章内容涉及编译优化的具体实现细节，包括动态节点的收集、补丁标志的应用以及渲染器的运行时支持，为读者提供了深入了解编译优化在 Vue.js 3 中应用的重要信息。此外，文章还详细讨论了带有结构化指令的节点如何作为“Block”角色，解决了虚拟 DOM 树结构不稳定引起的更新问题。另外，文章还介绍了静态提升和预字符串化的优化手段，进一步减少了更新时创建虚拟 DOM 的性能开销和内存占用。整体而言，本文深入探讨了 Vue.js 3 中的编译优化策略，为读者提供了宝贵的技术知识，帮助他们更好地理解和应用 Vue.js 3 的性能优化特性。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《Vue.js 设计与实现》
《Vue.js 设计与实现》
立即购买
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。
收起评论