图片来自网络
我们经常说到浏览器的性能问题，其实与浏览器性能息息相关的一点就是浏览器如何渲染我们的网页，这个时候我们就会涉及到一个概念，那就是浏览器的回流(重排，以下统称回流，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)
博客地址 北落师门
网友评论