性能数据监控
| 延迟与用户反应 | |
| 0 - 16 毫秒 | 流畅；人们特别擅长跟踪运动，如果动画不流畅，他们就会对运动心生反感。 用户可以感知每秒渲染 60 帧的平滑动画转场。也就是每帧 16 毫秒（包括浏览器将新帧绘制到屏幕上所需的时间），留给应用大约 10 毫秒的时间来生成一帧。 |
| 0 - 100 毫秒 | 快，在此时间窗口内响应用户操作，他们会觉得可以立即获得结果。时间再长，操作与反应之间的连接就会中断。 |
| 100 - 300 毫秒 | 可感觉慢，需要loading，用户会遇到轻微可觉察的延迟。 |
| 300 - 1000 毫秒 | 慢，需要做loading和占位。在此窗口内，延迟感觉像是任务自然和持续发展的一部分。对于网络上的大多数用户，加载页面或更改视图代表着一个任务。 |
| 1000+ 毫秒 | 很慢，超过 1 秒，用户的注意力将离开他们正在执行的任务。 |
| 10,000+ 毫秒 | 放弃，用户感到失望，可能会放弃任务；之后他们或许不会再回来。 |
1、首屏加载如果超过1s需要添加骨架屏或者loading等，增加用户等待时间
2、用户操作100ms以内相应，不会有断裂感，超过300ms用户会察觉延迟
3、动画16ms一帧，但是浏览器需要时间用于绘制，所以10ms来执行代码，低于60帧会有丢帧的问题
加载性能指标
- 秒开率：页面首屏加载时间小于1s的比例，也就是页面加载到onload事件触发时所消耗的时间
- FP（first paint）页面首次绘制 和 FCP （first cotent paint）页面内容首次绘制，FP（首次绘制）包括了任何用户自定义的背景绘制，它是首先将像素绘制到屏幕的时刻。FCP（首次内容绘制）是浏览器将第一个 DOM 渲染到屏幕的时间。该指标报告了浏览器首次呈现任何文本、图像、画布或者 SVG 的时间。这两个指标其实指示了我们通常所说的白屏时间。
- FMP（first meaningful paint）首次有意义的绘制，页面可用性的度量标准
- TTFB（time to first byte）受自己时间，从浏览器发送第一个请求到数据返回第一个字节所消耗的时间，包括网络时间、后端处理时间，是链路数据的总和参考标准
增加监控秒开率
稳定性指标
- 资源错误：静态资源加载错误：404、资源地址不正确、远程服务异常
- JS错误：error
- crash：页面摆平不展示内容
- 内存堆栈：监控页面内存和堆栈使用情况，常见如页面内存泄露等原因会直接导致APP闪退
- 接口错误：接口挂了、超时、返回错误信息等
操作体验指标
- 响应延迟：页面响应超过100ms，统计用户交互操作后的浏览器响应时间（www.udacity.com/）
- 卡顿：执行时间超过50ms的任务，会造成卡顿，long task（w3c.github.io/longtasks/）
- 滚动流畅度：页面开始滚动时间差，小与100ms才能体验流畅
- 动画流畅度：检测动画开始和结束，计算帧率，每帧小于10ms才流畅
- TTI（time to interactive） 可交互时间，页面渲染除内容，用户可输入的时间（docs.google.com/document/d/…）
- FID（first input delay）首次输入延迟，用户首次和页面交互到页面响应交互的时间。一般都是因为主线程阻塞，会导致响应慢。这个指标反映用户对当前页面的第一感觉，比如html渲染出来一个输入框，用点了输入框页面却没有响应，卡了一下才能输入内容，这个卡的时间就是FID（web.dev/fid/）
计算一定时间内动画的平均帧率
编程代码优化
- 首屏渲染和PRPL
- 懒加载组件
- 滚动加载分页组件
- web worker
- task拆分
- 代码分割与打包
- 项目架构优化
文献
- 前端数据监控到底在监控什么？：juejin.cn/post/684490…
- 前端性能指标统计：juejin.cn/post/684490…
- 前端数据之美基础篇：blog.sae.sina.com.cn/archives/45…
- 高性能极致用户体验前端开发实战：www.fed123.com/fed-regain/…
- 前端性能监控（一）指标收集：caelumtian.github.io/2019/10/22/…
