reflow（回流或重排）and redraw or repaint（重绘）

版权声明：本文为博主原创文章，未经允许不得转载! https://blog.csdn.net/weixin_42259266/article/details/88830564

浏览器下载HTML文档到显示在页面上这是一个复杂的过程，浏览器首先会根据html构建一个DOM树，紧接着再去解析css生成一个样式结构体，DOM树和样式结构体组合生成一个渲染树，浏览器再根据渲染树进行显示页面。

重绘，当一个元素的样式发生改变，比如背景颜色改变，比如字体颜色改变，比如边框颜色改变等，诸如以上这些会触发浏览器的重绘。

重排（回流），窗口的尺寸大小，操作DOM，比如添加和删除DOM，设置offsetwidth、offsetheight，通过style设置样式，元素的位置改变等。

注意，在获取一些元素的属性值时也是会触发回流的，比如获取一个元素的offsettop、offsetleft、offsetwidth、offsetheight，scrolltop、scrollleft、scrollwidth、scrollheight，clienttop、clientleft、clientwidth、clientheight。以及通过getComputedStyle和currentStyle来获取样式值，为什么？因为在获取这些值时，需要保证即时性和准确性，这就要求浏览器进行回流操作。

重绘的速度要快于重排（回流）的速度，重排（回流）一定会触发重绘，但是重绘不一定触发回流或重排。

什么是DOM的离线化？

给一个元素设置display：none；将其中页面中‘拿掉’（事实上就是隐藏）的过程，就是DOM的离线化操作。

不管是重绘还是回流，都是基于当前DOM元素在当前页面上这个大前提下实现的，如果该元素脱离了当前页面，也就是说该元素处于离线化，那么后续对该元素的所有操作都无法触发回流或者重绘。因此，当我们需要频繁的对一个元素进行重绘和回流操作时，可以先使其处于离线化状态，对于操作完成后在将其上线，这样做也会提升性能，减少牺牲的代价。

flush队列告诉我们浏览器还是聪明的，为什么？

因为浏览器并不把每一次对DOM操作都及时的反馈为一次重绘或者回流，如果这样的话那么浏览器在性能上来说是扛不住的，浏览器会把重绘或者回流的操作先塞进flush队列中，当这个队列中的项达到一定规模以后（也可能是经过一段时间间隔以后，甚至可能在一些不得已的情况），在集中进行一次回流或者重绘，这样也就可以大大节省浏览器渲染的性能。