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

Posted 2023-05-09

参考技术A 一个web页面由多层构成的

比如掘金：

浏览器渲染页面

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

每一步简介

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

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

每一步不是必经的

比如：

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

使用 csstriggers[1] 可以详细看到 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>

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

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

document.querySelector('.box1').style.transform = 'translateX(60px)';

现在 box2的位置不受影响，直观地看到 box2是没被绿（重绘）的。

提升为合成层（Compositing Layers）

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

layout -> painted -> composited

这个流程可以在 csstriggers[2] 看到。

那现在我们要找到一个 css 属性，既能让元素位移，又能造成的影响最小。

答案是有的： transform：影响最小，直接到达最后一步  Composite 。 做如下更改：

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

好像事与愿违。box1, box2 都被重绘了。

这里因为：  他们都在一个层上，一个元素的变化也影响了其他元素。浏览器会联合需要绘制的区域，而导致整个屏幕重绘。

为了直接到达最后一步  Composite 。其实这里有个条件：  更改属性所在的元素应处于其自身的合成层，如果没在，我们可以提升为合成层` 这样就不会影响其他元素，而能减少绘制区域。

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

这里我大概罗列了这么多

•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;

再次观察效果：

大功告成：

•box1 不在重绘了•box2 不受影响 我们可以查看最终的分层效果：

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

好处

提升为合成层简单说来有以下几点好处：

•合成层的位图，会交由 GPU 合成，比 CPU 处理要快•当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层•对于 transform 和 opacity 效果，不会触发 layout 和 paint

建议：

由于 transition animation 也有提升层的作用，所以动画可以优先考虑 css3 动画。

物极必反

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

正所谓切勿提前优化.

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

参考

前端性能优化之 Composite[3]

关键转译路径 Critical Rendering Path[4]

will-change[5]

坚持仅合成器的属性和管理层计数[6]

最后

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

References

[1] csstriggers:  https://csstriggers.com/

[2] csstriggers:  https://csstriggers.com/

[3] 前端性能优化之 Composite:  https://zhuanlan.zhihu.com/p/41472193

[4] 关键转译路径 Critical Rendering Path:  https://cythilya.github.io/2018/07/13/critical-rendering-path/#browser-rendering-pipeline

[5] will-change:  https://developer.mozilla.org/zh-CN/docs/Web/CSS/will-change

[6] 坚持仅合成器的属性和管理层计数:  https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count

浏览器渲染优化3

我们之前已经学到并非所有样式更改都是对等的，某些会触发布局，绘制和渲染层合成流程，某些只会触发绘制和渲染层合成流程，而某些仅触发渲染层合成流程，在这节课里，你将学习如何优化渲染管道的最后两个阶段，及绘制和渲染层合成。如果你想详细了解样式是如何影响到渲染管道的，请看https://csstriggers.com/，如果你想知道你要创建动画效果的内容是否会触发布局，绘制和合成流程也可以看看https://csstriggers.com/。

我们来看看我们的工具包中有没有解决绘制难题的工具，绘制流程通常是最能干扰帧率的方面，而这正是我们要避免的，我们看看https://www.html5rocks.com/static/demos/parallax/demo-1a/demo.html，当你向下滚动时看起来很正常，但是可以做的更好，该网站出现了大量的绘制工作，绘制问题会比你肯能遇到的任何其他性能瓶颈都要糟糕。我将打开开发者工作，看看发生了什么情况，打开rendering，如果你担心流程的话，就可以通过选中该项看看发生了什么情况，它会告诉你绘制流程在页面上的什么地方发生了，何时发生了。

 

 

之前我们讨论了你不会出发渲染管道的每个部分，实际上工作量很大程度上取决于你更改了哪个属性经常有人问我是应该用js还是CSS使样式产生动画效果，哪个更快，实际上根本关系不大，大部分情况下速度是一样的，原因在与无论如何更改，更改宽度都会出发布局，无论使用js还是css，如果你更改了宽度，高度，顶部，左侧就会触发布局，如果触发布局就会触发绘制流程，或者只是更改了元素的盒阴影，这不会触发布局，但是会触发绘制流程，而绘制流程代价非常高，尤其是在移动设备上，你不能触发布局而不触发绘制流程，需要小心都更改了哪些样式，何时更改的，在生命周期里，及RAIL过程，包括响应，动画，闲置和加载，你可以在加载，闲置和响应时间里执行这些代价高的样式更改，但是不能在动画过程，对，在动画过程里，你需要尽量避免，布局和绘制流程，因为通常时间成本实在太高，无法满足有限的时间预算，如果不行的话，则需要找到减少影响的方式，在下节课里我们将讨论着方面的知识。