前端页面性能是一个非常核心的用户体验指标。
为什么要做性能监控？
页面休验差的话会影响到用户体验，影响用户体验的话就会导致客户流失，而且移动端最为明显，移动端用户对页面响应延迟容忍度很低。
其次，为了更好的用户体验，需要明确的优化方向和具体的优化手段。
监控指标？
PV(页面访问量)
UV（页面访问用户数量）
页面js异常监控
白屏时间
首屏时间
总下载时间
DNS解析时间
TCP连接时间
HTTP请求时间
HTTP响应时间
监控方式？
PV， UV 可以通过页面埋点的方式进行统计，数据处理。
页面js异常监控
前端js的异常包括： 编译异常、运行异常、加载静态资源异常、接口异常
编译异常（打包时就会发现）
运行异常（下面正经说）
加载静态资源异常(服务器异常)
接口异常(网络请求层统一错误处理)
运行时异常
1、window.onerror函数会在页面发生js错误时被调用。
window.onerror = function(message, source, lineno, colno, error) { }
2、首次向浏览器注入的Js代码报错 window.onerror 是监控不到的，需要重写console.error的方式来进行捕获
3、写Promise时未写reject的捕获方法的时候，统总是会抛出一个叫 Unhandled Promise rejection，需要重写window.onunhandledrejection方法
（addEventListener('error', handler, true)来捕获静态资源异常）
性能指标
使用API Navigation Timing
白屏时间：主文档返回第一个字节的时间-用户输入网址回车的起点时间。（window.performance.timing.domLoading - window.performance.timing.fetchStart）
首屏时间：指页面第一屏所有资源完整展示。
（window.performance.timing.loadEventStart - window.performance.timing.fetchStart）
重定向时间（redirectEnd - redirectStart）
DNS解析时间（domainLookupEnd - domainLookupStart）
卸载页面的时间(unloadEventEnd - unloadEventStart)
TCP连接时间(connectEnd - connectStart)
HTTP请求(responseEnd - responseStart)
!
官方地址：developer.mozilla.org/en-US/docs/…
SPA性能指标
API Navigation Timing 可以监控大部分前端页面的性能，但是随着SPA模式的盛行，页面内容演染的时机就被改变了。
首次绘制（FP）
首次内容绘制（FCP）
首次有准备绘制(FMP)
可交互时间（TTL）
耗时较长的任务
API Navigation Timing 能获取到页面渲染所相关的数据，但是在单页面应用中改面了url 是不会刷新页面的，所以无法获得子路由所对应的页面渲染时间，需要我们自定义上报。
navigator.sendBeacon(url, data);
developer.mozilla.org/zh-CN/docs/…
