在前端开发工作中，我们都会尽量的避免直接使用dom操作，为什么呢？难道是因为dom操作会导致产品的性能不好？但我们所使用的框架诸如vue、react等，它们最后的操作都是落在dom的身上。其实产生这种现象最主要的原因是——dom操作导致浏览器的重新渲染而带来的大量性能上的浪费。这里我们浅析一下，浏览器在渲染页面时会进行以下操作：
- 浏览器获取HTML文档并将其构建称文档对象模型，也就是DOM。
- 然后载入并解析CSS样式，构成层叠样式表模型CSSOM并与DOM结合生成一个映射了所有可见的DOM结构（不可见元素，例如display:none）的渲染树Render tree。
- 浏览器计算Render tree各个结点的信息（这个计算过程被称为排版）并调用UI引擎对其进行渲染（这个渲染过程被称为重绘），这就有了我们能够看到的页面。
当DOM的操作影响了元素的几何属性，浏览器就需要重新计算元素的几何属性，同样其他的相邻元素也会受到影响，浏览器就会重新构造Render tree，即重新进行排版与重绘操作，这两个操作消耗CPU和内存，故而过多的DOM操作而带来重复工作将会导致产品性能的下降。
下面我们再说说虚拟DOM，虚拟DOM其实就是框架生成的一个JS对象，它会将自身的元素与真实的DOM元素进行绑定，当我们进行某个操作时，它不会操作真实DOM频繁进行排版与重绘操作，它会对自身进行频繁的修改工作，然后一次性比较并修改真实的DOM中需要修改的部分，最后在真实的DOM中进行排版与重绘，即可以做到只渲染局部的DOM结构，而不需要重新构造一棵渲染树，从而大大降低CPU和内存的消耗。
小编水平有限，若有讲述不正确的地方还请指出~