这是我参与【第五届青训营】笔记创作活动的第十天

2023.02.07

为什么需要前端监控

• 打开好慢 ——页面某个关键资源渲染太慢；
• 交互卡顿 ——页面同步计算任务太重，阻塞渲染；
• 资源加载失败 ——客户端网络状态差，或上游服务节点异常；
• 页面白屏 ——页面脚本执行失败、关键资源加载失败、请求失败等。

以用户为中心的性能指标

• FP(First Paint)：首次渲染的时间点。FP时间点之前，用户看到的都是没有任何内容的白色屏幕。

• FCP(First Contentful Paint)：首次有内容渲染的时间点。

• FMP(First Meaningful Paint)：首次绘制有意义内容的时间点。

• TTI(Time to Interaction)：测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。TTI反映页面可用性的重要指标。TTI值越小，代表用户可以更早地操作页面，用户体验就更好。

• SI(Speed Index)：衡量页面可视区域加载速度，帮助检测页面的加载体验差异。

• FID(First Input Delay)：测量从用户第一次与页面交互（比如当他们单击链接、点按按钮等等）直到浏览器对交互作出响应，实际能够开始处理事件时处理程序所经过的时间。

• LCP(Largest Contentful Paint)：最大的内容在可视区域内变得可见的时间点。

  • 优点：1.容易理解；2.给出与FMP相似的结果；3.容易计算和上报；

• TBT(Total Blocking Time)：量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久。一个页面的TBT，是从FCP到TTI之间所有长任务的阻塞时间的总和。

• CLS(Cumulative Layout Shift)：量化了在页面加载期间，视口中元素的移动程度。

前端常见异常

1.静态资源错误

• 静态资源：加载页面所需的html、css和js等文件，以及其他各类多媒体文件，如图片、音频和视频等。
• 静态资源错误：在拉取和加载静态资源的过程中发生了预期之外的错误，如网络异常等，导致静态资源无法正常渲染到页面上。

2.请求异常

• Http请求状态码分类

  • 100-199------------>信号响应
  • 200-299------------>成功响应
  • 300-399------------>重定位消息
  • 400-499------------>客户端错误响应
  • 500-599------------>服务端错误响应

• 请求异常 = 请求响应状态码 >=400

• 对于通过异步请求拉取的静态资源错误也可选择归纳到请求异常

• 状态码0：请求无法执行就是无法发送

• 请求成功率 = 请求成功数/（请求成功数 + 请求失败数）

3.Js错误

• 在页面运行时发生的Js错误会严重影响页面的正常渲染与交互，是前端监控的重点。

4.白屏异常

• 通常我们可以通过判断DOM树的结构来粗略的判断白屏是否发生。

• 通常导致白屏发生的原因可能有如下几点：

  • 发生Js错误导致关键资源渲染失败；
  • 请求异常或静态资源加载失败；
  • 长时间的Js线程繁忙阻塞渲染任务。