浏览器的重绘与回流

浏览器的渲染过程：

具体过程：

1. 浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象 。dom树里面包含了所有的html tag，包括display:none隐藏，还有用JS动态添加的元素等。DOM树的构建是一个深度遍历的过程（当前节点的所有子节点遍历完成才会去构建当前节点的下一个兄弟节点）.

2. 在构建DOM树的同时，浏览器也会把CSS解析成 CSS树,浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式.

3. dom tree和样式结构体(cssom)结合后构建呈现树(render tree),render tree有点类似于dom tree，但其实区别有很大，render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。

4. 浏览器在拿到 render 树后，计算出每个节点在屏幕中的位置。（这个过程是完成回流的过程）

5. 遍历render树，并且根据css的设置元素的外观风格（eg:color, background-color…）（这个过程就是完成重汇的过程）
   回流和重绘的概念理解：
   
   注意：

   display: none 与 visibility: hidden 虽然都是隐藏元素。但前者是使元素从dom结构中消失，后者是dom中依然存在只是不在界面显示，所以前者为回流（需要改变dom结构），后者为重绘

6. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。

7. 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

注：回流必将引起重绘，而重绘不一定会引起回流。回流是页面结构变化（元素大小，定位），所以是整体刷新；重绘是某些元素外观风格（颜色等）变化，不影响整体布局结构，只需要局部刷新。
回流的发生
9. 修改元素的数量

10. 改变元素的位置

11. 改变元素的大小：

1>. 修改边距（padding）

2>. 修改边框粗细（border）

3>. 宽度和高度（width，height）

4>. 填充内容大小引起的元素width，height的改变

4、页面渲染初始化

5、浏览器窗口尺寸改变（以及改变offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight这一系列属性）

参考文章：
https://www.html.cn/archives/4996
https://blog.csdn.net/qq_42269433/article/details/81133772
https://blog.csdn.net/u014541501/article/details/80166815