采用分层Diff与key复用机制，通过限制同层比对、使用唯一key识别节点、双端指针优化列表更新，仅在类型一致时局部打补丁，显著降低复杂度至O(n)，提升渲染效率。
设计一个高性能的 Virtual DOM Diff 算法，核心在于减少比对复杂度、提升更新效率，并尽可能贴近真实 DOM 的变化模式。虽然完整的 Diff 过程无法完全避免开销，但通过合理的策略可以大幅优化性能。以下是关键设计思路和实现要点。
采用分层 Diff 策略
只在相同层级的节点之间进行比较，不跨层级移动。这将原本可能是 O(n³) 的树结构对比简化为 O(n)，大幅提升效率。
说明：- 每次更新从根节点开始，逐层向下遍历，仅比较同深度的子节点列表。
- 一旦发现节点类型不同（如 div 变成 span），直接替换整个子树，不再深入递归。
- 这种策略牺牲了跨层级移动的最优性，但极大减少了计算量，符合大多数 UI 更新集中在局部的特点。
基于 key 的节点复用机制
为列表中的每个节点设置唯一 key，帮助算法识别哪些元素是新增、删除、移动或可复用的。
- 避免使用数组索引作为 key，特别是在有插入或排序操作时，会导致不必要的重渲染。
- 使用稳定唯一标识（如 id）能让算法精准定位节点位置变化，最小化 DOM 操作。
- Diff 过程中维护旧节点的 key 映射表，快速查找对应的新节点，减少遍历次数。
优化类型判断与属性更新
在节点类型相同的情况下，跳过重建，仅更新变化的属性和文本内容。
实现细节：- 先比对 tagName 和 key，若一致则进入 patch 阶段，只处理 props、事件监听器和 children 差异。
- 对 class、style 等复合属性做增量更新，而不是全量替换。
- 文本节点直接比对 content，若有差异则赋值 node.textContent。
双端 Diff 提升列表对比效率
对于动态列表，使用双端指针法（类似 React Reconciler 中的实现）来高效匹配首尾元素。
流程简述：- 设置四个指针：旧列表的头尾、新列表的头尾，依次尝试匹配。
- 当头头或尾尾匹配成功时，复用节点并移动指针。
- 若头尾交叉匹配，则调整顺序；剩余未匹配项统一处理为新增或删除。
- 该方法在常见场景（如添加、删除首尾项）下接近线性时间，显著优于暴力遍历。
