重绘和回流（重排）

想要了解重绘和回流，首先需要知道浏览器是如何进行页面渲染的

 解析（parser）HTML，生成DOM树（DOM tree）

同时解析（parser）css，生成样式规则（Style Rules）

根据DOM树和样式规则，生成渲染树（render Tree）

进行布局layout（回流/重排）：根据生成的渲染树，得到节点的几何信息（位置，大小）

进行绘制painting（重绘）：根据计算和获取的信息进行整个页面的绘制

Display：展示在页面上

 回流（重排）：

当渲染树（Rander Tree）中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或者全部文档的过程称为回流

重绘：

由于节点（元素）的样式改变并不影响它在文档流中的位置和文档布局时（比如：color、background-color、outline等），称为重绘。

重点：

 重绘不一定引起回流，而回流一定会引起重绘。

会导致回流（重排）的操作：

 页面的首次刷新

浏览器的窗口大小发生改变

元素的大小或者位置发生改变

改变字体的大小

内容的变化（如：input框的输入，图片的大小）

激活css伪类（如：     ：hover）

脚本操作DOM（添加或者删除可见的DOM元素）

简单理解就是影响到了布局，就会有回流

后面介绍如何尽量防止回流和重绘的操作和方法可以看大佬的

面试官：怎么理解回流跟重绘？什么场景下会触发？ | web前端面试 - 面试官系列 (vue3js.cn)