这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天

为什么要前端监控？

页面问题-网页加载时间慢、卡顿、图片裂开、网页白屏

• 引入前端监控体系：对页面质量差进行分析与归因

常用性能指标

以用户为中心的性能指标

关注于用户真正关心什么？

1.发生了吗？

• FP首屏时间-第一个像素点
• FCP（First Contentful Paint）首次有内容的时间点

2.内容有用吗

• LCP 最大内容在可视区域可见的时间点（交互按钮没出来也算，次要元素可以慢一点渲染出来）
• FMP-首次绘制有意义内容的时间点（约20%不准确）
• SI-Speed Index：页面可视区域加载速度，逐步增加体验感更好，检测页面的加载体验。（一般不会监控，性能损耗太大）

3.内容可用吗?

• TBT-Total Blocking Time量化主线程在空闲之前的繁忙程度。页面无法响应用户的时间。从FCP到TTI之间所有长任务的阻塞时间的总和。 若任务超过50ms则认为长任务，超过50ms后的任务耗时，算作任务的阻塞时间。（用户会感受到）
• TTI-内容可以交互时间点，Time to interactive

4.令人愉悦吗？

• FID-First Input Delay：测量用户第一次与页面交互。-用户从加载完成后什么时候用到这个页面
• CLS cumulative Layout Shift元素偏移：量化了在页面加载中，视口中元素的移动程度。突然的偏移越来越少越好。 会造成操作误触

常见异常

白屏、有些内容没有渲染出来

静态资源：

css、html、js/图片、音频、视频

请求异常：HTTP协议

状态码划分

• 认为>=400 请求异常-fetch
• 状态码0，边缘case。
• 异常指标：请求成功率=请求成功数/(请求成功数+请求失败数)

JS错误

• 影响正常渲染与交互

白屏异常

• 可以通过判断DOM树粗略判断白屏是否发生

通常原因：

• 1.js错误
• 2.请求异常或者静态加载失败
• 3.js线程繁忙阻塞渲染任务

性能指标监控

利用Performance优先 +PerformanceObserve第二步

• 先看官方文档
• 再看技术方案
• 最后coding

封装monitor

• 1.起名字
• 2.监听能力
• 3.主动开启，而不是被动开启（创建出来就被开启）
• 4.数据收集上报能力