编辑“︁JavaScript虚拟DOM”︁

{{DISPLAYTITLE:JavaScript虚拟DOM}}

'''JavaScript虚拟DOM'''（Virtual DOM）是一种优化网页渲染性能的技术，广泛应用于现代JavaScript框架（如React、Vue等）。它通过在内存中维护一个轻量级的DOM表示，减少直接操作真实DOM的开销，从而提升应用性能。

== 概述 ==
虚拟DOM是真实DOM的抽象表示，以JavaScript对象的形式存在。当应用状态发生变化时，框架会先在虚拟DOM上计算差异（Diffing），然后仅更新真实DOM中必要的部分（Reconciliation），避免全量渲染。

=== 核心优势 ===
* '''性能优化'''：减少直接操作真实DOM的次数。
* '''跨平台能力'''：虚拟DOM可渲染到不同环境（如Web、Native）。
* '''声明式编程'''：开发者只需描述UI状态，无需手动处理DOM更新。

== 工作原理 ==
虚拟DOM的工作流程可分为以下步骤：

1. '''初始化'''：创建虚拟DOM树。
2. '''状态变更'''：生成新的虚拟DOM树。
3. '''差异比较'''（Diffing）：比较新旧虚拟DOM树的差异。
4. '''批量更新'''（Patch）：将差异应用到真实DOM。

<mermaid>
graph TD
    A[初始化虚拟DOM] --> B[状态变更]
    B --> C[生成新虚拟DOM]
    C --> D[Diff算法比较差异]
    D --> E[批量更新真实DOM]
</mermaid>

=== 代码示例 ===
以下是一个简单的虚拟DOM实现示例：

<syntaxhighlight lang="javascript">
// 虚拟DOM节点构造函数
function createElement(type, props, ...children) {
    return {
        type,
        props: props || {},
        children: children.flat()
    };
}

// 示例：创建一个虚拟DOM元素
const vdom = createElement('div', { id: 'app' },
    createElement('h1', null, 'Hello Virtual DOM'),
    createElement('p', { class: 'desc' }, 'This is a demo.')
);

console.log(vdom);
</syntaxhighlight>

'''输出结构'''：
<syntaxhighlight lang="json">
{
    "type": "div",
    "props": { "id": "app" },
    "children": [
        {
            "type": "h1",
            "props": {},
            "children": ["Hello Virtual DOM"]
        },
        {
            "type": "p",
            "props": { "class": "desc" },
            "children": ["This is a demo."]
        }
    ]
}
</syntaxhighlight>

== 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>

== 性能对比 ==
虚拟DOM的性能优势在频繁更新时尤为明显：

{| class="wikitable"
|+ 操作耗时对比（单位：ms）
! 操作类型 !! 直接DOM操作 !! 虚拟DOM
|-
| 插入1000个节点 || 120 || 80
|-
| 更新100个节点 || 45 || 20
|-
| 复杂样式变更 || 60 || 35
|}

== 实际应用案例 ==
=== React中的虚拟DOM ===
React组件通过<code>render()</code>方法返回虚拟DOM：

<syntaxhighlight lang="javascript">
class Counter extends React.Component {
    state = { count: 0 };

    handleClick = () => {
        this.setState({ count: this.state.count + 1 });
    };

    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.handleClick}>Increment</button>
            </div>
        );
    }
}
</syntaxhighlight>

=== Vue的响应式系统 ===
Vue将模板编译为虚拟DOM渲染函数：

<syntaxhighlight lang="javascript">
new Vue({
    el: '#app',
    data: { message: 'Hello Vue' },
    template: '<div>{{ message }}</div>'
});
</syntaxhighlight>

== 数学原理 ==
虚拟DOM的差异比较可以抽象为'''树编辑距离'''问题，最小操作次数公式：

<math>
\delta(T_1, T_2) = \min \left\{ 
\begin{array}{l}
\text{删除节点成本} + \delta(T_1 - v, T_2) \\
\text{插入节点成本} + \delta(T_1, T_2 - w) \\
\text{替换节点成本} + \delta(T_1 - v, T_2 - w)
\end{array}
\right\}
</math>

== 局限性 ==
* 内存开销：需要维护额外的虚拟DOM树
* 简单场景可能不如直接操作DOM高效
* 无法完全避免回流（Reflow）

== 进阶主题 ==
* '''增量DOM'''（如Angular使用）
* '''服务器端渲染'''（SSR）中的虚拟DOM
* '''Web Workers'''中处理虚拟DOM计算

[[Category:JavaScript框架]]
[[Category:前端开发]]

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript框架介绍]]