【Debug】 你所不知道的各种前端Debug技巧系列 Performance - Overview---第18天

前端可不是功能需求都完成了就完事，Load 超慢、动画卡卡的、点击按钮过了一秒才有反应等等都会让使用者默默在心中给网站体验扣分，尤其是第一次浏览时更可能直接关掉。

概览

一般来说想要进行网页优化最简单有效的方式是从Lighthouse 开始，Lighthouse 会以网页效能指标为目前的页面打分数，同时给出优化的建议方向，开发者可以透过提升分数逐步优化网页的效能。

而Performance 面板则为更深入的效能测量工具，通常会在针对特定功能进行优化或是像制作网页游戏，每一个Function 的效能都必须斟酌时才会利用Performance 页面来获取浏览器运作时的各种细节资讯。

在Performance 系列中，将会分为以下几个主题：

Overview – 总览
Web Vitals –网页体验指标
Critical Rendering Path –浏览器从拿到HTML到开始显示画面前做了什么
How Rendering Works –浏览器更新画面的详细流程
Rendering Optimization –如何优化Rendering流程
Analyze Paint & Layers –分析、优化画面绘制效能
Analyze Memory –分析记忆体造成的效能问题
Analyze Runtime Activities –分析浏览器和JavaScript的执行效能

开始测量

使用Performance 面板进行效能测量有两种起手式：

1，页面初始化–先进入about:blank页面，开始Record后再进入想要测量的网址，完全避掉任何干扰，或是直接点击Start profiling and reload page图示。
2，针对功能–先开始Record，操作该功能后停止。
Record 停止后会产生效能测量报表，可以用滑鼠拖曳上下拖曳看看其他列，左右拖曳移动时间区间，滚轮则是缩放时间区间，刚开始使用时需要熟悉一下操作方式，里面包含了许多资讯，就先从上方密密麻麻的图表开始讲起吧。

图表资讯

图表资讯中上方几列简单显示了FPS、CPU、NET 和网页效能有直接关系的资讯。

FPS

浏览器正常执行下，网页会保持在60 FPS，由于浏览器是单线程的，但又必须解析、执行程式码、计算样式、画出页面中的每一个像素等等，只要浏览器在动画进行中过于忙碌，一个画面超过16ms(1000/60) 才能画完，页面就会掉帧，使用者感到会开始感受到卡顿。

回到面板中，FPS 列绿色的方块代表当下的FPS 变化，不过FPS 为0 时并不代表页面卡住了，通常是画面真的没在动，而上方的粉、红色块是掉帧提醒，也就是可能会让使用者感受到卡顿的部分。

CPU

CPU 列可以看出CPU 使用率的变化，图形会以颜色来区分种类，主要有：

灰色– 浏览器内部的工作
蓝色– HTML 请求、处理
黄色– 事件、执行JavaScript
绿色– 图像处理、画面绘制
紫色– 样式计算

NET

蓝色的部分代表有请求正在进行，可以展开下方的Network 看到更详细的资讯。

截图

Hover 在Frames 列上能够观察特定时间点的画面，左右Hover 就能观察页面的变化，就像重播一样，适合用来找出想要观察的时间区间，展开下方的Frames 有更多资讯。

详细资讯

下方开始会提供较详细的资讯，Network、Frames、Interaction、Timings、Main 等等，在任一列点击里面的区块都会依据类型在最下方展开详细资讯面板。

点击Main 列区块看到的Summary 分页，显示了Task 花费的时间以及细分的小工作类型

Network

就像是Network 面板的Log，排列了各个资源的时间和依赖关系，点击后可以看到URL、Duration（包含传输时间和读取时间）、Priority、资源大小等等。

关于Connection Start、TTFB、Content Download，依赖关系等Network相关资讯在Network - Analyze Requests有更详细的解释。

Frames

相较截图像是固定时间截一张当下的图，Frames 会显示哪些时间点产生了新的画面以及一个Frame 持续了多久，另外也有DPS 和CPU 相关资讯。

Timings

Timings 是网页体验的重要指标，仔细看整份图表其实图中的每个Timing 都是贯穿整份报告的时间线，分别有：

FP – 绘出预设背景颜色之外的任何内容时
FCP – 绘出任何文字、图片、有颜色的Canvas 时
DOMContentLoaded (DCL) – HTML 已经载入且解析完毕时
onload (L) – 解析HTML 后请求的资源都载入完成时
LCP – 绘出页面中最大的内容时（Hover LCP 时会显示对应的元素）

另外面板下方还有一个Total blocking time (TBT)，代表主线程被阻塞过久的时间总和。

此处提到的FCP、LCP、TBT等等，在系列文章Web Vitals有更详细的介绍。

Experience

CLS 代表页面中元素在读取过程的位移量，越低代表页面稳定性越高，相对使用者体验越好。

和上方提到的FCP 同为Core Web Vitals 的一员。

GPU

浏览器运作过程中有用到GPU的部分，在网址列输入chrome://gpu可以看到目前浏览器中有哪些功能开启硬体加速（Graphics Feature Status），下方会有更多关于GPU的资讯。

Raster & Compositor

此两列和页面显示息息相关，大家可能知道使用者和网页互动时，浏览器为了更新画面大致会经过以下步骤：

JavaScript
Style
Layout
Paint
Composite
其中每一个步骤都做了什么事情，有哪些JavaScript 的操作可能严重影响效能，有些动画可以略过部分步骤，只需要Composite，将会在系列文章Critical Rendering Path 、Painting & Layers 中解惑。

小结

今天大致说明了Performance 面板提供的资讯，系列文章中将会把效能问题区分为不同主题，更完整的说明如何观察、分析效能问题。