浅谈css3之回流与重绘

「这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战」

在复习回流与重绘之前，我们熟悉一下浏览器渲染页面的过程:

• 解析HTML，构建 DOM 树

• 解析 CSS ，生成 CSS 规则树

• 合并 DOM 树和 CSS 规则，生成 render 树

• 布局 render 树（ Layout / reflow ），负责各元素尺寸、位置的计算

• 绘制 render 树（ paint ），绘制页面像素信息

• 浏览器会将各层的信息发送给 GPU，GPU 会将各层合成（ composite ），显示在屏幕上

回流:

当render树中的一些元素因为元素的大小，布局等改变而需要重新构建,这就称为回流。

在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘

引起回流的原因:

1. 浏览器窗口尺寸大小改变
2. 元素位置和尺寸大小发生改变的时候
3. 新增和删除可见元素
4. 元素内容发生改变（比如文字、图片大小改变等等）
5. 元素字体大小变化。
6. 页面第一次渲染 在页面发生首次渲染的时候，所有组件都要进行首次布局，这是开销最大的一次回流。

重绘:

当render树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局

引起重绘的原因:

1.背景色的改变 2.透明度的改变

一些非元素大小或布局更改导致的变化会引起重绘 注意:

• 每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render树

• 回流必将引起重绘，而重绘不一定会引起回流。回流会导致渲染树需要重新计算，开销比重绘大，所以我们要尽量避免回流的产生