web性能监控

web性能监控、埋点

前端搭建监控体系的目的：如何及时发现问题、如何快速定位问题

前端监控可以分为三类：数据监控、性能监控和异常监控

1、数据监控（页面访问量、用户停留时间、路由跳转等行为）
2、性能监控（首屏加载时间、http请求的响应时间、静态资源整体加载时间、页面渲染时间、交互动画完成时间）

• 工具监控：使用web-vitals库（google 开源的用以衡量性能和用户体验的工具），收集浏览器端的用户核心性能指标，并通过sendBeacon上报到打点浏览器的performance 面板工具
• 代码监控：开发者通过window.performance 属性引入Navigation Timing API，实现了自动、精准的页面性能打点
  • memory字段代表JavaScript对内存的占用
  • navigation字段统计的是一些网页导航相关的数据
  • timing字段包含了网络、解析等一系列的时间数据
• widow.performance.getEntries() 返回一个数组，数组的每个元素代表对应的静态资源的信息
  • initiatorType资源属性，有img、css等
  • duration请求花费的时间

3、异常监控（js异常、样式丢失）**