详聊一下经典考题-CSS回流和重绘

详聊一下CSS回流和重绘

因为最近一直在写CSS的demo,好久没有去看一看小册了，今天就来讲一下一本关于CSS的小册，我个人觉得里面的内容和例子很形象。玩转 CSS 的艺术之美 – JowayYoung – 掘金小册 (juejin.cn)

首先，先问一下，你知道什么是回流和重绘吗？

在渲染网页时，浏览器会进行两个关键的操作来显示网页，分别为回流（reflow）和重绘（repaint）。这两个操作往往会占用大量的资源，从而影响渲染效率，引起性能瓶颈。下面我来为您详细解释一下这两个操作的具体含义。

回流（reflow）

指的是浏览器必须重新计算元素的大小和位置等布局信息，并根据新的布局信息重新布局页面的过程。比如当您修改了元素的宽度、高度、字体大小、边距、位置、样式等属性时，浏览器就需要触发回流操作——重新计算并布局页面，从而达到显示修改后的效果。回流是一种相对而言比较耗费性能的操作，可能会涉及到页面的整体重新渲染，因此如果频繁触发回流操作，就会严重影响页面的渲染性能。

重绘（repaint）

指的是浏览器对页面进行重新绘制的过程，这个过程是根据元素在页面上的显示位置、边框、背景等样式属性进行的。当您修改了元素的颜色、背景等属性时，浏览器就会触发重绘操作——重新渲染页面，显示修改后的样式。

回流和重绘都是浏览器进行网页渲染时的重要操作，它们的主要区别在于：

• 回流是一种相对耗费性能的操作，可能会导致全局的重新布局。
• 重绘则比较快捷，仅涉及到样式的变化，不会触及页面的布局信息。

因此，为了优化页面渲染性能，我们应该尽量避免触发回流操作，而尽可能只进行重绘操作。具体而言，可以采取以下措施来减少回流和重绘的次数：

• 尽量减少样式的变化。在修改元素样式时，应该尽可能使用类名修改样式，而不是直接修改样式属性值。
• 容器元素的大小和位置变化会导致其内部元素的位置和大小等信息发生变化，从而触发回流操作。因此应该避免设置过多的无用空白、填充或占位符元素。
• 避免使用 CSS 表达式等过于复杂的 CSS 语句。
• 将动画效果等操作集中在一个类似于 canvas 的容器内部，避免在普通的 HTML 元素上触发动画渲染。
• 对于一些需要频繁 DOM 操作的场景，比如循环插入大量元素时，可以先将元素插入到文档片段中，再将文档片段一次性添加到页面中，避免频繁的回流操作。

小册的例子

我最喜欢的就是这个例子，真的太形象了。

有无更好的方式可帮助理解回流重绘？答案是有的。

某一天星巴克发行一套很有纪念价值的杯子，男同胞们为了买到心仪的杯子给女友当惊喜礼物，通宵达旦搬张板凳去星巴克门口排队。此时形成的队伍是有序的，毕竟大家都是文明人，不可能随便插队吧，先到先拿，这道理谁都懂！

可是总有一些人不按常理出牌，别人排队排得那么辛苦，他一到来就仗着自己有钱有势人多马多，插队到最前面。若他插队成功，那后面的人都要往后挪一位。此时队伍就要重新往后挪，甚至引发多人斗殴，但混乱的情况总会被控制下来，此时就得重新排队，而原先的队伍顺序经过这次斗殴就可能不根据原先的队伍顺序排队了。几何属性变了，就要重新排队，这就是回流。重新排队啊！

一位漂亮妹纸排队排得久肚子呱呱叫，就与另一位同伴交换，她去买早餐，而这位同伴代替她的位置。各位男同胞可能发现这位妹纸更漂亮了。没错，外观属性改变了，变漂亮了，但除了妹纸，其余人的位置与顺序都无发生变化，所以肯定不会发生上述重新排队的情况。外观属性变了，但几何属性未变，这就是重绘。无需重新排队，还有漂亮妹纸看，大家都很乐意啊！