浏览器层合成与页面性能优化

酷吧你我他

页面展示

在编写页面中,我们要知道浏览器如何处理 HTMLJavaScriptCSS
需要了解并注意五个主要区域, 这些我们拥有控制权的部分,也是像素至屏幕管道中的关键点。

image

每一步简介

  • JavaScript。 一般来说,我们会使用 JavaScript 来实现一些视觉变化的效果。比如用 jQuery 的 animate 函数做一个动画、对一个数据集进行排序或者往页面里添加一些 DOM 元素等。当然,除了 JavaScript,还有其他一些常用方法也可以实现视觉变化效果,比如:CSS Animations、Transitions 和 Web Animation API。
  • 样式计算。 此过程是根据匹配选择器(例如 .headline 或 .nav > .nav__item)计算出哪些元素应用哪些 CSS 规则的过程。从中知道规则之后,将应用规则并计算每个元素的最终样式。
  • 布局。 在知道对一个元素应用哪些规则之后,浏览器即可开始计算它要占据的空间大小及其在屏幕的位置。网页的布局模式意味着一个元素可能影响其他元素,例如 <body> 元素的宽度一般会影响其子元素的宽度以及树中各处的节点,因此对于浏览器来说,布局过程是经常发生的。
  • 绘制。 绘制是填充像素的过程。它涉及绘出文本、颜色、图像、边框和阴影,基本上包括元素的每个可视部分。绘制一般是在多个表面(通常称为层)上完成的。
  • 合成。 由于页面的各部分可能被绘制到多层,由此它们需要按正确顺序绘制到屏幕上,以便正确渲染页面。对于与另一元素重叠的元素来说,这点特别重要,因为一个错误可能使一个元素错误地出现在另一个元素的上层。

ps: 当然,不是每一步更改都会遵循上图这个流程。

每一步不是必经的

比如:

  • 更改了元素的布局相关的属性:width, height, 位置... 那么浏览器就会检查其他元素,自动 重排一次
  • 更改了元素的 color, 阴影... 不会影响页面的布局,那么浏览器就会跳过布局。这就是我们平常说的:重排一定引起重绘,重绘不一定引起重排
  • 如果更改了 一个既不会布局,也不会绘制的属性,那么浏览器直接跳到最后一步,不得不说,这是最高效的

使用 csstriggers 可以详细看到 css 属性改变时触发的流程。

如何提升绘制的性能

尽量使用影响较少的属性

举个?:

<div class="box box1">1</div>
<div class="box box2"> 2 </div>
  <script>
  const box1 = document.querySelector('.box1');
  setTimeout(() => {
     box1.style.display = 'none'
  }, 3000);
  </script>

relayout

我们可以看到,box1box2 都绿(重绘)了一次,说明 box1 的变化影响了 box2。那这个属性变化的代价是比较大的。

假如是我让 box1 的位置 向右移动 60px,我们做如下更改:

box1.style.display = 'none'

leftrepaint

现在 box2的位置不受影响,直观地看到 box2是没被绿(重绘)的。

提升为合成层(Compositing Layers)

我们在上一步做了优化,box2 已经不受影响,但是 box1 依然被重绘,那能不能在优化呢。
答案是能的。
left 这个属性的改变会造成的影响是:

layout -> painted -> composited

这个流程可以在 csstriggers 看到。
image
那现在我们要找到一个 css 属性,既能让元素位移,又能造成的影响最小。
答案是有的:
transform:影响最小,直接到达最后一步 compositor
做如下更改:

box1.style.transform = 'translateX(60px)'

transform-normal

好像事与愿违。box1, box2 都被重绘了。
这里因为:他们都在一个层上,一个元素的变化也影响了其他元素的变化。浏览器会联合需要绘制的区域,而导致整个屏幕重绘
其实这里有个条件:
更改属性所在的元素应处于其自身的合成层,如果没在,我们可以提升为合成层
这样就不会影响其他元素,而能减少绘制区域。

提升为合成层的原因有一下几种

这里我大概罗列了这么多

  • video
  • 有 3D transform
  • backface-visibility 为 hidden
  • 对 opacity、transform、fliter、backdropfilter 应用了 animation 或者 transition(需要是 active 的 animation 或者 transition,当 animation 或者 transition 效果未开始或结束后,提升合成层也会失效)
  • will-change 设置为 opacity、transform、top、left、bottom、right(其中 top、left 等需要设置明确的定位属性,如 relative 等)
  • 重叠原因

box1 上面做如下更改:

will-change: transform;

再次观察效果:

transform-layer

大功告成:

  • box1 不在重绘了
  • box2 不受影响

我们可以查看最终的分层效果:

image

ps 里面的图层差不多,每一个图层叠加在一起组成我们看到的网页。

物极必反

图层越多越好吗?
当然不是。提升合成层也得 消耗额外的内存和管理资源

正如MDN所说:如果你的页面在性能方面没什么问题,则不要添加 will-change 属性来榨取一丁点的速度。 will-change 的设计初衷是作为最后的优化手段,用来尝试解决现有的性能问题

参考

前端性能优化之 Composite
關鍵轉譯路徑 Critical Rendering Path
will-change
坚持仅合成器的属性和管理层计数

最后

如果喜欢本篇文章,可以关注的微信公众号,如果不嫌烦,还可以把它添加到桌面?。

阅读 655

酷吧你我他
酷吧你我他的分享

小白一枚,专写bug

56 声望
10 粉丝
0 条评论
你知道吗?

小白一枚,专写bug

56 声望
10 粉丝
宣传栏