这是我参与「第四届青训营 」笔记创作活动的的第18天
我们团队的大项目选题为「前端监控」。在此，我将记录一些项目相关的前置知识点。
前端监控 前置知识点 Vol. 1
为什么要做前端监控
- 更快发现问题、解决问题——在用户反馈之前
- 坐产品的决策依据——用户流量、性能表现 etc.
- 为业务扩展提供了更多可能性——增值服务 etc.
前端监控目标
稳定性 stability - 保证页面正常加载，不出错
- JS错误：JS执行错误或Promise异常
- 资源异常：script、link等资源加载异常
- 接口错误：ajax或fetch请求接口异常
- 白屏：页面空白
用户体验 experience - 加载快、尽快看到有意义的内容、不会卡顿、交互灵敏
- 加载时间：各个阶段的加载时间
- TTFB (Time to First Byte) 首字节时间：从浏览器发起第一个请求，到数据返回第一个字节所消耗的时间，包含了网络请求时间、后端处理时间
- FP (First Paint) 首次绘制：包括了任何用户自定义的背景绘制，是将第一个像素点绘制到屏幕的时刻
- FCP (First Content Paint) 首次内容绘制：浏览器将第一个DOM渲染到屏幕的时间，可以是文本、图像等，其实就是白屏时间
- FMP (First Meaningful Paint) 首次有意义绘制：页面有意义的内容渲染的时间，是页面可用性的度量标准
- LCP (Largest Contentful Paint) 最大内容渲染：代表在viewport中最大的页面元素加载的时间
- DCL (DomContentLoaded) DOM加载完成：HTML文档被完全加载和解析完成
- L (onLoad)：依赖的资源全部加载完毕
- TTI (Time to Interactive) 可交互时间：应用已进行视觉渲染，而且能可靠的响应用户输入的时间点
- FID (First Input Delay) 首次输入延迟：用户首次和页面交互到页面响应交互的时间
- 卡顿：超过50ms的长任务
业务 business - 分析访问情况
- PV (Page View) 页面浏览量/点击量：用户多次访问同一页面，访问量值累计
- UV (Unique Visitor) 独立访客：访问某个站点的不同IP地址的人数
- 页面停留时间：用户在每一个页面的停留时间
个人思考
前端监控是一个初学者较少涉及的领域，但是从概念上看，其对于生产环境的网站的维护与发展具有深远意义。随着大前端的发展迭代，前端监控的重要性将会逐渐增强。
