如何进行 web 性能监控，你的方法用对了吗？( 四 ) _性能监控

1. 基本性能上报采集数据：将 performance navagation timing 中的所有点都上报，其余的上报内容可参考 performance 分析一节中截取部分上报。例如：白屏时间，JS 和 CSS 总数，以及加载总时长。
其余可参考的上报：是否有缓存？是否启用 gzip 压缩、页面加载方式。
什么时机上报？
google 开发者推荐的上报方式：

文章插图

2. 首屏时间计算我们知道首屏时间是一项重要指标，但是又很难从 performance 中拿到，来看下首屏时间计算主要有哪些方式？
https://web.dev/first-meaningful-paint/
用户自定义打点-最准确的方式
lighthouse 中使用的是 chrome 渲染过程中记录的 trace event
可利用 CDP 拿到页面布局节点数目。
思想是：当页面具有最大布局变化的时间点
aegis 的方法：利用 MutationObserver 接口，监听 document 对象的节点变化。
检查这些变化的节点是否显示在首屏中，若这些节点在首屏中，那当前的时间点即为首屏渲染时间。但是还有首屏内图片的加载时间需要考虑，遍历 performance.getEntries() 拿到的所有图片实体对象，根据图片的初始加载时间和加载完成时间去更新首屏渲染时间。 http://km.oa.com/group/42893/articles/show/397490
利用 MutationObserver 接口提供了监视对 DOM 树所做更改的能力，是 DOM3 Events 规范的一部分。
方法：在首屏内容模块插入一个 div，利用 Mutation Observer API 监听该 div 的 dom 事件，判断该 div 的高度是否大于 0 或者大于指定值，如果大于了，就表示主要内容已经渲染出来，可计算首屏时间。
某个专利：在 loading 状态下循环判断当前页面高度是否大于屏幕高度，若大于，则获取到当前页面的屏幕图像，通过逐像素对比来判断页面渲染是否已满屏。
https://patentimages.storage.googleapis.com/bd/83/3d/f65775c31c7120/CN103324521A.pdf

文章插图

3. 异常上报1）js error
监听 window.onerror 事件
2）promise reject 的异常
监听 unhandledrejection 事件

window.addEventListener("unhandledrejection", function (event) {console.warn("WARNING: Unhandled promise rejection. Shame on you! Reason: "+ event.reason);});

3）资源加载失败
window.addEventListener('error')
4）网络请求失败
重写 window.XMLHttpRequest 和 window.fetch 捕获请求错误
5）iframe 异常
window.frames[0].onerror
6）window.console.error
4. CGI 上报大致原理：拦截 ajax 请求
数据存储与聚合
一个用户访问，可能会上报几十条数据，每条数据都是多维度的。即：当前访问时间、平台、网络、ip 等。这些一条条的数据都会被存储到数据库中，然后通过数据分析与聚合，提炼出有意义的数据。例如：某日所有用户的平均访问时长、pv 等。
数据统计分析的方法：平均值统计法、百分位数统计法、样本分布统计法。
最后觉得此文不错的大佬们可以多多关注或者帮忙转发分享一下哦，感谢！！！！

【如何进行 web 性能监控，你的方法用对了吗？】