CSS回流（Reflow）与重绘（Repaint）

一、介绍

CSS中的回流与重绘是指当HTML或CSS节点发生变化时，浏览器重新绘制和展示页面的过程。回流和重绘会导致浏览器性能降低，应尽量减少。

二、浏览器解析页面的流程

浏览器解析页面主要分为以下的流程：

1.解析HTML，形成HTML DOM树

2.解析CSS，生成CSS规则树

3.将HTML DOM树与CSS规则树结合（attachment），生成Render树

4.布局Render树（layout/reflow），负责各元素大小、位置的计算

5.绘制Render树（painting），绘制页面像素信息

6.浏览器将各层信息发送给GPU，GPU将各层合成，显示在屏幕上

三、回流与重绘的发生阶段

当HTML或CSS发生变化的时候，就会导致浏览器重新解析HTML DOM树和CSS状态树，导致了重新布局（layout）和渲染（repaint）。

· 回流：即为layout或reflow，指重新进行布局。一般意味着元素的大小、位置、结构、内容、字体大小等发生了变化，需要重新解析。

· 重绘：即为repaintÿ