这是我参与「第五届青训营 」伴学笔记创作活动的第 17 天
一、本堂课重点内容:
- 引入前端监控的概念
- 介绍前端监控的性能指标与异常
- 实战:封装用于监听性能指标与前端异常的监听器
- 实战:封装一个有完整上报能力的 sdk
二、详细知识点介绍:
- 知道前端监控的意义与前世今生。
首先引入的是一个面试里经典的问题,在浏览器里,从输入url到页面内容的展示,这中间发生了什么?
在用户输入后,浏览器处理用户输入的信息,对目标地址发起url请求,在发起请求的过程中一般会发生多次重定向,获取到服务器返回的地址后浏览器读取响应头信息同时准备渲染进程,向服务器端提交文档。在这个期间浏览器还读取响应体数据,页面解析和资源家在。最后是加载完成
那么在这一整个过程中,用户输入到浏览器加载完全需要进行一系列的运行才能看到具体的内容,因此为了在出现意外问题的时候能够知道并且定位哪一部分出现了问题,前端监控就有了它存在的意义。前端监控也能让开发者更快速的对质量差的页面进行分析与归因
- 从用户的视角思考我们监控的性能指标与前端异常给用户带来的影响。
在信息化的时代,已有大量研究表明,性能不佳会目标产生负面影响,一个页面的加载比竞争对手慢1秒,就会损失10%的用户。
三、实践练习例子:
- 学会监听部分性能指标与前端异常,并封装成一个通用的监听器。
- 学会将监听器封装到 sdk 中,以及按需加载和链式调用的一些小技巧。