android网站开发视频教程推广型网站
性能监控
性能指标
在实现性能监控前，先了解Web Vitals涉及的常见的性能指标
Web Vitals 是由 Google 推出的网页用户体验衡量指标体系，旨在帮助开发者量化和优化网页在实际用户终端上的性能体验。Web Vitals 强调“以用户为中心”的度量，而不是纯技术层面的加载时间。
要按 先后顺序（时间维度） 梳理 Web Vitals，可以从网页加载的生命周期出发，把每个指标放入其发生时机对应的阶段中。这样更利于理解用户体验的演变和指标采集的逻辑。
🧭 一、加载过程的五大阶段
[1] 网络响应阶段
[2] 首次渲染阶段
[3] 内容加载阶段
[4] 用户交互阶段
[5] 页面稳定阶段
📊 二、Web Vitals 指标按时间顺序梳理
| 阶段 | 指标名 | 含义 | 时机 |
|---|---|---|---|
| 1️⃣ 网络响应 | TTFB (Time to First Byte) | 首字节到达 | 浏览器请求后，接收到第一个响应字节 |
| 2️⃣ 首次渲染 | FCP (First Contentful Paint) | 首次绘制文字/图像 | 页面开始有内容渲染（非白屏） |
| 3️⃣ 主内容加载 | LCP (Largest Contentful Paint) | 最大可视内容渲染完成 | 用户感知“页面加载完” |
| 4️⃣ 用户首次交互 | FID (First Input Delay) | 用户首次点击的响应延迟 | 用户第一次交互，直到浏览器处理事件的延迟 |
| 5️⃣ 页面稳定 | CLS (Cumulative Layout Shift) | 布局跳动 | 页面是否因为图片/广告等加载而抖动 |
🧬 三、时间线图（逻辑顺序）
时间单位为毫秒。
TTFB最早，CLS贯穿整个加载过程。
🔁 四、简洁记忆顺序口诀
💡「先 TTFB，见 FCP；看大图，用 LCP；首操作，测 FID；别乱跳，查 CLS」
🛠 五、指标采集时机小贴士
| 指标 | 采集方式 | 推荐 API |
|---|---|---|
| TTFB | performance.timing.responseStart - navigationStart | Navigation Timing |
| FCP | PerformanceObserver 监听 paint | PerformancePaintTiming |
| LCP | PerformanceObserver 监听 largest-contentful-paint | LCP Entry |
| FID | 真实用户交互产生的事件延迟 | Event Timing API |
| CLS | PerformanceObserver 监听 layout-shift | LayoutShift Entry |
🧭 六、总结为时序流图（Mermaid）
PerformanceObserver
PerformanceObserver 是 Performance API 中用于监听性能条目变化的核心工具。它可以在网页运行过程中，异步捕获新生成的性能条目，而不是一开始就调用 performance.getEntries() 拿“旧数据”。
一、PerformanceObserver 的作用
它允许开发者：
- 监听网页运行中
出现的性能条目（如资源加载、绘制、打点、长任务等） 做出动态响应（如打日志、发送埋点数据）- 支持指定监听的
entryTypes，如["resource"],["mark", "measure"]
二、使用方式
1. 创建实例
const observer = new PerformanceObserver((list, observer) => {const entries = list.getEntries();for (const entry of entries) {console.log(entry.name, entry.entryType, entry.startTime, entry.duration);}
});
2. 启动监听
observer.observe({entryTypes: ['mark', 'measure', 'resource']
});
entryTypes是监听的条目类型数组。
三、常用方法
| 方法 | 说明 |
|---|---|
observe(options) | 开始监听性能条目 |
disconnect() | 停止监听 |
takeRecords() | 获取当前缓冲区的所有性能条目并清空缓冲区 |
四、选项说明
observe(options)
observer.observe({entryTypes: ['resource', 'paint']
});
或使用过时写法（不推荐）：
observer.observe({type: 'resource',buffered: true
});
参数说明：
entryTypes: 性能条目的类型（推荐）type: 单一类型（不推荐）buffered: 是否包括已存在的历史条目（true会包含之前的记录）
五、支持的 entryType（性能条目类型）
| 类型 | 含义 |
|---|---|
resource | 外部资源加载耗时 |
mark | 用户自定义打点 |
measure | 用户定义的测量点 |
paint | 首次绘制（first-paint, first-contentful-paint） |
navigation | 页面导航 |
longtask | 长任务（如 JS 卡顿） |
element | 关键可视元素曝光（需要配置） |
largest-contentful-paint | 最大内容绘制时间 |
layout-shift | 布局偏移（CLS） |
六、典型使用场景
- 监听
资源加载情况（如 img、script） - 监听
FCP、LCP、CLS、Long Tasks，用于Web Vitals 性能分析 - 异步
获取自定义打点结果 - 在 SPA 页面做
性能埋点
七、注意事项
PerformanceObserver是异步的：不会立即收到记录。- 使用
buffered: true可获取已经发生的记录（旧数据），用于首次加载打点。 - 页面进入后台或关闭时，需要调用
takeRecords()收集剩余数据。 - 一些条目需要在支持的浏览器中开启对应实验性特性（如
longtask）。
八、Mermaid 类图详解 PerformanceObserver
