前言

在聊这个概念的时候我们首先要弄清楚以下问题

浏览器是如何渲染页面的？

1. 解析（parser）HTML，生成DOM树（DOM Tree）。
2. 同时解析（parser）CSS,生成样式规则（style rules）。
3. 根据生成的DOM树和CSS样式规则生成渲染树
4. 进行布局Layout（回流和重排）：根据渲染树，得到节点的位置及大小（几何信息）
5. 进行绘制Painting（重绘）：根据计算和获取的几何信息进行整个页面的绘制
6. Dispaly：显示在页面上

根据浏览器的渲染规则引出重绘和重排

回流Layot

当渲染树中部分或者全部元素尺寸、结构、布局发生变化的时候，浏览器就会重新渲染部分或者全部的html文档

• 页面的首次刷新
• 浏览器窗口变化
• 元素的大小和位置变化
• 改变字体大小
• 内容变化
• 激活css伪类
• 脚本操作dom（添加删除元素）

重绘Painting

由于节点（元素）的样式发生改变不影响文档流中的位置和文档布局，比如：color、background-color、outline等待

总结

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