我从 16 年使用 vue,到后来的 angular、react 等签到框架,到现在已经 3 年多了,在使用中倒是没有遇到太大的问题.对 Virtual DOM 的概念也能说出个一二,但一直没有动手实现,这片博文也算是对 Virtual DOM 加深理解,并动手实现一个简单的 Virtual DOM 算法.
在理解一个东西之前,我更喜欢问这是什么,其次再是为什么.那么什么是 Virtual DOM 呢?
在前端 mvvm/mvc 框架出现之前,页面上的交互都是 js 控制(当然现在还是)DOM 操作,而我们知道 DOM 操作的性能开销其实是比较昂贵的(当然也没想象中那么昂贵),特别是一些大型 web 应用,二期构建程序思维的不同,会导致很多无所谓的 DOM 更新.那么我们能不能想办法避免不必要的 DOM 更新呢?
其实所谓的 Virtual DOM 主要就是解决上面的问题,如果我们先用 js 构建一颗 js 的 DOM 树,再将 DOM 树映射(渲染)到 html 文档上.当需要更新 DOM 时,我们先创建一颗新的 js DOM 树,再与原来的 js DOM 树对比,只将需要更新的部分更新到原来的 js DOM 树上,再更新真实 DOM.
另外每一个 DOM 对象都有很多属性,当然 DOM 对象的属性太多了,如果用来模拟 DOM 对象的 js 对象包含了所有属性,那这样的一个 Virtual DOM 所占用的资源是相当可怕的,所以我们的只会用到一部分常用属性.
那么 Virtual DOM 是不是一定比直接操作 DOM 更快呢,其实不是的.实际上 Virtual DOM 最后一个步骤也会操作真实 DOM,这是无法避免的.如果不使用 Virtual DOM 并且保证所有的 DOM 操作都是合理的,那 Virtual DOM 的效率并比不上原生 js 操作 DOM,但是软件工程还需要考虑到开发效率和后期维护等,实际上我们可以放弃这一部分微小的性能提升,带来的开发效率和后期维护上的收益要远远大得多.
本来想自己动手写一个简单的 Virtual DOM 实现,尽管参考了很多 Virtual DOM 的文章,终究还是烂尾了(败在了 Virtual DOM diff 算法部分).在这个过程中我学到了很多东西,这也说明自己的水平还很欠缺,需要学习的地方太多.学得越多,走得越远,共勉之.
参考文章: 如何理解 Virtual DOM?
[越努力，越幸运！]