浏览器的重排和重绘-前端进阶

_luo
1,109 阅读7分钟

关于浏览器重排和重绘的概念，最近看到不少这方面的文章，觉得挺有用，在制作中考虑浏览器的性能，减少重排能够节省浏览器对其子元素及父类元素的重新渲染，避免过分的重绘也能节省浏览器性能，自己也有了一定的理解，所以分享给大家。

网页生成过程

v2-688aa22ef7d5d78e2a700462d2b0e1d0_720w.png

  1. HTML 被 HTML 解析器解析成 DOM 树
  2. CSS 则被 CSS 解析器解析成 CSSOM 树（CSS Object Model）
  3. 结合DOM树和CSSOM树，生成一棵渲染树(Render Tree) ， 而这一过程为Attachment
  4. 生成布局（flow），浏览器在屏幕上“画”出渲染树中的所有节点、即渲染树的所有节点进行平面合成
  5. 将布局绘制（paint）在屏幕上

渲染（render）

"生成布局"（flow）和"绘制"（paint）这两步，合称为"渲染"（render）。

网上找的一张图看起来更直观

image.png

什么时候进行渲染

  • 网页生成的时候，至少会渲染一次。
  • 用户访问的过程中，还会不断重新渲染。
  • 任何会改变元素几何信息(元素的位置和尺寸大小)的操作，都会触发重新渲染。

重新渲染可以拆分为两步

  • 重绘：重新绘制布局到屏幕上
  • 重排：重新生成布局，重新排列元素。

就如上面的概念一样，单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分。比如改变元素高度，这个元素乃至周边dom都需要重新绘制。

也就是说：重绘不一定导致重排，但重排一定会导致重绘。

浏览器的渲染队列

当我们修改了元素的几何属性，导致浏览器触发重排或重绘时。它会把该操作放进渲染队列，等到队列中的操作到了一定的数量或者到了一定的时间间隔时，浏览器就会进行触发渲染。

div.style.left = '10px';
div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';

根据我们上文的定义，这段代码理论上会触发4次重排+重绘，因为每一次都改变了元素的几何属性，实际上最后只触发了一次渲染，这都得益于浏览器的渲染队列机制

div.style.left = '10px';
console.log(div.offsetLeft);
div.style.top = '10px';
console.log(div.offsetTop);
div.style.width = '20px';
console.log(div.offsetWidth);
div.style.height = '20px';
console.log(div.offsetHeight);

这段代码理论上会触发几次重新渲染（reflow+repaint）呢？ 实际上是4次。 因为读取offset这些属性的时候，会进行强制刷新渲染队列触发重新渲染（如果渲染队列有重排或重绘任务的话），因为需要保证结果的 即时性 和 准确性。

以下的属性和方法会强制刷新渲染队列：

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

重排（reflow）

当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。

重排也叫回流，简单的说就是重新生成布局，重新排列元素。

什么情况会发生重排

  • 添加/删除可见的DOM元素
  • 改变元素位置
  • 改变元素尺寸，比如边距、填充、边框、宽度和高度等
  • 改变元素内容，比如文字数量，图片大小等
  • 改变元素字体大小
  • 改变浏览器窗口尺寸，比如resize事件发生时
  • 激活CSS伪类（例如：:hover）
  • 设置 style 属性的值，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow
  • 查询某些属性或调用某些计算方法：offsetWidth、offsetHeight等，除此之外，当我们调用 getComputedStyle方法，或者IE里的 currentStyle 时，也会触发重排，原理是一样的，都为求一个“即时性”和“准确性”。

以下是常见的导致重排的style：

  • width、height、display、padding、margin
  • position、left、top、right、buttom、border
  • vertical-align、text-align、clientTop、clientLeft
  • font-size、font-family、font-weight、line-height
  • float、overflow、overflow-y、min-height、white-space、

重排影响的范围

由于浏览器渲染界面是基于流式布局模型的，所以触发重排时会对周围DOM重新排列，影响的范围有两种：

  • 全局范围：从根节点html开始对整个渲染树进行重新布局。
  • 局部范围：对渲染树的某部分或某一个渲染对象进行重新布局 全局重排：

从根节点html开始对整个渲染树进行重新布局，相当于重新渲染整个页面了。

局部重排：

把一个dom的宽高之类的几何信息定死，然后在dom内部触发重排，就只会重新渲染该dom内部的元素，而不会影响到外界。

也就是说重排和重绘的DOM元素层级越高，成本就越高。

那么尽可能在低层级的DOM节点上，上述例子中，如果你要改变p的样式，class就不要加在div上，通过父元素去影响子元素不好。

重绘（Repaints）

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

触发重绘的属性有很多，比如说color，background、visibility、outline 等等

优化浏览器性能

优化浏览器的性能，就意味着要限制重排和重绘的次数，避免频繁的进行重新渲染

1. 分离读写操作

div.style.left = '10px';
div.style.top = '10px';
div.style.width = '20px';
div.style.height = '20px';
console.log(div.offsetLeft);
console.log(div.offsetTop);
console.log(div.offsetWidth);
console.log(div.offsetHeight);

上面的代码段，只是触发了一次重排而已

在第一个console的时候，浏览器把之前上面四个写操作的渲染队列都给清空了。剩下的console，因为渲染队列本来就是空的，所以并没有触发重排，仅仅拿值而已。

2. 样式集中改变

虽然现在大部分浏览器有渲染队列优化，不排除有些浏览器以及老版本的浏览器效率仍然低下

建议通过改变 className的方式改变样式，不要一条一条地修改 DOM 的 style 样式，预先定义好 class，然后修改 DOM 的 className

3. 缓存布局信息

// good 缓存布局信息 相当于读写分离
var curLeft = div.offsetLeft;
var curTop = div.offsetTop;
div.style.left = curLeft + 1 + 'px';
div.style.top = curTop + 1 + 'px';

4. 离线改变dom

  • 隐藏要操作的dom

    dom.display = 'none'
// 修改dom样式
dom.display = 'block'

    把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改100次，然后再把它显示出来

  • 通过使用DocumentFragment创建一个dom碎片,在它上面批量操作dom，操作完成之后，再添加到文档中，这样只会触发一次重排。

  • 复制节点，在副本上工作，然后替换它！

5.使用 absolute 或 fixed 脱离文档流

position属性为absolute或fixed的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响，只需要考虑其自身的重排和重绘。

6.不要使用 table 布局

随便一个cell的高度宽度的修改都会影响到整个表格重排，因此性能非常差。那么在不得已使用table的场合，可以设置table-layout:auto;或者是table-layout:fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围

7.优化动画

  • 可以把动画效果应用到 position属性为 absolute 或 fixed 的元素上，这样对其他元素影响较小。

    动画效果还应牺牲一些平滑，来换取速度，这中间的度自己衡量：
    比如实现一个动画，以1个像素为单位移动这样最平滑，但是Layout就会过于频繁，大量消耗CPU资源，如果以3个像素为单位移动则会好很多

  • 启用GPU加速
    GPU 硬件加速是指应用 GPU 的图形性能对浏览器中的一些图形操作交给 GPU 来完成，因为 GPU 是专门为处理图形而设计，所以它在速度和能耗上更有效率。

    GPU 加速通常包括以下几个部分：Canvas2D，布局合成, CSS3转换（transitions），CSS3 3D变换（transforms），WebGL和视频(video)。

总结

浏览器性能优化是进阶路上必不可少的，像我们在开发中，触发重排这是不可避免的，应尽量按照文中的建议来组织代码，避免不必要的重新渲染，这种优化，需要平时有意识的去做，一点一滴的去做，希望大家重视一下。

参考资料：

网页性能管理详解

优化CSS重排重绘与浏览器性能

avatar
文章
阅读
粉丝