CSS之重绘和回流

喜欢ヅ旅行 2024-04-18 16:45 60阅读 0赞

### 浏览器渲染机制 ###

浏览器使用流式布局模型 (Flow Based Layout)

所有的浏览器渲染引擎工作流程大致分为5步：创建 DOM 树 —> 创建 Style Rules -> 构建 Render 树 —> 布局 Layout -—> 绘制 Painting。

第一步，构建 DOM 树：用 HTML 分析器，分析 HTML 元素，构建一棵 DOM 树；

第二步，生成样式表：用 CSS 分析器，分析 CSS 文件和元素上的 inline 样式，生成页面的样式表；

第三步，构建 Render 树：将 DOM 树和样式表关联起来，构建一棵 Render 树（Attachment）。每个 DOM 节点都有 attach 方法，接受样式信息，返回一个 render 对象（又名 renderer），这些 render 对象最终会被构建成一棵 Render 树；

第四步，确定节点坐标：根据 Render 树结构，为每个 Render 树上的节点确定一个在显示屏上出现的精确坐标；

第五步，绘制页面：根据 Render 树和节点显示坐标，然后调用每个节点的 paint 方法，将它们绘制出来。

### 重绘 ###

由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的，称为重绘，例如`outline`, `visibility`, `color`、`background-color`等，重绘的代价是高昂的，因为浏览器必须验证DOM树上其他节点元素的可见性。

### 回流 ###

回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。

*  添加或删除可见的DOM元素
 *  元素的位置发生变化
 *  元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
 *  内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
 *  页面一开始渲染的时候（这肯定避免不了）
 *  浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

**大部分的回流将导致页面的重新渲染。回流必定会发生重绘，重绘不一定会引发回流。**

### 如何尽量减少重绘和回流 ###

**css：**

*  避免使用table布局。(可能很小的一个小改动会造成整个 `table` 的重新布局)
 *  尽可能在DOM树的最末端改变class。(回流是不可避免的，但可以减少其影响。在DOM树的最末端改变class，可以限制了回流的范围，使其影响尽可能少的节点。)
 *  避免设置多层内联样式。
 *  将动画效果应用到`position`属性为`absolute`或`fixed`的元素上(避免影响其他元素的布局，这样只是一个重绘，而不是回流)
 *  避免使用CSS表达式（例如：`calc(),`可能会引发回流）

**JavaScript：**

*  避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性
 *  避免频繁操作DOM，创建一个`documentFragment`，在它上面应用所有DOM操作，最后再把它添加到文档中
 *  也可以先为元素设置`display: none`，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘
 *  避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来
 *  对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流