浏览器的回流和重绘

发表于 | 分类于
字数统计: 1.3k | 阅读时长 ≈ 4
说到浏览器的渲染过程，你了解其中的回流和重绘吗？

一、浏览器渲染

在了解浏览器的回流和重绘之前，我们先来了解下浏览器的渲染过程。该图来源于你真的了解回流和重绘吗

简化图如下：

1
2
3
4
5
6
graph LR
HTML-->DOM
CSS-->CSSOM
DOM-->RenderTree
CSSOM-->RenderTree
RenderTree-->paint

从上面的图中，我们可以看到，整个浏览器的渲染过程有：

  1. 浏览器会把 HTML 解析成 DOM，把 CSS 解析成 CSSOM。
  2. DOM 和 CSSOM 合并就产生了 Render Tree。
  3. 浏览器依据 Render Tree 就能获取所有节点的样式，计算各节点元素在页面上的大小和位置，并将其绘制到页面上。

补充说明：

  • 浏览器使用流式布局模型 (Flow Based Layout)，因此只需要对 Render Tree 计算遍历一次就可以。（table 及其内部元素除外，它们可能需要多次计算，通常要花同等元素的3倍时间）
  • Render Tree 不包含隐藏的节点。（例如 display: none; 的节点，还有 head、script、meta、link 节点）
  • Display: 将像素发送给GPU，展示在页面上。（这一步其实还有很多内容，比如会在GPU将多个合成层合并为同一个层，并展示在页面中。而css3硬件加速的原理则是新建合成层，此处不再展开）

二、回流

当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。（即构建渲染树，计算变化节点在设备视口 viewport 内的确切位置的计算阶段）

导致回流的操作：

  • 页面首次渲染（Render Tree 构建）
  • 浏览器窗口大小发生改变
  • 增加或移除样式表
  • 元素尺寸或位置发生改变
  • 元素内容变化（文字数量或图片大小等等）
  • 元素字体大小变化
  • 添加或者删除可见的DOM元素
  • 激活CSS伪类（例如：:hover）
  • 查询某些属性或调用某些方法

浏览器的优化机制：

由于每次重排都会造成额外的计算消耗，因此现代的大多数浏览器会通过队列化修改并批量执行来优化重排的过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。但是！当你获取布局信息的操作的时候，会强制队列刷新，比如当你访问以下属性或者使用以下方法：

  • clientWidth、clientHeight、clientTop、clientLeft
  • offsetWidth、offsetHeight、offsetTop、offsetLeft
  • scrollWidth、scrollHeight、scrollTop、scrollLeft
  • width、height
  • getComputedStyle()
  • getBoundingClientRect()

以上属性和方法都需要返回最新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确的值。因此，我们在修改样式的时候，最好避免使用上面列出的属性，他们都会刷新渲染队列。如果要使用它们，最好将值缓存起来。

三、重绘

当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility 等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

注意： 回流必将引起重绘，而重绘不一定会引起回流。

四、如何减少性能影响

通过减少回流和重绘，能减少程序对于浏览器的性能的压力。

css

  • 避免使用 table 布局。
  • 尽可能在 DOM 树的最末端改变 class。（减少不必要的影响）
  • 避免设置多层内联样式。
  • 将动画效果应用到 position 属性为 absolute 或 fixed 的元素上。
  • 避免使用 CSS 表达式（例如：calc()）。

javascript

  • 避免频繁操作样式，最好一次性重写 style属性，或者将样式列表定义为 class 并一次性更改 class 属性。
1
2
3
4
5
6
7
8
// bad
el.style.padding = '5px';
el.style.height = '100px';

// good
el.style.cssText += 'padding: 5px; height: 100px;';

el.className += ' active';
  • DOM 元素“离线处理”： 避免频繁操作 DOM，创建一个 documentFragment，在它上面应用所有 DOM 操作，最后再把它添加到文档中。也可以先为元素设置 display: none;，操作结束后再把它显示出来。因为在 display 属性为 none的元素上进行的 DOM 操作不会引发回流和重绘。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* DocumentFragment 文档片段缓存操作 回流一次 */
var fragment = document.createDocumentFragment();
// todo ...
el.appendChild(fragment); // 回流

/* cloneNode(true or false) & replaceChild 回流一次 */
var div = document.createElement('div');
div.style.width = '100px';
// todo ...
el.parentNode.replaceChild(div, el); // 回流

/* display: none; 回流两次 */
el.style.display = 'none'; // 回流
el.style.width = '100px';
// todo ...
el.sty;e.display = 'block'; // 回流
  • 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
  • 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

五、参考文章

-------------本文结束感谢您的阅读-------------
0%