前端工程化——监控

监控有四个点：

1. 网页崩溃（crashes）
2. JavaScript 执行出错
3. 网页卡顿
4. 首屏渲染

网页崩溃的监控

使用 service worker 和 setInterval 来实现，参考：如何监控网页崩溃

JavaScript 执行出错

使用 sentry 来对上报错误即可

网页卡顿的监控

网页卡顿就是掉帧，fps 太低了，fps 的监控分为两部分

1. 开发时监控，可借助工具：lag-radar
2. 线上用户监控，可参考：FPS 测试

关键在于，线上用户监控时，如何上报 fps 数据，有两种方案：

1. 开源的前端监控方案：sitespeed.io
2. 自建数据上报，通过 navigator.sendBeacon 上传数据

首屏渲染

借助 window.performance API来实现首屏渲染的监控

参考：初探 performance

打开网页的生命周期