是啥因素促使虚拟 DOM 胜过浏览器原生 DOM？ [关闭]

Posted 2023-02-22

【中文标题】是啥因素促使虚拟 DOM 胜过浏览器原生 DOM？ [关闭]

【英文标题】：What factors drive virtual DOM to outperform browser native DOM? [closed]是什么因素促使虚拟 DOM 胜过浏览器原生 DOM？ [关闭]

【发布时间】：2016-11-14 22:41:50

【问题描述】：

在前端 Web 开发中，许多框架都支持虚拟 DOM 解决方案（例如来自 React https://www.npmjs.com/package/virtual-dom 的 virtual-dom）。通常引用的设计原因是避免将 DOM 操作作为前端渲染的瓶颈问题。

为什么 DOM 操作在当前浏览器中速度很慢，而虚拟 DOM 解决方案可以胜过它？

浏览器本身可以做（正在做）哪些优化来消除这个瓶颈？难道浏览器本身不开发更多类似批处理的 DOM API？

作为一个指针，我觉得当运行时需要从 JIT'ed javascript 跳转到本机 DOM 操作代码时，这可能与上下文切换有关，但我从未找到明确的答案。

【问题讨论】：

DOM 并不慢，这似乎是一个现代神话。 React 使用的“虚拟 DOM”a) 更具声明性 b) 可以更好地应对始终发生的组件的完全重新创建。

简而言之：DOM API 不支持批处理。一切都以即时模式运行，而且速度很慢。

@ssube：“一切”到底是什么？回流和重绘当然是在原生 DOM 中分批处理的。

***.com/q/21109361/315168

@ssube 的猜想可能是罪魁祸首。但为什么？我的猜想是（a）如你所说的上下文切换成本，（b）需要使每个调用原子并导致有效且一致的 DOM 状态（例如连接子/父指针等）（c）可能发生的线程同步你写入 DOM。通过批量/批量操作，您可以实现与上下文切换、状态一致性和线程同步相关的更多成本变化。

【参考方案1】：

每次操作 Dom 时都会发生重绘和重排。

对元素外观进行更改时会发生重绘，该更改会更改可见性，但不会影响其布局。这方面的示例包括轮廓、可见性或背景颜色。

Virtual Dom 确保您始终以简约的方式更新 Dom。

在主干或使用 jquery 构建站点等框架中，您只需插入 html 即可更新 dom，而 react 会区分以前的 html 并仅更新相关的 html。

Virtual Dom 只是一个补丁，一个补丁比更新页面的主要部分要好。

【讨论】：

谢谢。所以我的问题是，是什么阻止了浏览器本身拥有一个 API，您可以在不触发无关流的情况下更新页面的主要部分？因为这似乎是现代前端开发的一个主要问题。

这个答案是错误的。 It does not occur every single time.

Native DOM 并不慢，React（虚拟 DOM）之前的所有库都具有导致大量 DOM 重绘的实现。以下文章以更好的方式解释它 - auth0.com/blog/… - teropa.info/blog/2015/03/02/…