编辑“︁JavaScript虚拟DOM”︁（章节）

== Diff算法详解 ==
虚拟DOM的核心是差异比较算法，主要策略包括：

=== 同级比较 ===
React等框架仅比较同一层级的节点，时间复杂度从O(n³)优化到O(n)。

<mermaid>
graph LR
    A[旧树] --> B[逐层比较]
    B --> C{节点类型相同?}
    C -->|是| D[比较属性]
    C -->|否| E[替换整个节点]
</mermaid>

=== Key属性优化 ===
列表项使用唯一的<code>key</code>帮助算法识别节点移动：

<syntaxhighlight lang="javascript">
// 没有key时可能导致低效更新
const items = ['A', 'B', 'C'].map(item => createElement('li', null, item));

// 使用key提高性能
const itemsWithKey = ['A', 'B', 'C'].map((item, index) => 
    createElement('li', { key: index }, item)
);
</syntaxhighlight>