前端性能监控主要考虑以下几个方面
1. 静态性能
静态性能包括：包体积分析、lightHouse
2. 动态性能
（1）首屏：FMP、TTI、FCP、FP、满开比、秒开率、页面渲染数据时长
（2）卡顿：首次交互延迟、交互中最大延迟
（3）资源加载：静态资源加载耗时
（4）白屏 & loading 时长
3. 接口性能
（1）关键接口耗费时长监控
（2）所有接口耗费时长
（3）关键接口的成功率监控
（4）所有接口的成功率监控
4. 用户体验指标
主观：满意度（问卷调研、feedgood等方式）
客观：
（1）流畅性：页面加载性能、页面卡顿、帧率、数据更新时长(列表)、滚动卡顿、首次加载跳出率
（2）稳定性：脚本报错、接口异常、资源异常、白屏率
（3）业务指标：流量、到达率、转化(业务属性)、留存、活跃用户率、页面停留时长
（4）用户行为：业务场景决定的用户操作行为，如页面流、操作流、表单分析、业务自定义链路分析
页面性能分析
1. 页面加载路径
上图相关的时间点。
第 1 步 开始计时
startTime：记录开始时间。
第 2 步 重定向
redirectStart：重定向开始时间。
redirectEnd：重定向结束时间。
第 3 步 浏览器与服务器连接
fetchStart：浏览器发起 HTTP 请求时间。
domainLookupStart：DNS 查询开始时间。
domainLookupEnd：DNS 查询结束时间。
connectStart：TCP 连接开始时间。
connectEnd：TCP 连接结束时间。
第 4 步 浏览器与服务器数据交互
secureConnectionStart：浏览器跟服务器建立安全连接的时间。
requestStart：浏览器向服务器开始发送数据的时间。
responseStart：服务器向浏览器开始发送数据的时间。
responseEnd：服务器向浏览器结束发送数据的时间。
第 5 步 浏览器 DOM 解析
domLoading：DOM 开始解析的时间。
domInteractive：DOM 解析完成，开始加载内嵌资源的时间。
domContentLoadedEventStart：需要被执行的脚本已经被解析的时间。
domContentLoadedEventEnd：需要立即执行的脚本已经被执行的时间。
domComplete：文档解析完毕的时间。
当我们在控制台中 输入 window.performance 时，输出如下：
对于性能渲染相关的 我们主要看 window.performance.timing 这个对象，以下是每个字段的解析：
2. 渲染路径
