为何称Virtual DOM比真实DOM更高效？兼谈React相关疑问

先掰扯清楚一个核心误区：浏览器本身确实支持局部更新DOM，但大家说Virtual DOM的这个特性，本质上不是说浏览器做不到，而是它解决了开发者用原生DOM开发时的一系列痛点，同时带来了额外的价值。

1. 原生DOM操作的心智成本太高 #

浏览器能局部更新，但要手动实现，你得自己干这些活：

• 时刻盯着DOM的状态变化，手动对比新旧状态找出哪里需要改
• 写一堆element.textContent = xxx或者setAttribute的代码去更新对应的节点
• 遇到复杂的状态关联（比如表单联动、列表更新），很容易漏更或者重复更新

而React的Virtual DOM把这些脏活包了：你只需要告诉React“最终的UI应该是什么样”，它会自动对比新旧Virtual DOM的差异（也就是diff算法），然后只把需要改的部分同步到真实DOM。这是帮你省了大量的状态追踪和手动DOM操作的精力，不是说浏览器做不到局部更新。

2. 批量更新减少重排重绘开销 #

DOM更新本身是很耗性能的——每次改DOM都可能触发浏览器的重排或重绘。原生开发里，如果你连续改好几个DOM节点，可能会触发多次重排；但React会把多次状态更新合并成一次批量操作，先通过Virtual DOM算完所有需要改的节点，再一次性更新真实DOM，大幅减少了重排重绘的次数。

举个实际的例子：

// 原生写法，可能触发3次重排
document.getElementById('name').textContent = '张三';
document.getElementById('age').textContent = '28';
document.getElementById('city').textContent = '北京';

// React写法，多次setState会被合并，最终只触发一次DOM更新
setState({name: '张三'});
setState({age: 28});
setState({city: '北京'});

3. 跨平台的统一抽象能力 #

Virtual DOM的另一个关键价值是和真实DOM解耦了——它不仅能对应浏览器的DOM节点，还能映射到React Native的原生组件、小程序、甚至Canvas渲染。这种抽象下，“仅更新必要部分”的逻辑可以在所有平台复用，而浏览器原生的局部更新能力只能在Web环境用。

4. 早期宣传的简化表述 #

React刚出来的时候，“Virtual DOM更高效”是个好理解的卖点。虽然严格来说不是浏览器做不到局部更新，但它确实解决了开发者的真实痛点，所以这个表述被简化传播，慢慢就成了React的核心特性标签，很多人也就忽略了背后是开发者体验和抽象层面的优化，而非浏览器引擎的突破。

总结一下：浏览器本身能局部更新DOM，但Virtual DOM让开发者能更轻松、更可靠地实现局部更新，还附带了批量更新、跨平台等额外buff，这才是它被反复强调的原因。

内容的提问来源于stack exchange，提问作者Zebrafish