核心概念简介
FP（First Paint）
首次绘制：用于记录页面第一次绘制像素的时间。比如：页面背景颜色是黑色，那么当黑色的第一个像素落在显示器时就记录了FP指标
FCP（First Contentfull Paint）
首次有内容的绘制：用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间，对于spa来说可以理解为：
里面开始有内容
FMP（First Meaningful Paint）
首次有意义的绘制：基本被废弃了，因为“有意义”没有一个严格的标准，有意义的绘制对不同页面来说是不同的，可以考虑 LCP 指标
LCP（Largest Contentful Paint）
最大内容绘制：⽤于记录视窗内最⼤的元素绘制的时间，该时间会随着⻚⾯渲染变化⽽变化，因为⻚⾯中的最⼤元素在渲染过程中可能会发⽣改变，另外该指标会在⽤户第⼀次交互后停⽌记录。LCP 主要是感知加载速度
LCP 代表了⻚⾯的速度指标， LCP 能体现的东⻄更多⼀些。⼀是指标实时更新，数据更精确，⼆是代表着⻚⾯最⼤元素的渲染时间，最⼤元素的快速载⼊能让⽤户感觉性能还挺好。
TTI（Time to Interactive）
可交互时间：
先进行First Contentful Paint 首次内容绘制 (FCP)
时间轴正向搜索时长至少为 5 秒的安静窗口，其中，安静窗口的定义为：没有长任务且不超过两个正在处理的网络 GET 请求。
沿时间轴反向搜索安静窗口之前的最后一个长任务，如果没有找到长任务，则在 FCP 步骤停止执行。
TTI 是安静窗口之前最后一个长任务的结束时间（如果没有找到长任务，则与 FCP 值相同）。
Long tasks（长任务）
超过了 50ms 的任务
FID（First Input Delay）
首次输入延迟：用户对您的网站加载速度的第一印象可以通过First Contentful Paint 首次内容绘制 (FCP)进行测量。但是，您的网站在屏幕上绘制像素的速度只是其中一部分，同样重要的还有当用户试图与这些像素进行交互时，您的网站响应度有多高！
首次输入延迟 (FID) 指标有助于衡量您的用户对网站交互性和响应度的第一印象。
FID 测量从用户第一次与页面交互（例如当他们单击链接、点按按钮或使用由 JavaScript 驱动的自定义控件）直到浏览器对交互作出响应，并实际能够开始处理事件处理程序所经过的时间。
FID 代表⻚⾯的交互体验指标，交互响应的快会让⽤户觉得⽹⻚流畅。
CLS（Cumulative Layout Shift）
累计布局偏移：累积布局偏移 (CLS) 是测量视觉稳定性的一个以用户为中心的重要指标，因为该项指标有助于量化用户经历意外布局偏移的频率，较低的 CLS 有助于确保一个页面是令人愉悦的。
CLS 代表了⻚⾯的稳定指标，尤其在⼿机上这个指标更为重要。因为⼿机屏幕挺⼩，CLS 值⼀⼤的话会让⽤户觉得⻚⾯体验做的很差。
TBT（Total Blocking Time）
总阻塞时间：一个页面的总阻塞时间是在 FCP 和 TTI 之间发生的每个长任务的阻塞时间总和
PerformanceTiming
统计方式：
let n = window.performance.getEntriesByType('navigation')[0]
单位 ms
- navigationStart：在同一个浏览器上下文中，前一个网页（与当前页面不一定同域）unload 的时间戳，如果无前一个网页 unload ，则与 fetchStart 值相等
- fetchStart: 浏览器准备好使用 HTTP 请求抓取文档的时间，这发生在检查本地缓存之前
- domainLookupStart：DNS 域名查询开始的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
- domainLookupEnd：DNS 域名查询完成的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
- connectStart：HTTP（TCP） 开始建立连接的时间，如果是持久连接，则与 fetchStart 值相等,如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接开始的时间
- secureConnectionStart：HTTPS 连接开始的时间，如果不是安全连接，则值为 0
- connectEnd：HTTP（TCP） 完成建立连接的时间（完成握手），如果是持久连接，则与 fetchStart 值相等,如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接完成的时间
- requestStart：HTTP 请求读取真实文档开始的时间（完成建立连接），包括从本地读取缓存,连接错误重连时，这里显示的也是新建立连接的时间
- responseStart：HTTP 开始接收响应的时间（获取到第一个字节），包括从本地读取缓存
- responseEnd：HTTP 响应全部接收完成的时间（获取到最后一个字节），包括从本地读取缓存
- domInteractive：完成解析 DOM 树的时间，document.readyState 变为 interactive，并将抛出 readystatechange 相关事件
- domContentLoadedEventStart：DOM 解析完成后，网页内资源加载开始的时间,文档发生 DOMContentLoaded事件的时间
- domContentLoadedEventEnd：DOM 解析完成后，网页内资源加载完成的时间（如 JS 脚本加载执行完毕），文档的DOMContentLoaded 事件的结束时间
- domComplete：DOM 树解析完成，且资源也准备就绪的时间，document.readyState 变为 complete，并将抛出 readystatechange 相关事件
- loadEventStart：load 事件发送给文档，也即 load 回调函数开始执行的时间
- loadEventEnd：load 事件的回调函数执行完毕的时间
常用网络指标计算方式：
| dnsLookupTime（DNS查询耗时） | n.domainLookupEnd - n.domainLookupStart |
|---|---|
| tcpTime（TCP建立耗时） | n.connectEnd - n.connectStart |
| fetchTime（准备发起请求到响应结束耗时） | n.responseEnd - n.fetchStart |
| parseDomTime (页面解析dom耗时) | n.domComplete - n.domInteractive |
| whiteTime（白屏时间） | n.responseStart - n.navigationStart |
| domreadyTime（时间(用户可操作时间节点) 完成dom渲染时间） | n.domContentLoadedEventEnd - n.navigationStart |
| loadTime（页面onload时间） | n.loadEventEnd - n.navigationStart |
| headerSize（Http header size） | n.transferSize - n.encodedBodySize |
| ttfb（Time to First Byte ） | n.responseStart - n.requestStart |
| downloadTime（Response time only (download)） | n.responseEnd - n.responseStart |
| totalTime（Request plus response time (network only)） | n.responseEnd - n.requestStart |
网络流量速度相关
| 有效带宽的估计值 downlink (MB/s) - Experimental | window.navigator.connection.downlink |
|---|---|
| 网络类型 effectiveType - Experimental'slow-2g', '2g', '3g', or '4g' | window.navigator.connection.effectiveType |
| 有效的往返时间估计 rtt (ms) - Experimental | window.navigator.connection.rtt |
| saveData saveData - Experimentaltrue or false | window.navigator.connection.saveData |
离线缓存
window.navigator.storage.estimate().then((storageEstimate) => {console.log(storageEstimate)})
StorageEstimate - Web API 接口参考 | MDN
提供对你的域名或Web app的数据存储空间总量和已用量的估计值
| quota (byte) | 预留的存储空间总大小,且该大小为估计值how much space is available (quota) |
|---|---|
| usage (byte) | 已经使用的存储空间大小how much storage the app takes up (usage) |
| usageDetails.indexedDB (byte) | indexedDB 已使用的大小 |
核心指标衡量标准
为了对页面或网站的整体性能进行分类，我们取该页面或网站的所有页面浏览量的第 75 个百分位数。换句话说，如果一个网站有至少 75% 的页面浏览量达到"良好"阈值，则该网站在这项指标下就会被归类为性能"良好"。相反，如果有至少 25% 的页面浏览量达到"欠佳"阈值，则该网站会被归类为性能"欠佳"。
性能监控sdk
基于以上理论开发了 性能监控sdk-mmpf
