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

reactjs Vue.js

DavaidTony宝儿

2020-04-07

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

据我了解,虚拟DOM是一棵由Javascript对象组成的树,带有父母/子女等,但没有真正DOM的大多数“繁重”功能。框架(例如React / Vue)通过从头开始创建虚拟DOM来响应模型状态的更改,然后对它们的虚拟DOM的最后一个版本进行比较以找出要更改的实际DOM。

我读过的很多东西都声称虚拟DOM更快,因为真正的DOM每次发生更改时都必须重新布局(甚至重新绘制),但这不是正确的-仅在以下情况下才需要重新布局某些JS代码明确要求某些样式/文本流相关的值(例如,高度/宽度等)。大概大多数使用虚拟DOM的框架都无法做到这一点-除了确保开发人员不会意外地做到这一点。

同样,最近在某些时候,浏览器正在考虑为DOM突变提供事件挂钩,但是这个想法已经被放弃,这意味着在DOM突变时不需要触发任何事件。

所以我的问题是,就收益而言还有什么呢?JS框架具有什么额外的信息或额外的自由性,使其具有执行虚拟DOM优化的“逻辑”能力?

第4054篇《为什么浏览器不能在内部使用虚拟dom作为优化?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
凯西里 2020.04.07

虚拟DOM类似于针对当前情况解决方法W3C正在努力重建DOM,并使当前的“虚拟DOM”成为浏览器的本机。但是您知道它的过程很慢-必须起草,讨论,接受并开始有趣的部分-在不同的浏览器中实现它。他们仍然对CSS3和flexbox模型有疑问-每个浏览器都有使用它们自己的条款和标准。

虚拟DOM也是如此-他们仍然没有将其作为跨浏览器解决方案。这最终会在将来发生,但是直到那时-我们使用JS选项。

如果您遵循JS的世界(与JS的世界几乎一样),Promises我们会获得bluebirdjQuery实现,但是最后Promises还是原生的,不再需要所有这些库和框架。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android