浏览器性能优化--由重绘和重排来看虚拟DOM是如何提高浏览器性能的

浏览器解析HTML文件渲染过程

        首先我们说明一下，浏览器拿到HTML文件，到页面渲染完毕的过程（这一阶段并没有引起重绘和重排：这两个概念接下来说明）。

        1.浏览器请求到了HTML文件，开始解析生成DOM树。

        2.解析过程中，遇到link外联的CSS文件，向服务器请求CSS文件（此时并未停止解析HTML文件）。

        3.当CSS文件返回之后，浏览器开始解析CSS文件（此时HTML解析并没有停止即CSS的解析不会阻塞HTML解析）

        4.当我们解析HTML的过程中遇到了script标签，就会请求外联的JS文件（遇到script标签就会停止HTML的解析即JS文件会阻塞HTML解析，但是此时CSS的解析不会停止，因为CSS解析过程是不会被阻塞的）

        5.返回JS文件之后会解析JS文件，此时的HTML还在停止解析，CSS正在解析。

        6.直到JS解析完毕之后，并不会马上执行，而是需要等到CSSOM树构建完成之后才会执行。

        7.CSSOM树构建完毕，执行解析完成的JS文件，执行结束之后，HTML文件才会继续解析并生成DOM树。

        8.现在使用DOM树和CSSDOM树结合生成render渲染树。然后根据渲染树和盒子模型生成layout布局，最后进行页面绘制。

重绘和重排

        重绘和重排是在页面首次加载完毕也就是上述过程结束之后，页面发生变化时进行的。

重绘（repaint）

        屏幕的一部分要重绘。渲染树节点发生改变，但不影响该节点在页面当中的空间位置及大小。譬如某个div标签节点的背景颜色、字体颜色等等发生改变，但是该div标签节点的宽、高、内外边距并不发生变化，此时触发浏览器重绘（repaint）。

重排（reflow）

        也有称回流，当渲染树节点发生改变，影响了节点的几何属性（如宽、高、内边距、外边距、或是float、position、display：none;等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。譬如JS为某个p标签节点添加新的样式："display:none;"。导致该p标签被隐藏起来，该p标签之后的所有节点位置都会发生改变。此时浏览器需要重新生成渲染树，重新布局，即重排（reflow）。

重排一定会引起重绘，重绘不一定会引起重排。

        重排会造成很严重的时间浪费，因为他需要重新生成渲染树并进行绘制。因此减少重排的次数能有效的提高浏览器的性能。

减少重排的方法：

        1. 直接改变className，如果动态改变样式，则使用cssText（考虑没有优化的浏览器）；

        2. 让要操作的元素进行”离线处理”，处理完后一起更新；

                a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；

                b) 使用display:none技术，只引发两次回流和重绘；

                c) 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；

        3.不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存；

        4. 让元素脱离动流，减少回流的Render Tree的规模。

        还有就是虚拟DOM的使用可以有效地减少重排的次数。⬇️⬇️⬇️⬇️⬇️⬇️

虚拟DOM和真实DOM

        当下三大前端框架react、vue、angular，底层全都使用了虚拟DOM作为提高浏览器性能的方式。

        真实DOM：由HTML文件解析生成的DOM结构。真实DOM的改变会引起重绘和重排。

        虚拟DOM：虚拟DOM是根据真实DOM虚拟出来的一种树形数据结构。虚拟DOM的改变并不会引起重绘和重排。

工作机制

        真实DOM：在虚拟DOM出现之前，js直接对真实DOM进行操作，每一次操作之后都有可能使得DOM内容样式发生变化从而引起重排。之前好的方法是先让真实DOM脱离文档流，然后对其进行修改，修改完成之后将真实DOM再添加会文档里，这样就引起了两次重排。

        虚拟DOM：的原理是使用虚拟DOM对真实DOM进行一个映射，在页面发生变化之后，先对虚拟DOM进行修改，修改虚拟DOM并不会引起页面重排。在虚拟DOM修改完成之后，与真实DOM进行比较，更新真实DOM中发生变化的部分，通过少数的重排实现对页面的更新。

主要区别

        真实DOM操作花费的时间：真实DOM增删改 + （可能较多节点）重排与重绘
        虚拟DOM操作花费的时间：虚拟DOM增删改 + 真实DOM差异增删改（这与Diff算法效率有关） + （较少节点）重排与重绘