性能分析
一、认识
在做性能监控时, 有三个非常关键的环节:收集性能指标数据、对性能指标数据做分析、根据分析结果做优化。有了这三个环节,性能监控才能算是有了一条相对完整的链路。
当我们打开 Sentry
监控平台,切换到 Performance
面板,然后选择某一个项目时,可以看到以下界面:
简单操作一下这个界面:
在操作过程中,我们可以看到:
-
诸如
View Trends
、Display: Frontend(Pageload)
、Display: Frontend(Other)
、Display: Backend
这样的操作选项 -
诸如
p50 / p75 / p95
、Apdex
、Failure Rate
、TPM
、Throughput
这样的指标 -
各种折线图、柱形图、表格
二、Display: Frontend(Pageload)
进入 Performance
面板以后,Dispaly
展示下拉选择框默认会选择 Frontend(Pageload)
。Sentry
在上报性能指标数据时,会把数据分为首屏 - pageload
和页面切换 - navigation
两类。对应的,我们可以在监控平台中通过选择 Display: Frontend(Pageload)
和 Display: Frontend(Other)
来查看上报的两类数据。
选择 Display: Frontend(Pageload)
, 我们可以查看首屏(pageload
)类型的指标数据。整个 Performance
面板会呈现三块内容:
-
卡片区域:
FCP
、LCP
、FID
、CLS
四大指标在过去24h
内的情况 -
折线图 / 柱形图区域: 用于统计
LCP
指标数据、性能监控吞吐量 -
表格区域: 统计不同路由在首屏时的
FCP
、LCP
、FID
、CSL
、TPM
指标数据
其中,最核心的要数卡片区域。
2.1 卡片区域
卡片区域有 4
个卡片,展示了过去 24h
内 FCP
、LCP
、FID
、CLS
四个指标的平均耗时,以及表现优劣的百分比。
关于如何评判 FCP
、LCP
、FID
、CLS
表现的优劣,Sentry
提供了标准:
以 FID
为例,图中 FID
的平均耗时为 190ms
,好 - good
(绿色)占比 72%
,意味着过去 24h
内 72%
的首屏 FID
耗时小于 100ms
;待提升(黄色) - meh
占比 7%
,意味着过去 24h
内 7%
的首屏 FID
耗时在 100ms
到 300ms
之间,需要优化;差 - poor
(红色) 占比 22%
,意味着过去 24
内 22%
的首屏 FID
耗时大于 300ms
,非常糟糕。
通过查看 4
个卡片,我们发现 FCP
、FID
这两个指标 meh
、poor
的比例较高,需要特别去关注。
点击 FID
卡片,会进入对应的指标详情页面。
指标详情页面,分为折线图和表格两个区域。
先看折线图区域。折线图表示过去 24h
内 FID
的耗时情况。折线图中有黄、红两条水平虚线,分别代表 meh
和 poor
。有了这个折线图,哪个时间段 FID
耗时较久以及具体耗时情况 就可以一目了然。
表格区域,是不同路由在首屏时 FID
数据的汇总。
表格的表头中有几项需要重点关注 - P50(FID)
、P75(FID)
、P95(FID)
、STATUS
:
-
STATUS
: 代表各个路由在首屏时FID
的表现情况,有poor
、meh
、good
三个值。点击表头,可以进行升序 / 降序排序。 -
P50
、P75
、P95
: 是百分位数值,表示从过去24h
的所有FID
数据中,挑选出50%(75%、95%)
位置的数据。(挑选之前,要先对数据从小到大排序)。
百分比数值是统计学中的一种术语。通俗来讲,就是将一组数据从小到大排序,并计算相应的累计百分位,则某一百分位所对应数据的值就称为这一百分位的百分位数。例如,将一组 100
个数值按从小到大排列,P50
是 index
为 50
的数值,P75
为 index
为 75
的数值, P95
为 index
为 95
的数值。
为什么这里要使用百分比数值统计呢?
要回答这个问题,我们需要先看看统计数据的另一种方法 - 平均值。
平均值统计方法,是我们最常用的统计方法,计算简单方便。不过,这种统计方式存在一个非常大的问题,就是它会把一些异常数据平均掉,进而会掩盖一些异常问题。例如平均 FID
为 340ms
,但是具体有多少个请求比 340ms
要大,又有多少个请求比 340ms
要小,大多少,是 200 ms
,还是 500ms
,又或是 1000ms