监控——前端性能监控方案

性能指标：

自动上报标准web性能指标。指标定义如下：

• DomContentloaded 事件
• onload 事件
• FP(First Paint：首次渲染时间)
• FCP(First Contentful Paint：首次内容绘制)
• FMP(First Meaningful Paint：首次渲染关键内容绘制)
• LCP（Largest Contentful Paint：最大内容绘制）
• FID（First Input Delay：首次输入延迟）
• SI (Speed Index：速度指数)
• CLS (Cumulative Layout Shift：累计布局偏移)
• TTI(Time to Interactive：可交互时间)
• TBT(Total Blocking Time：总阻塞时间)
• TTFB(Time to First Byte：首字节时间)
• FPS：实时帧率监测

数据方案

首选方案：PerformanceObserver

w3c规范：https://w3c.github.io/performance-timeline/#introduction（22.07.22）

兼容性方案：
PerformanceNavigationTiming（Navigation Timing 规范已废弃）

w3c规范：https://w3c.github.io/navigation-timing/#abstract （22.06.17）

指标方案

分为以下两个部分

• 针对性指标
• 标准指标（web核心指标）

针对指标

帧率监测：

FrameTiming API
可以用来监测帧率，目前尚在草案阶段
参考：

• https://developer.chrome.com/blog/frame-timing-api/ chrome开发者文档
• https://wicg.github.io/frame-timing/ w3c草案
• https://developer.m