这是我参与「第五届青训营」伴学笔记创作活动的第 11 天

1.前端监控概览

1.1. 什么是前端监控

前端监控就是尽可能的采集网络通信以及用户交互中产出的性能指标与发生的异常事件并上报到平台完成消费

1.2. 为什么需要前端监控

当我们在浏览网站时，发生一些不符合预期的现象时，如果我们想确切的知道产生的原因就需要用到前端监控，前端监控通过对页面数据的采集和上报，来帮助开发者更快速的对质量差的页面进行分析与归因

1.3.前端监控到底监控了什么

1.性能指标 2.异常事件 3.用户行为

2. 前端监控常用性能指标

2.1 传统性能指标

早期网页是纯静态的，但随着Web爆发式发展，页面交互越来越复杂。开发者开始思考如何提高Web性能、改善用户体验。

因此，2010年8月,W3C成立了Web性能工作组，由来自Google和 Microsoft的工程师担任主席，目标是制定衡量Web应用性能的方法和API。

随后，Web性能工作组开始制定一系列Web 性能标准，应用到桌面和移动浏览器以及其他环境中，帮助Web开发人员评估和理解应用的性能特征。

传统性能指标：

QQ截图20230208125301.png

由于传统性能指标是针对开发者而设计的，所以普通用户很难理解和使用传统性能指标,所以就有了以用户为中心的性能指标

2.2 以用户为中心的性能指标

传统的性能指标专注于容易衡量的技术细节，但是它们很难反应出用户所真正关心的是什么。如果你仅仅是把加载速度优化的更快，你很快就会发现网站的用户体验依然很差。

这就是创建用户为中心的性能指标的原因，它们专注于用户视角下的浏览体验。

用户体验	指标
发生了吗？	FP (First Paint ) , FCP (First Contentful Paint )
内容有用吗？	FMP (First Meaningful Paint ) ,sl (Speed Ilndex),LCP(Largent Contentful)
内容可用吗？	TTl (Time to lnteractive ), TBT(Total Blocking Time)
令人愉悦吗？	FID (First lnput Delay ) ,CLS(Cumulative Layout Shift)

FP：首次渲染的事件点, FP时间点之前，用户看到的都是没有任何内容的白色屏幕

FCP：首次有内容渲染的时间点

FMP：首次绘制有意义内容的时间点

SL:衡量页面可视区域加载速度，帮助检测页面的加载体验差异

FID:测量从用户第一次与页面交互（比如当他们单击链接，点按钮等等）直到浏览器对交互作出响应，实际能够开始处理事件式处理程序所经过的时间

LCP:最大的内容在可视区域内变得可见的时间点

TBT (Total Blocking Time):量化主线程在空闲之前的繁忙程度，有助于理解在加载期间，页面无法响应用户输入的时间有多久。

CLS (Cumulative Layout Shift):量化了在页面加载期间，视口中元素的移动程度。

3.实现简单的前端监控

/**
 * paint -监控 fp 和 fcp
 * largest-contentful-paint 监控 lcp
 * fist-input 监控 fip
*/

 function createPerMonitor(report: ({name, data}) => void) {
        const name = 'performance'
        const entryTypes = ['paint', 'largest-contentful-paint', 'first-input']

        function start() {
          const p = new PerformanceObserver(list => {
            for(const entry of list.getEntries()) {
              report({name, data: entry})
            }
          })
          p.observe({entryTypes})
        }
        return {name, start}
    }

前端监控SDK | 青训营笔记