26 | 虚拟DOM：虚拟DOM和实际的DOM有何不同？
李兵
该思维导图由 AI 生成，仅供参考
虚拟 DOM 是最近非常火的技术，两大著名前端框架 React 和 Vue 都使用了虚拟 DOM，所以我觉得非常有必要结合浏览器的工作机制对虚拟 DOM 进行一次分析。当然了，React 和 Vue 框架本身所蕴含的知识点非常多，而且也不是我们专栏的重点，所以在这里我们还是把重心聚焦在虚拟 DOM 上。
在本文我们会先聊聊 DOM 的一些缺陷，然后在此基础上介绍虚拟 DOM 是如何解决这些缺陷的，最后再站在双缓存和 MVC 的视角来聊聊虚拟 DOM。理解了这些会让你对目前的前端框架有一个更加底层的认识，这也有助于你更好地理解这些前端框架。
DOM 的缺陷
通过前面一系列文章的学习，你对 DOM 的生成过程应该已经有了比较深刻的理解，并且也知道了通过 JavaScript 操纵 DOM 是会影响到整个渲染流水线的。另外，DOM 还提供了一组 JavaScript 接口用来遍历或者修改节点，这套接口包含了 getElementById、removeChild、appendChild 等方法。
比如，我们可以调用document.body.appendChild(node)往 body 节点上添加一个元素，调用该 API 之后会引发一系列的连锁反应。首先渲染引擎会将 node 节点添加到 body 节点之上，然后触发样式计算、布局、绘制、栅格化、合成等任务，我们把这一过程称为重排。除了重排之外，还有可能引起重绘或者合成操作，形象地理解就是“牵一发而动全身”。另外，对于 DOM 的不当操作还有可能引发强制同步布局和布局抖动的问题，这些操作都会大大降低渲染效率。因此，对于 DOM 的操作我们时刻都需要非常小心谨慎。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
虚拟DOM在前端开发中扮演着重要角色，本文深入探讨了虚拟DOM的作用和原理。首先，文章指出了频繁操作DOM可能导致性能问题，尤其在复杂页面或单页应用中。随后，详细解释了虚拟DOM的概念和运行机制，包括创建阶段和更新阶段。特别强调了虚拟DOM的更新机制，引入了React Fiber更新机制，以解决复杂虚拟DOM比较导致的性能问题。此外，从双缓存和MVC模型的视角探讨了虚拟DOM的重要性。文章还介绍了虚拟DOM在MVC模式中的角色，以及在React和Redux构建MVC模型的具体实现过程。总的来说，本文深入浅出地介绍了虚拟DOM的原理和应用，对于理解前端框架和提升页面性能有着重要的指导意义。通过本文，读者能够全面了解虚拟DOM的解决问题和在MVC模式中的应用，为技术开发提供了有益的参考和指导。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《浏览器工作原理与实践》，新⼈⾸单¥59
《浏览器工作原理与实践》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(35)
- 最新
- 精选
mfist1. 频繁更新dom引起的性能问题 2. 将真实DOM和js操作解耦，减少js操作dom复杂性。 老师答疑的时候可以介绍下react的fiber吗？感觉李老师的文章通俗易懂，很受益（网上文章分析参差不齐的） 今日总结： 为什么会出现虚拟DOM？javascript直接操作DOM可能会引起重排 重绘等操作（强制同步布局和布局抖动）引起性能问题。这是需要一个中间层来优化dom的操作（批量更新dom，优化更新dom细节），虚拟DOM就呼之欲出了。之后从双缓存和MVC模型的角度来解析了虚拟DOM。2019-10-031331
AIGC Weekly 周报虚拟DOM的出现根本意义上不是为了解决 js 频繁操作DOM而引起的性能问题，因为如果通过 js 来操作DOM，那么无论用什么方式，多少动作都需要执行，虚拟DOM并没有减少操作。虚拟DOM的意义在于改变了开发模式，之前是需要手动管理DOM，数据和DOM操作糅合在一起，开发效率低下；之后是使用框架/库自动管理DOM，数据驱动DOM的更新，只需要关注数据的变化即可。但是这会遇到一个问题，就是当数据改变时，框架需要更新全部的DOM吗？显然这是不可接受的，js 操作DOM的代价很高，所以当数据变化时并不直接对DOM进行更新，而是先对应在虚拟DOM上，通过与之前的虚拟DOM进行比较，确定需要更新的变动，然后在对应在真实的DOM上。2021-05-29530
AMIR老师，我用js文件里面操作dom原生操作，不也是这个js文件执行完，也就是所有的dom原生操作都做完，才统一渲染页面么？我觉得虚拟dom只是对比innerHtml更有优势，并且屏蔽了原生的操作，可以使更多人来使用数据驱动视图，而不必要去操作麻烦的原生操作，就从效率来说，虚拟dom肯定比原生的差啊，虚拟dom对比完了，不还是得调用原生的操作么？他至少比原生多了diff算法的时间，麻烦老师解答下，提了挺多问题了，老师有空看一下2019-12-301515
柒月主要还是解决频繁操作DOM引起页面响应慢的问题。 虚拟DOM就是一个JS对象，通过diff算法比较新老DOM树的差别，来达到最小化局部更新的目的。 其本质不过是用JS的运算性能的消耗来换取操作DOM的性能消耗。2019-10-03510
刘弥说虚拟 DOM 解决的问题，那一定应该是和 DOM 存在什么问题来进行比较吧？ DOM 存在的问题： - 对 DOM 进行操作时往往会引起重排、重绘 - 编写不当的代码操作 DOM 还会引起强制布局和布局抖动 - 复杂的页面往往会频繁的操作 DOM 虚拟 DOM 对此的优势： 虚拟 DOM 最终当然也会产生重排、重绘等操作，但是由于虚拟 DOM 对 真实 DOM 的预解析和变化搜集的双缓存机制，使得操作 DOM 的频率会明显的降低。 操作 DOM 的频率降低同样会使得强制同步布局和布局抖动得到一定的优化。 这个是我对于虚拟 DOM 的优势的理解，如果有什么不对的，还望指正。2020-02-1318- 😎似乎大家都没有提到一点，虚拟dom可以实现跨端，如React Native2021-03-166
桃翁老师，为什么 React 的 Fiber 不用 async/await 来实现呢？2019-10-2276
隔夜果酱李老师后面会考虑React源码类的专栏么? 网上的视频和文章很多都流于表面,或者生搬硬套的进行解释,看的让人头大. 如果李老师有精力和兴趣的话,希望可以开专栏为我们指点迷津呀.2019-10-0315
小兵老师，文中的虚拟Dom收集到足够的变化是什么意思？会不会导致页面的响应变慢？2019-10-0314
穿秋裤的男孩读完文章之后，感觉虚拟DOM技术和DOM碎片（createDocumentFragment）很像，都是提供缓存的策略。2020-04-213
收起评论