为什么浏览器不能在内部使用虚拟 dom 作为优化？

Question

互联网上有很多 SO 问题和博客试图解释 virtual dom 是什么，但这个问题是关于为什么这种优化必须在 JavaScript 中实现/作为框架的一部分，而不是通过浏览器本身。

虚拟 DOM，据我理解，是一棵由 Javascript 对象组成的树，有父/子等，但没有真实 DOM 的大部分“重”功能。框架（例如 React/Vue）通过从头开始创建虚拟 DOM 来响应模型状态的变化，然后对其虚拟 DOM 的最新版本进行比较，以确定要更改的真实 DOM。

我读过的许多内容都声称虚拟 DOM 更快，因为每次发生更改时真实 DOM 都必须重新布局（甚至重新绘制），但这不是真的 - 只需要重新布局当某些 JS 代码明确要求某些样式/文本流相关值（例如高度/宽度等）时。想必大多数使用虚拟 DOM 的框架在这方面都无法做得更好 - 除了确保开发人员不会意外地这样做。

此外，最近浏览器在考虑为 DOM 突变提供事件挂钩，但这个想法已被放弃，这意味着在 DOM 突变时不需要触发任何事件。

所以我的问题是，这还剩下什么好处？ JS 框架有哪些额外的信息或额外的自由度来赋予其执行虚拟 DOM 优化的“逻辑”能力？

Answer 1

虚拟 DOM 类似于当前情况的“解决方法”。 W3C 正在致力于重建 DOM 并使当前的“虚拟 DOM”成为浏览器原生的。但你知道这进展有多慢——它必须起草、讨论、接受，然后开始有趣的部分——在不同的浏览器中实现它。他们仍然存在 CSS3 和 Flexbox 模型的问题 - 每个浏览器都有自己的处理这些问题的条款和标准。 虚拟 DOM 也是如此——他们仍然没有接受它是一个跨浏览器的解决方案。这最终会在未来发生，但在那之前 - 我们使用 JS 选项。

如果你关注 JS 世界 - 它与

Promises

几乎相同 - 我们得到了

bluebird

和

jQuery

实现，但最终

Promises

变成了原生，不再需要所有这些库和框架.

Answer 2