浏览器的重绘与回流 | 七日打卡

1,272 阅读5分钟

学习重绘和回流前,需要先了解浏览器的渲染原理

一、浏览器渲染原理

浏览器渲染一共有五步

  1. 处理 HTML 并构建 DOM 树。
  2. 处理 CSS 构建 CSSOM 树。
  3. 将 DOM 与 CSSOM 合并成一个渲染树。
  4. 根据渲染树来布局,计算每个节点的位置。
  5. 调用 GPU 绘制,合成图层,显示在屏幕上

第四步和第五步是最耗时的部分,这两步合起来,就是我们通常所说的渲染

具体如下图过程如下图所示:

来源网络图片

渲染

  • 网页生成的时候,至少会渲染一次

  • 在用户访问的过程中,还会不断重新渲染

重新渲染需要重复之前的第四步(重新生成布局)+第五步(重新绘制)或者只有第五个步(重新绘制)

什么情况阻塞渲染?

  • 首先渲染的前提是生成渲染树,所以 HTML 和 CSS 肯定会阻塞渲染。如果你想渲染的越快,你越应该降低一开始需要渲染的文件大小,并且扁平层级,优化选择器。

  • 然后当浏览器在解析到 script 标签时,会暂停构建 DOM,完成后才会从暂停的地方重新开始。也就是说,如果你想首屏渲染的越快,就越不应该在首屏就加载 JS 文件,这也是都建议将 script 标签放在 body 标签底部的原因。

  • 当然在当下,并不是说 script 标签必须放在底部,因为你可以给 script 标签添加 defer 或者 async 属性。

  • 当 script 标签加上 defer 属性以后,表示该 JS 文件会并行下载,但是会放到 HTML 解析完成后顺序执行,所以对于这种情况你可以把 script 标签放在任意位置。

  • 对于没有任何依赖的 JS 文件可以加上 async 属性,表示 JS 文件下载和解析不会阻塞渲染。

二、重绘(repaint)

当一个元素的外观发生改变,但没有改变布局,重新把元素外观绘制出来的过程,叫做重绘。

常见的引起重绘的属性:

  • color
  • border-style
  • visibility
  • background
  • text-decoration
  • background-image
  • background-position
  • background-repeat
  • outline-color
  • outline
  • outline-style
  • border-radius
  • outline-width
  • box-shadow
  • background-size

三、回流(reflow)

当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时,浏览器重新渲染部分或全部文档的过程称为回流。

常见的引起回流的属性和方法:

  • clientWidth、clientHeight、clientTop、clientLeft
  • offsetWidth、offsetHeight、offsetTop、offsetLeft
  • scrollWidth、scrollHeight、scrollTop、scrollLeft
  • scrollIntoView()、scrollIntoViewIfNeeded()
  • getComputedStyle()
  • getBoundingClientRect()
  • scrollTo()

触发回流有以下几种情况

有以下几种情况:

  1. 页面首次渲染
  2. DOM 操作(对元素的增删改、顺序变化等)
  3. 内容变化,比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变;
  4. 元素位置的改变,或者使用动画;
  5. 元素尺寸的改变——大小,外边距,边框;
  6. css 属性的更改或者重新计算
  7. 增删样式表内容
  8. 修改 class 属性
  9. 浏览器窗口变化(滚动或缩放)
  10. 伪类样式激活(:hover 等)

四、重绘和回流的关系

回流必定会发生重绘,重绘不一定会引发回流。

五、性能影响

  • 回流比重绘的代价要更高。

  • 有时即使仅仅回流一个单一的元素,它的父元素以及任何跟随它的元素也会产生回流。即:改变父节点里的子节点很可能会导致父节点的一系列回流。

六、优化

1、浏览器自己的优化:

浏览器会维护 1 个队列,把所有会引起回流、重绘的操作放入这个队列,等队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会 flush 队列,进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

2.减少重绘和回流

CSS
  1. 避免使用 table 布局。

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

  3. 避免设置多层内联样式。CSS 选择符从右往左匹配查找,避免 DOM 深度过深

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

  5. 避免使用 CSS 表达式(例如:calc())。

  6. 使用 visibility 替换 display: none ,因为前者只会引起重绘,后者会引发回流(改变了布局)

  7. 将频繁运行的动画变为图层,图层能够阻止该节点回流影响别的元素。比如对于 video 标签,浏览器会自动将该节点变为图层。

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

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

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

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

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

七、参考资料

www.jianshu.com/p/76bb929ea…