18

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

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

我读过的许多东西都声称虚拟 DOM 更快，因为每次发生变化时，真实 DOM 都必须重新布局（甚至重新绘制），但这不是真的 - 仅在以下情况下才需要重新布局一些 JS 代码明确要求一些样式/文本流相关的值（例如高度/宽度等）。并且大概大多数使用虚拟 DOM 的框架在这​​方面都做得不好——除非确保开发人员不会意外地这样做。

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

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

4

1 回答 1

7

虚拟 DOM 类似于当前情况的一种解决方法。W3C 正在努力重建 DOM 并使当前的“虚拟 DOM”成为浏览器的原生。但是你知道这有多慢——它必须被起草、讨论、接受，然后开始有趣的部分——在不同的浏览器中实现它。他们仍然存在 CSS3 和 flexbox 模型的问题——每个浏览器都有自己的条款和标准来处理这些问题。

虚拟 DOM 也是如此——他们仍然没有接受它是一个跨浏览器的解决方案。这最终会在未来发生，但在那之前 - 我们使用 JS 选项。

如果你关注 JS 世界——这几乎是一样的Promises——我们得到了bluebirdandjQuery实现，但最终Promises变成了原生的，不再需要所有这些库和框架。

于 2017-03-06T10:49:30.590 回答