浏览器的回流(重排)与重绘

图片来自网络

我们经常说到浏览器的性能问题，其实与浏览器性能息息相关的一点就是浏览器如何渲染我们的网页，这个时候我们就会涉及到一个概念，那就是浏览器的回流(重排，以下统称回流，Reflow)与重绘(Repaint)。

回流

对回流这个词，我的理解是回炉重造，即对于整个网页重新渲染一遍。那我们可以思考一下，从性能角度来讲，如果我们来写浏览器的代码，一定是再必须要重新渲染网页的时候再重新渲染，那就推出一个问题，什么时候浏览器必须要重新渲染网页？

其实必定是当网页的元素坐标发生变化的时候，这里我们可以理解为有很多人在排队，大家仅仅的依靠在一起，那什么时候大家需要都挪动下位置呢？我觉得要么就是一个人或者几个人突然变胖了/瘦了，那大家如果想要继续依靠在一起，就得都动一动；或者其中一个人或者几个人挪动了一下自己的位置，他势必也会挤着其他人去动一动位置。这种重新渲染全部或部分文档的动作我们就叫做回流，因为大家都需要挪动下位置，也就导致我们这个网页需要回炉重造了。

所以会导致回流的操作(包括但不限于)：

• 页面首次渲染

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

• 元素尺寸或位置发生改变

• 元素内容变化（文字数量或图片大小等等）

• 元素字体大小变化

• 添加或者删除可见的DOM元素

• 激活CSS伪类（例如：:hover）

重绘

还是拿排队举例，当队伍中的一个人需要换一件衣服，比如他从穿黄衣服换成穿红色的衣服，这个时候只要这一个人换件衣服就行了，对其他人并没有影响，这种情况我们就叫做重绘。浏览器只需要对该元素进行重新绘制即可。

所以会导致回流的操作(包括但不限于)：

• 修改color/background-color/visibility

由上述可见，其实回流对浏览器性能的消耗是高于重绘的，而且回流的操作一定会伴随着重绘，重绘却不一定伴随回流。那现代浏览器其实对这块是有进行优化处理的，如果我们的队伍总是需要变换位置，我们就统一来一次大排队。

那么我们在平时的工作中，如果针对于回流和重绘写出性能更好地代码呢？有以下几点可以注意的：

CSS

• 避免使用table布局。

• 尽可能在DOM树的最末端改变class。

• 避免设置多层内联样式。

• 将动画效果应用到position属性为absolute或fixed的元素上。

• 避免使用CSS表达式（例如：calc()）。

JavaScript

• 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。

• 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。

• 也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。

• 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。

• 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

参考 浏览器的回流与重绘 (Reflow & Repaint)