这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
为什么我们要聊前端监控
什么是前端监控
为什么需要前端监控
当我们的网页有了前端监控的能力
打开好慢——页面某个关键资源渲染太慢。
交互卡顿——页面同步计算任务太重,阻塞渲染。
资源加载失败——客户端网络状态差,或上游服务节点异常。
页面白屏——页面脚本执行失败、关键资源加载失败、请求失败等。
前端监控通过对页面数据的采集和上报,来帮助开发者更快速地对质量差的页面进行分析与归因。
前端监控到底监控了什么
前端监控之常用性能指标
传统的性能指标专注于容易衡量的技术细节,但是它们很难反应出用户所真正关心的是什么。如果你仅仅是把加载速度优化的更快,你很快就会发现网站的用户体验依然很差。 这就是创建用户为中心的性能指标的原因,它们专注于用户视角下的浏览体验。
SI
FID (First Input Delay):测量从用户第一次与页面交互(比如当他们单击链接、点按按钮等等)直到浏览器对交互作出响应,实际能够开始处理事件时处理程序所经过的时间
前端监控之前端常见异常
静态资源错误
静态资源:加载页面所需的html、css和js等文件,以及其他各类多媒体文件,如图片、音频和视频等。 静态资源错误:在拉取和加载静态资源的过程中发生了预期之外的错误,如网络异常等,导致静态资源无法正常渲染到页面上。
请求异常
JS错误
在页面运行时发生的Js错误会严重影响页面的正常渲染与交互,是前端监控的重点。
白屏异常
标题:「前端监控 SDK 开发」第五届字节跳动青训营 - 前端专场