哪些因素促使虚拟 DOM 优于浏览器本机 DOM

Question

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

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

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

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

Answer 1

每次操作 Dom 时都会重新绘制和重排。

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

虚拟 Dom 确保您始终以极简的方式更新 Dom。

在像 backbone 或使用 jquery 构建站点这样的框架中，您只需插入 html 来更新 dom，而 react 会与以前的 html 不同，只更新相关的 html。

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