前言

监控是一套完整的"监视+报警"的系统。对于像我们这样的软件开发者来说，应用性能监控是衡量App的第一道关卡，如果应用的质量不好，会给用户带来最直接的体验伤害。系统上线后，开发者是无法7*24实时获取到用户使用及体验情况的，这时就需要一套优质的监控工具。

一、性能监控的两驾马车

前端性能监控主要分为两种方式：一种叫做合成监控（SYM），另一种叫真实用户监控（RUM）。

合成监控

通过第三方工具去模拟目标页面在浏览器中的运行场景，提取一些性能数据指标，得出一个性能审计报告。

合成监控中比较流行的是Google 的Lighthouse，我们通过Lighthouse统计一下门店后台首页的性能情况。

真实用户监控

所谓真实用户监控，就是用户在我们的页面上访问，访问之后就会产生各种各样的性能指标，我们在用户访问结束的时候，把这些性能指标上传到我们的日志服务器上，进行数据的提取清洗加工，最后在我们的监控平台上进行可视化的一个过程。

二、性能指标

阶段性指标

如上图所示，描述了从一个页面卸载到新的页面加载完成整个过程，即URL输入到完成发生了什么。

分三个阶段进行划分：

缓存阶段：包含上一页面卸载Prompt for unload、重定向Redirect、缓存AppCache
网络阶段：域名查询DNS、网络连接TCP|Request|Response
浏览器阶段：dom解析、页面加载

字段	描述	计算方式	备注
unload	上一页面卸载耗时	unloadEventEnd - unloadEventStart	如前一页面监听unload事件做数据收集上报，会影响本次页面载入耗时
redirect	重定向耗时	redirectEnd - redirectStart	过多重定向影响性能
appCache	查询缓存耗时	domainLookupStart - fetchStart
DNS	DNS解析耗时	domainLookupEnd - domainLookupStart	域名解析耗时，可以通过dns-prefetch预解析提升速度
TCP	TCP链接耗时	connectEnd - connectStart
TTFB	网络请求耗时（接收到首字节）即waiting	responseStart - requestStart	使用CDN，让站点内容离重点用户更近 www.wanghuiblog.com/post/what-i...
response	数据回包耗时	responseEnd - responseStart	留意后端返回字段必要性
DOM	DOM解析耗时	domInteractive - responseEnd
DCL	DOMContentLoaded 事件耗时	domContentLoadedEventEnd - domContentLoadedEventStart	完整DOM解析完毕总耗时
resources	资源加载耗时	loadEventStart - domContentLoadedEventEnd	完整DOM(DOMContentLoaded)解析到资源加载完毕(window.onLoad)时间
onLoad	onLoad事件耗时	loadEventEnd - loadEventStart

web关键性能指标

字段	描述	计算方式	备注
FP	首次绘制时间/白屏时间	responseEnd - fetchStart	从开始请求到开始解析DOM之间的时间差
FCP	首次内容绘制	domContentLoadedEventEnd - fetchStart	首屏加载时间，可能会跟白屏时间相同
TTI	首次可交互时间	domInteractive - fetchStart	DOM完成解析和构建，开始加载资源
ready	HTML加载完成时间	domContentLoadedEventEnd - fetchStart	同步JS会影响该耗时，js执行时间为ready-TTI
load	页面加载完毕时间	loadEventStart - fetchStart	全部资源加载完毕、同步js执行完毕总耗时

小程序指标

字段	描述	计算方式	备注
FP/FCP	首次渲染耗时	onShow - onLaunch	小程序从启动到第一个页面onshow钩子执行之间的耗时

兼容性

performance.timing（已废弃）

以上指标都可以通过performance.timing去计算获取，目前在一些旧版浏览器中兼容性较高，但是在W3C Level2中已经废弃了该标准，而提供了更为精准、更为全面的新的性能统计API-PerformanceNavigationTiming。

PerformanceNavigationTiming

1、概念

PerformanceNavigationTiming 使用了High-Resolution Time，时间精度可以达毫秒的小数点好几位。可以通过performance.getEntriesByType获取返回指定类型的PerformanceNavigationTiming接口数据。例如：

js 复制代码

performance.getEntriesByType("navigation")[0]

json 复制代码

{
    "name": "https://i.mp.fkw.com/version2/#/tmpMsg/tmpMsgList",
    "entryType": "navigation",
    "startTime": 0,
    "duration": 502.6999999997206,
    "initiatorType": "navigation",
    "nextHopProtocol": "http/1.1",
    "workerStart": 0,
    "redirectStart": 0,
    "redirectEnd": 0,
    "fetchStart": 2.099999999627471,
    "domainLookupStart": 2.099999999627471,
    "domainLookupEnd": 2.099999999627471,
    "connectStart": 2.099999999627471,
    "connectEnd": 2.099999999627471,
    "secureConnectionStart": 2.099999999627471,
    "requestStart": 4.899999999906868,
    "responseStart": 119,
    "responseEnd": 120.89999999990687,
    "transferSize": 11206,
    "encodedBodySize": 10906,
    "decodedBodySize": 60185,
    "serverTiming": [],
    "workerTiming": [],
    "unloadEventStart": 128,
    "unloadEventEnd": 128,
    "domInteractive": 386.89999999990687,
    "domContentLoadedEventStart": 387,
    "domContentLoadedEventEnd": 391.09999999962747,
    "domComplete": 502.59999999962747,
    "loadEventStart": 502.59999999962747,
    "loadEventEnd": 502.6999999997206,
    "type": "reload",
    "redirectCount": 0
}

2、`performance.getEntriesByType`常用类型

navigation（HTML文档相关指标）
resource（静态资源相关指标，不包含HTML相关信息）
paint（渲染相关指标）
measure（自定义测量、计算指标，常用于打点）

performance.getEntriesByType 返回的是数组，只有准备好的数据才能入组，你可能需要轮询，或找到一个恰当的时间点来上报数据。新标准，提供了 PerformanceObserver API 来帮你监听相应的资源数据是否准备好了。

下一节来看看如何测量和上报相关指标？

关于前端性能监控，你需要知道这些（上）

前言