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

写在前面的一些话

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

当我抬头的时候，发现这已经是余留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的优势