学习重绘和回流前,需要先了解浏览器的渲染原理
一、浏览器渲染原理
浏览器渲染一共有五步
- 处理 HTML 并构建 DOM 树。
- 处理 CSS 构建 CSSOM 树。
- 将 DOM 与 CSSOM 合并成一个渲染树。
- 根据渲染树来布局,计算每个节点的位置。
- 调用 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()
触发回流有以下几种情况
有以下几种情况:
- 页面首次渲染
- DOM 操作(对元素的增删改、顺序变化等)
- 内容变化,比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变;
- 元素位置的改变,或者使用动画;
- 元素尺寸的改变——大小,外边距,边框;
- css 属性的更改或者重新计算
- 增删样式表内容
- 修改 class 属性
- 浏览器窗口变化(滚动或缩放)
- 伪类样式激活(:hover 等)
四、重绘和回流的关系
回流必定会发生重绘,重绘不一定会引发回流。
五、性能影响
-
回流比重绘的代价要更高。
-
有时即使仅仅回流一个单一的元素,它的父元素以及任何跟随它的元素也会产生回流。即:改变父节点里的子节点很可能会导致父节点的一系列回流。
六、优化
1、浏览器自己的优化:
浏览器会维护 1 个队列,把所有会引起回流、重绘的操作放入这个队列,等队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会 flush 队列,进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。
2.减少重绘和回流
CSS
-
避免使用 table 布局。
-
尽可能在 DOM 树的最末端改变 class。
-
避免设置多层内联样式。CSS 选择符从右往左匹配查找,避免 DOM 深度过深
-
将动画效果应用到 position 属性为 absolute 或 fixed 的元素上。
-
避免使用 CSS 表达式(例如:calc())。
-
使用 visibility 替换 display: none ,因为前者只会引起重绘,后者会引发回流(改变了布局)
-
将频繁运行的动画变为图层,图层能够阻止该节点回流影响别的元素。比如对于 video 标签,浏览器会自动将该节点变为图层。
JavaScript
-
避免频繁操作样式,最好一次性重写 style 属性,或者将样式列表定义为 class 并一次性更改 class 属性。
-
避免频繁操作 DOM,创建一个 documentFragment,在它上面应用所有 DOM 操作,最后再把它添加到文档中。
-
可以 先为元素设置 display: none,操作结束后再把它显示出来。因为在 display 属性为 none 的元素上进行的 DOM 操作不会引发回流和重绘。
-
避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来。
-
对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流。