简述虚拟DOM和diff算法

虚拟DOM（Virtual DOM）是一种通过JavaScript对象模拟真实DOM结构的技术，旨在优化浏览器性能；Diff算法则是用于高效比较新旧虚拟DOM差异的核心策略，通过深度优先遍历和差异标记，最小化真实DOM操作。

虚拟DOM的核心机制

设计目的：解决频繁直接操作真实DOM导致的性能问题。例如，连续10次更新若直接操作DOM，会触发多次重绘和回流；而虚拟DOM将更新暂存于内存中的JS对象，最终通过批量操作减少计算量。
工作流程：
模拟DOM结构：用JS对象表示DOM节点（如{ type: 'div', props: { class: 'container' }, children: [...] }），构建虚拟DOM树。
批量更新：所有页面变化先反映在虚拟DOM上，操作内存中的对象速度远快于直接操作DOM。
映射真实DOM：更新完成后，将最终虚拟DOM转换为真实DOM，由浏览器渲染。

Diff算法的核心逻辑

遍历策略：采用深度优先遍历，对新旧虚拟DOM树进行逐节点对比，并为每个节点标记差异。
差异类型与处理（平层Diff的4种情况）：
REPLACE（节点类型变化）：
直接卸载旧节点及其所有子节点，装载新节点。
例如：将<div>替换为<p>时，即使子节点相同也会整体替换。
代价：可能效率较低，但避免O(n3)复杂度，需开发者避免无意义类型变化。
PROPS（属性变化）：
仅更新节点属性或属性值，不触发卸载/装载。
例如：修改<div class="old">为<div class="new">。
TEXT（文本变化）：
直接修改文本节点内容。
例如：<span>Hello</span>变为<span>World</span>。
REORDER（子节点顺序变化）：
处理子节点的增加、删除或移动。
例如：列表项顺序调整时，通过Diff算法识别最小操作集（如移动而非重建）。
结果应用：将差异记录为操作表（如[REPLACE, PROPS, TEXT, REORDER]），通过DOM fragment批量更新真实DOM，减少重绘和回流。

虚拟DOM的意义与Diff算法的作用

虚拟DOM的核心价值：
跨平台能力：同一套虚拟DOM可映射到不同平台（如Web、移动端、服务端），支持React Native等框架。
服务端渲染（SSR）：在服务端生成虚拟DOM并渲染为HTML，提升首屏加载速度。
性能优化：通过批量操作和最小化真实DOM更新，平衡开发效率与运行性能。
Diff算法的必要性：
若直接比较完整虚拟DOM树，时间复杂度为O(n3)，难以实用。
Diff算法通过平层比较和同层节点类型假设，将复杂度降至O(n)，显著提升比较效率。

实际应用中的注意事项

总结：虚拟DOM通过内存中的JS对象抽象真实DOM，结合Diff算法的高效比较，实现了跨平台、服务端渲染和性能优化的目标。Diff算法的4种差异类型（REPLACE、PROPS、TEXT、REORDER）覆盖了所有更新场景，确保最小化真实DOM操作，是虚拟DOM技术的关键支撑。

热门标签