web 渲染性能认识

最新推荐文章于 2022-12-19 17:47:14 发布

reffrselom

最新推荐文章于 2022-12-19 17:47:14 发布

阅读量290

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/reffrselom/article/details/106052861

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

看到如下几篇文章有感：
帧详解(https://aerotwist.com/blog/the-anatomy-of-a-frame/)
chrome运行时性能瓶颈分析performance
渲染性能概述：https://developers.google.com/web/fundamentals/performance/rendering
css触发器：https://csstriggers.com/
坚持仅合成器的属性和管理层计数：https://developers.google.com/web/fundamentals/performance/rendering/stick-to-compositor-only-properties-and-manage-layer-count

60fps 与设备刷新率

用户与网站进行交互。
目前大多数设备的屏幕刷新率为 60 次/秒。因此，如果在页面中有一个动画或渐变效果，或者用户正在滚动页面，那么浏览器渲染动画或页面的每一帧的速率也需要跟设备屏幕的刷新率保持一致。

其中每个帧的预算时间仅比 16 毫秒多一点 (1 秒/ 60 = 16.66 毫秒)。但实际上，浏览器有整理工作要做，因此您的所有工作需要在 10 毫秒内完成。如果无法符合此预算，帧率将下降，并且内容会在屏幕上抖动。此现象通常称为卡顿，会对用户体验产生负面影响。

FPS详解

我们前端页面或动画设置，都可以用“帧”来描绘，
对于帧，浏览器主要分两个进程(process)来处理：渲染器进程(Renderer Process)和GPU进程(GPU Process),
渲染器进程中：对每一帧的处理，主要有如下图所示过程：
在这里插入图片描述
上图可看出，几乎所有上述过程都是在CPU(renderer process - Main Thread)上完成的。只有最后一部分，合成以后的层瓦片被上传到GPU，在GPU实现屏幕实际像素的转换和渲染。

像素管道

绘制实际上分为两个任务：

创建绘图调用的列表，以及
填充像素。

后者称为“栅格化”，因此每当您在 DevTools 中看到绘制记录时，就应当将其视为包括栅格化。（在某些架构下，绘图调用的列表创建以及栅格化是在不同的线程中完成，但是这不是开发者所能控制的。）

整个渲染过程，我们拥有控制权的只有如下5个部分，也是关键的5大过程：
在这里插入图片描述
不一定每帧都总是会经过管道每个部分的处理。实际上，不管是使用 JavaScript、CSS 还是网络动画，在实现视觉变化时，管道针对指定帧的运行通常有三种方式：

1. JS / CSS > 样式 > 布局 > 绘制 > 合成
完整的像素管道
如果您修改元素的“layout”属性，也就是改变了元素的几何属性（例如宽度、高度、左侧或顶部位置等），那么浏览器将必须检查所有其他元素，然后“自动重排”页面。任何受影响的部分都需要重新绘制，而且最终绘制的元素需进行合成。

2. JS / CSS > 样式 > 绘制 > 合成
在这里插入图片描述
如果您修改“paint only”属性（例如背景图片、文字颜色或阴影等），即不会影响页面布局的属性，则浏览器会跳过布局，但仍将执行绘制。

3. JS / CSS > 样式 > 合成
无布局或绘制的像素管道。
如果您更改一个既不要布局也不要绘制的属性，则浏览器将跳到只执行合成。

这个最后的版本开销最小，最适合于应用生命周期中的高压力点，例如动画或滚动

Note: 如果想知道更改任何指定 CSS 属性将触发上述三个版本中的哪一个，请查看 CSS 触发器。如果要快速了解高性能动画，请阅读更改仅合成器的属性部分。

关于CSS3动画

CPU：中央处理器，它的功能主要是解释计算机指令以及处理计算机软件中的数据,也被称为主板。
GPU：图形处理器，是与处理和绘制图形相关的硬件。GPU是专为执行复杂的数学和几何计算而设计的，有了它，CPU就从图形处理的任务中解放出来，可以执行其他更多的系统任务。
硬件加速：指在计算机中透过把计算量非常大的工作分配给专门的硬件来处理来减轻CPU的工作量的技术。

举个例子：
translate2d正常就是走的CPU,而translate3d就会自动把任务转移到GPU进行处理。从而分担CPU压力。

添加层处理：在一定时间里添加.will-change让浏览器提前了解预期的元素变换。但是用好这一属性却有很多注意的地方：
参考地址描述：
https://www.w3cplus.com/css3/introduction-css-will-change-property.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/will-change