从DOM到虚拟DOM——前端DOM发展史、性能与产能双赢背后的思考

作者：samul

原文：https://juejin.cn/post/6900887137239957512

写在前面的一些话

从我上大学开始正式认识前端这个岗位到现在已经整整过了六年，这六年于我而言就像是观赏了一场盛大的游园活动。无数各式各样的框架、模式、开发思路如同花车一般从眼前掠过又走远。留下了一地残乱的余烬和破碎的思考。

当我抬头的时候，发现这已经是余留MVVM的时代。vue和react大行其道，刚刚毕业的同学们仿佛已经默认不会这俩框架之一就找不到工作。在面试的时候他们面对相关的提问也能娓娓道来，让他们阐述源码中的一些原理也同样能胜任。

但是，源码的原理永远是一层浮于表象的阐述，你未曾一点点认真的追踪每一个步骤，也未曾在框架设计的时候渗入自己的思考和提案，更不曾去了解框架被设计和迭代时的需求和背景。如此一来,你了解的永远只能是 HOW，而不是背后真正重要的 WHY。

这几天听阿里的P8止水大佬说过，在大部分情况下，p7以上的技术实力并无太大的区别，能以技术实力走上代码巅峰的人寥寥无几，更多的代码攀登者将以思考的方式去进步，因此他们去拓宽他们视野，去了解代码演进的历程，去预判未来的趋势。而这，绝不是仅仅明白 HOW就能到的。

现在的我，只是一个两年半经验的小前端。但工作经验并不会对技术的喜爱和思考产生一丝一毫的障碍。计算机是现代社会进程中真正的魔法，而我们，则是掌控这魔法的魔法师，参破魔法背后的奥秘，在代码的巴别塔上留下我们的痕迹，应是吾辈所求。

从DOM到虚拟DOM，我们应该提出哪些问题？

在如今面向面试学习的大氛围下，我们最常用被问到的关于虚拟DOM的问题是：

“什么是虚拟DOM？”

“为什么要用虚拟DOM？”

第一个问题其实比较好解答，个人觉得比较好的回答是：“虚拟DOM本质上是一组JS到DOM的映射，他在表现形式上呈现为一个包含了所有DOM所需信息的JS对象。”其实一般而言，是什么之类的问题会比较好解答。因为你只需要描述他，而为什么之类的问题就往往难以下口，因为其往往内部蕴含这很多很多延伸的信息。

于是乎在我听到看到过对于第二个问题的解答中，最多的是：“选择使用虚拟DOM的原因是因为直接操作DOM节点的代价太昂贵，而操作JS的成本就要小的多，直接操作DOM节点会引起浏览器的回流重绘，JS则可以发挥他的优势自由选择操作时机和方式。”

但真的仅仅是如此吗？

让我们拉开我们的视野，不再死盯着虚拟DOM这一个单词，而是回望整个前端高速迭代的这几年，重新思考一下以下这些问题。

• 在没有虚拟DOM前，我们经历了什么？
• 是什么让程序员们萌生了使用虚拟DOM的想法？
• 虚拟DOM的优势到底是什么，是什么让它成为了时代的选择？
• 是什么推动了前端职能和功能的高速发展？

身为前端，我们经历了什么？

当我参加工作时，其实vue与react已经成为主流，虽说不像如今这般火爆，但也是妥妥的加分项目。页面的需求和职能已经相当复杂。让我们时光倒退，从头来看这前端人的发展历程。

静态页面与切图——低需求下的低要求

从前（听说的），有这么一个年代，前端同学们最麻烦的工作是切图，最枯燥的任务是搓DOM，所以又被成为切图仔...

那时候只有一些初级版本的js框架，包括但不限于prototype，开发者靠着大量手搓DOM和原生JS实现一些简单的交互，高端的操作可能会事扒脚本，扒组件以实现自己的功能。

这个时期的前端开发者很纯粹，那时尚未开始前后端分离的进程，开发者要做的就是将页面合理的呈现出来，以及实现不多的交互需求。

JQ时代——日益增长的需求与低下开发效率的矛盾

一件事物一旦出现，历史的浪潮就会裹挟着它不断的向前进步。很快的，人们对于页面的要求不再是单纯的能用就行——他们需要更加炫酷的交互，这为前端工程师们带来了难题，究其原因，还是因为那时原生的jsapi实在是又缺又难用。于是，JQ等一大批js框架便应运而生了。

同时代的框架包括但不限于JQ，Dojo，prototype等等，这些对于年轻的前端工程师们来说无疑已经是近乎古董的代名词。可是在当时那个年代，后浏览器战争时代带来的后遗症——兼容性问题已经是折磨当时工程师们的主要凶手（当然现在也是，但在越来越丰富的插件辅助下已经缓解许多）。JQ凭借着其优异的兼容性和性能，在一代js框架中占据了主流。

从当今的眼光来看，JQ依然是不可多得的好框架，得益于Sizzle选择器引擎的研发成功，其性能有了质的突破。它将编写前端代码从后端操纵类的思维中脱离出来，便携式的获取一个或一组DOM节点，并且提供了链式调用。前端开发者们不再需要费劲心思的去想着怎么去合理的操作DOM，他们只要关心业务逻辑的实现即可。

JQ时代是需求和效率第一次大型冲突的产物，从此，解放生产力成为了前端工程师心中亘古不变的追求。

后JQ时代——进一步提升效率的模板语法

JQ和其高度发达的生态环境催生了JQ插件的高速发展，当时的前端开发者们想要实现一个功能，第一个反应就去搜插件，所以在当时的HTML文件内经常密密麻麻的插入了十几甚至几十的