前端监控 SDK 的一些技术要点原理分析
一个完整的前端监控平台包括三个部分:数据采集与上报、数据整理和存储、数据展示。 本文要讲的就是其中的第一个环节——数据采集与上报。下图是本文要讲述内容的大纲,大家可以先大致了解一下: 仅看理论知识是比较难以理解的,为此我结合本文要讲的技术要点写了一个简单的监控 SDK,可以用它来写一些简单的 DEMO,帮助加深理解。再结合本文一起阅读,效果更好。 性能数据采集 chrome 开发团队提出了一系列用于检测网页性能的指标: FP(first-paint),从页面加载开始到第一个像素绘制到屏幕上的时间 FCP(first-contentful-paint),从页面加载开始到页面内容的任何部分在屏幕上完成渲染的时间 LCP(largest-contentful-paint),从页面加载开始到最大文本块或图像元素在屏幕上完成渲染的时间 CLS(layout-shift),从页面加载开始和其生命周期状态变为隐藏期间发生的所有意外布局偏移的累积分数 这四个性能指标都需要通过 PerformanceObserver 来获取(也可以通过 performance.getEntriesByName() 获取...

