Performance Observer API 实战：前端性能监控的终极方案

“我们的页面性能怎么样？“——面对这个问题，很多团队的回答还停留在”感觉挺快的”或者”Lighthouse 跑了 90 分”的阶段。但真实用户的体验可能和你在办公室用 MacBook Pro + 千兆网络测出来的结果天差地别。

本文将深入讲解如何使用 Performance Observer API 构建一套完整的前端性能监控方案，覆盖 LCP、FID、CLS、INP 四大核心指标的采集原理与实现，并最终手写一个生产级的性能监控 SDK。

一、为什么需要真实用户监控（RUM）#

1.1 Lab Data vs Field Data#

Lab Data（实验室数据）：Lighthouse、WebPageTest 等工具在受控环境下测出的数据
Field Data（现场数据）：真实用户在各种设备、网络条件下的实际体验数据

1
你的 Lighthouse 分数：95
2
你在印度用户的 Android 手机上：35

这不是夸张。Google 的数据显示，不同设备间的性能差异可达 10 倍以上。只有采集真实用户数据，才能了解真实的性能状况。

1.2 Core Web Vitals#

Google 定义的三大核心指标（加上 INP 替代 FID）：

指标	全称	衡量维度	好	需改进	差
LCP	Largest Contentful Paint	加载速度	≤2.5s	≤4s	>4s
INP	Interaction to Next Paint	交互响应	≤200ms	≤500ms	>500ms
CLS	Cumulative Layout Shift	视觉稳定性	≤0.1	≤0.25	>0.25

二、PerformanceObserver 基础#

PerformanceObserver 是浏览器提供的性能数据订阅 API，你可以注册对特定类型性能事件的监听。

2.1 基本用法#

1
const observer = new PerformanceObserver((list) => {
2
  for (const entry of list.getEntries()) {
3
    console.log(entry.name, entry.entryType, entry.startTime, entry.duration);
4
  }
5
});
6

7
// 监听资源加载
8
observer.observe({ type: 'resource', buffered: true });

buffered: true 是关键参数——它会返回在 Observer 创建之前已经发生的事件。如果不加这个参数，你可能会错过页面加载初期的性能数据。

2.2 支持的 entryType#

1
// 查看当前浏览器支持哪些类型
2
console.log(PerformanceObserver.supportedEntryTypes);
3
// 常见输出：
4
// ["element", "event", "first-input", "largest-contentful-paint",
5
//  "layout-shift", "longtask", "mark", "measure", "navigation",
6
//  "paint", "resource", "visibility-state"]

2.3 与 performance.getEntries() 的区别#

1
// 同步获取（可能遗漏正在进行的条目）
2
const entries = performance.getEntriesByType('resource');
3

4
// 异步订阅（推荐，不会遗漏）
5
const observer = new PerformanceObserver((list) => {
6
  // 每当有新的 resource 条目产生时触发
7
});
8
observer.observe({ type: 'resource', buffered: true });

三、LCP（Largest Contentful Paint）采集#

LCP 衡量的是视口内最大可见内容元素完成渲染的时间。“最大内容”通常是：

<img> 元素
<video> 的封面图
带有 background-image 的块级元素
大段文本块

3.1 采集实现#

1
function observeLCP(callback) {
2
  let lcpValue = 0;
3
  let lcpEntry = null;
4

5
  const observer = new PerformanceObserver((list) => {
6
    const entries = list.getEntries();
7
    // LCP 会持续更新，直到用户交互
8
    // 最后一个条目就是最终的 LCP
9
    const lastEntry = entries[entries.length - 1];
10
    lcpValue = lastEntry.startTime;
11
    lcpEntry = lastEntry;
12
  });
13

14
  observer.observe({ type: 'largest-contentful-paint', buffered: true });
15

16
  // LCP 在用户首次交互后确定
17
  // 使用 visibilitychange 和用户输入事件来确定最终值
18
  const reportLCP = () => {
19
    if (lcpEntry) {
20
      observer.disconnect();
21
      callback({
22
        value: lcpValue,
23
        element: lcpEntry.element?.tagName,
24
        url: lcpEntry.url,
25
        size: lcpEntry.size,
26
        loadTime: lcpEntry.loadTime,
27
        renderTime: lcpEntry.renderTime,
28
      });
29
    }
30
  };
31

32
  // 页面切到后台时上报
33
  document.addEventListener('visibilitychange', () => {
34
    if (document.visibilityState === 'hidden') {
35
      reportLCP();
36
    }
37
  });
38

39
  // 用户首次交互时上报
40
  ['keydown', 'click', 'pointerdown'].forEach((type) => {
41
    document.addEventListener(type, reportLCP, { once: true, capture: true });
42
  });
43

44
  return observer;
45
}
46

47
// 使用
48
observeLCP((data) => {
49
  console.log('LCP:', data.value.toFixed(2), 'ms');
50
  console.log('LCP 元素:', data.element);
51
  console.log('资源 URL:', data.url);
52
});

3.2 LCP 的注意事项#

1
// LCP 可能被多次更新
2
// 例如：先渲染文字(LCP=500ms) → 再渲染大图(LCP=1200ms)
3
// 最终 LCP 取最后一个值
4

5
// LCP 不包括用户交互后渲染的内容
6
// 一旦用户点击/滚动/按键，LCP 就"冻结"了
7

8
// renderTime vs loadTime
9
// renderTime: 元素实际渲染到屏幕的时间
10
// loadTime: 资源加载完成的时间（对图片有意义）
11
// 跨域资源如果没有 Timing-Allow-Origin 头，renderTime 为 0

四、FID（First Input Delay）采集#

FID 衡量用户首次交互（点击、轻触、按键）到浏览器实际开始处理事件之间的延迟。注意：FID 已被 INP 取代，但仍值得了解。

1
function observeFID(callback) {
2
  const observer = new PerformanceObserver((list) => {
3
    const firstInput = list.getEntries()[0];
4
    if (firstInput) {
5
      const fid = firstInput.processingStart - firstInput.startTime;
6
      callback({
7
        value: fid,
8
        eventType: firstInput.name,
9
        startTime: firstInput.startTime,
10
        processingStart: firstInput.processingStart,
11
        processingEnd: firstInput.processingEnd,
12
        duration: firstInput.duration,
13
      });
14
      observer.disconnect();
15
    }
16
  });
17

18
  observer.observe({ type: 'first-input', buffered: true });
19
  return observer;
20
}
21

22
// 使用
23
observeFID((data) => {
24
  console.log(`FID: ${data.value.toFixed(2)}ms (${data.eventType})`);
25
});

FID 的局限性#

FID 只测量第一次交互的延迟，如果第一次交互很快但后续交互很慢，FID 无法反映。这就是 INP 取代 FID 的原因。

五、CLS（Cumulative Layout Shift）采集#

CLS 衡量页面整个生命周期中所有意外布局偏移的累计分数。

5.1 什么是布局偏移#

1
用户正在阅读文章 → 突然上方加载了一个广告 → 文章内容被推下去了

这种意外的视觉跳动就是布局偏移。注意，用户交互（如点击展开菜单）引起的布局变化不算CLS。

5.2 采集实现#

CLS 的计算方式在 2021 年后改为最大会话窗口算法：

1
function observeCLS(callback) {
2
  let clsValue = 0;
3
  let sessionValue = 0;
4
  let sessionEntries = [];
5

6
  const observer = new PerformanceObserver((list) => {
7
    for (const entry of list.getEntries()) {
8
      // 忽略用户交互引起的偏移
9
      if (!entry.hadRecentInput) {
10
        const firstSessionEntry = sessionEntries[0];
11
        const lastSessionEntry = sessionEntries[sessionEntries.length - 1];
12

13
        // 如果与上一次偏移间隔 < 1秒，且整个会话 < 5秒，归入同一会话窗口
14
        if (
15
          sessionValue &&
16
          entry.startTime - lastSessionEntry.startTime < 1000 &&
17
          entry.startTime - firstSessionEntry.startTime < 5000
18
        ) {
19
          sessionValue += entry.value;
20
          sessionEntries.push(entry);
21
        } else {
22
          // 开始新的会话窗口
23
          sessionValue = entry.value;
24
          sessionEntries = [entry];
25
        }
26

27
        // CLS = 所有会话窗口中最大的那个
28
        if (sessionValue > clsValue) {
29
          clsValue = sessionValue;
30
        }
31
      }
32
    }
33
  });
34

35
  observer.observe({ type: 'layout-shift', buffered: true });
36

37
  // 页面隐藏时上报
38
  document.addEventListener('visibilitychange', () => {
39
    if (document.visibilityState === 'hidden') {
40
      observer.disconnect();
41
      callback({
42
        value: clsValue,
43
        entries: sessionEntries.map((e) => ({
44
          value: e.value,
45
          startTime: e.startTime,
46
          sources: e.sources?.map((s) => ({
47
            node: s.node?.tagName,
48
            previousRect: s.previousRect,
49
            currentRect: s.currentRect,
50
          })),
51
        })),
52
      });
53
    }
54
  });
55

56
  return observer;
57
}
58

59
// 使用
60
observeCLS((data) => {
61
  console.log('CLS:', data.value.toFixed(4));
62
  data.entries.forEach((entry) => {
63
    console.log('偏移源:', entry.sources);
64
  });
65
});

5.3 常见 CLS 问题与修复#

1
<!-- 问题 1：图片没有尺寸 → 加载后撑开空间 -->
2
<!-- ❌ -->
3
<img src="photo.jpg">
4

5
<!-- ✅ 始终设置宽高 -->
6
<img src="photo.jpg" width="800" height="600">
7

8
<!-- 或使用 CSS aspect-ratio -->
9
<style>
10
  .responsive-img {
11
    width: 100%;
12
    aspect-ratio: 16 / 9;
13
    object-fit: cover;
14
  }
15
</style>
16
<img class="responsive-img" src="photo.jpg">

1
/* 问题 2：Web 字体加载导致文字跳动 */
2
/* ✅ 使用 font-display: swap 或 optional */
3
@font-face {
4
  font-family: 'CustomFont';
5
  src: url('font.woff2') format('woff2');
6
  font-display: swap;
7
}
8

9
/* 更好：使用 size-adjust 匹配 fallback 字体的度量 */
10
@font-face {
11
  font-family: 'CustomFont';
12
  src: url('font.woff2') format('woff2');
13
  font-display: swap;
14
  size-adjust: 105%;
15
  ascent-override: 95%;
16
  descent-override: 22%;
17
  line-gap-override: 0%;
18
}

1
/* 问题 3：动态插入的内容 */
2
/* ✅ 预留空间 */
3
.ad-slot {
4
  min-height: 250px;
5
  /* 使用 contain-intrinsic-size 更精确 */
6
  contain-intrinsic-size: 300px 250px;
7
}

六、INP（Interaction to Next Paint）采集#

INP 衡量页面整个生命周期中所有交互的响应延迟，取第 98 百分位值（或近似值），全面反映页面的交互响应性。

6.1 INP 的组成#

1
INP = Input Delay + Processing Time + Presentation Delay
2

3
Input Delay: 事件进入队列到开始处理的时间（主线程可能在忙）
4
Processing Time: 事件处理函数的执行时间
5
Presentation Delay: 处理完到下一帧渲染上屏的时间

6.2 采集实现#

1
function observeINP(callback) {
2
  // 收集所有交互的最大延迟
3
  const interactionMap = new Map();
4

5
  const observer = new PerformanceObserver((list) => {
6
    for (const entry of list.getEntries()) {
7
      // 只关注有 interactionId 的事件（用户交互事件）
8
      if (!entry.interactionId) continue;
9

10
      const existing = interactionMap.get(entry.interactionId);
11
      // 同一个交互可能触发多个事件（pointerdown + pointerup + click）
12
      // 取 duration 最大的那个
13
      if (!existing || entry.duration > existing.duration) {
14
        interactionMap.set(entry.interactionId, {
15
          id: entry.interactionId,
16
          latency: entry.duration,
17
          name: entry.name,
18
          startTime: entry.startTime,
19
          processingStart: entry.processingStart,
20
          processingEnd: entry.processingEnd,
21
          inputDelay: entry.processingStart - entry.startTime,
22
          processingTime: entry.processingEnd - entry.processingStart,
23
          presentationDelay:
24
            entry.startTime + entry.duration - entry.processingEnd,
25
          target: entry.target?.tagName,
26
        });
27
      }
28
    }
29
  });
30

31
  // 使用 durationThreshold 过滤掉极短的事件
32
  observer.observe({
33
    type: 'event',
34
    buffered: true,
35
    durationThreshold: 16, // 只记录 > 16ms 的事件
36
  });
37

38
  function getINP() {
39
    const interactions = [...interactionMap.values()];
40
    if (interactions.length === 0) return null;
41

42
    // 按 latency 降序排列
43
    interactions.sort((a, b) => b.latency - a.latency);
44

45
    // 取第 98 百分位
46
    // 简化算法：如果交互数 < 50，取最大值；否则忽略最差的 2%
47
    const index = Math.min(
48
      interactions.length - 1,
49
      Math.floor(interactions.length * 0.02)
50
    );
51

52
    return interactions[index];
53
  }
54

55
  document.addEventListener('visibilitychange', () => {
56
    if (document.visibilityState === 'hidden') {
57
      observer.disconnect();
58
      const inp = getINP();
59
      if (inp) {
60
        callback({
61
          value: inp.latency,
62
          detail: inp,
63
          totalInteractions: interactionMap.size,
64
        });
65
      }
66
    }
67
  });
68

69
  return { observer, getINP };
70
}
71

72
// 使用
73
observeINP((data) => {
74
  console.log('INP:', data.value, 'ms');
75
  console.log('最慢交互类型:', data.detail.name);
76
  console.log('Input Delay:', data.detail.inputDelay.toFixed(2), 'ms');
77
  console.log('Processing Time:', data.detail.processingTime.toFixed(2), 'ms');
78
  console.log('Presentation Delay:', data.detail.presentationDelay.toFixed(2), 'ms');
79
  console.log('总交互数:', data.totalInteractions);
80
});

6.3 优化 INP 的策略#

1
// 1. 减少 Input Delay —— 避免长任务阻塞主线程
2
// ❌ 同步处理大量数据
3
button.addEventListener('click', () => {
4
  processLargeDataset(data); // 阻塞 500ms
5
  updateUI();
6
});
7

8
// ✅ 使用 scheduler.yield() 让出主线程
9
button.addEventListener('click', async () => {
10
  // 先更新 UI 给用户反馈
11
  showLoadingState();
12

13
  // 让出主线程，让浏览器有机会渲染
14
  await scheduler.yield();
15

16
  // 再处理耗时操作
17
  processLargeDataset(data);
18

19
  await scheduler.yield();
20

21
  updateUI();
22
});
23

24
// 2. 减少 Processing Time —— 拆分长任务
25
// ❌ 一个事件处理函数干了太多事
26
input.addEventListener('input', (e) => {
27
  validateInput(e.target.value);    // 10ms
28
  filterResults(e.target.value);    // 50ms
29
  updateSuggestions(filtered);      // 20ms
30
  logAnalytics(e.target.value);     // 5ms
31
  // 总共 85ms
32
});
33

34
// ✅ 拆分为高优先级和低优先级
35
input.addEventListener('input', (e) => {
36
  const value = e.target.value;
37
  // 高优先级：用户立即需要看到的
38
  validateInput(value);
39

40
  // 低优先级：延迟处理
41
  requestIdleCallback(() => {
42
    filterResults(value);
43
    updateSuggestions(filtered);
44
  });
45

46
  // 更低优先级：分析日志
47
  queueMicrotask(() => logAnalytics(value));
48
});
49

50
// 3. 减少 Presentation Delay —— 减少渲染工作量
51
// 使用 contain: content 限制重排范围
52
// 使用虚拟列表减少 DOM 节点数
53
// 避免在事件处理中触发强制同步布局

七、长任务监控#

长任务（Long Task）是指耗时超过 50ms 的主线程任务，它是导致 FID/INP 恶化的直接原因。

1
function observeLongTasks(callback) {
2
  const observer = new PerformanceObserver((list) => {
3
    for (const entry of list.getEntries()) {
4
      callback({
5
        duration: entry.duration,
6
        startTime: entry.startTime,
7
        // attribution 告诉你长任务来自哪里
8
        attribution: entry.attribution?.map((attr) => ({
9
          name: attr.name,
10
          entryType: attr.entryType,
11
          containerType: attr.containerType,
12
          containerSrc: attr.containerSrc,
13
          containerName: attr.containerName,
14
        })),
15
      });
16
    }
17
  });
18

19
  observer.observe({ type: 'longtask', buffered: true });
20
  return observer;
21
}
22

23
// 使用
24
observeLongTasks((task) => {
25
  if (task.duration > 100) {
26
    console.warn(
27
      `⚠️ 检测到长任务: ${task.duration.toFixed(0)}ms`,
28
      task.attribution
29
    );
30
  }
31
});

八、资源加载监控#

1
function observeResources(callback) {
2
  const observer = new PerformanceObserver((list) => {
3
    for (const entry of list.getEntries()) {
4
      // 过滤出关键信息
5
      const resourceData = {
6
        name: entry.name,
7
        type: entry.initiatorType, // script, css, img, fetch, xmlhttprequest
8
        duration: entry.duration,
9
        transferSize: entry.transferSize,
10
        encodedBodySize: entry.encodedBodySize,
11
        decodedBodySize: entry.decodedBodySize,
12
        // 详细的时间分解
13
        timing: {
14
          dns: entry.domainLookupEnd - entry.domainLookupStart,
15
          tcp: entry.connectEnd - entry.connectStart,
16
          tls: entry.secureConnectionStart
17
            ? entry.connectEnd - entry.secureConnectionStart
18
            : 0,
19
          ttfb: entry.responseStart - entry.requestStart,
20
          download: entry.responseEnd - entry.responseStart,
21
        },
22
        // 缓存命中检测
23
        cached: entry.transferSize === 0 && entry.decodedBodySize > 0,
24
      };
25

26
      callback(resourceData);
27
    }
28
  });
29

30
  observer.observe({ type: 'resource', buffered: true });
31
  return observer;
32
}
33

34
// 使用
35
observeResources((resource) => {
36
  if (resource.duration > 1000) {
37
    console.warn(`慢资源: ${resource.name} (${resource.duration.toFixed(0)}ms)`);
38
    console.log('  DNS:', resource.timing.dns.toFixed(0), 'ms');
39
    console.log('  TCP:', resource.timing.tcp.toFixed(0), 'ms');
40
    console.log('  TTFB:', resource.timing.ttfb.toFixed(0), 'ms');
41
    console.log('  下载:', resource.timing.download.toFixed(0), 'ms');
42
  }
43
});

九、自建性能监控 SDK#

把上面所有的采集能力整合成一个生产级的 SDK：

1
class PerfMonitor {
2
  constructor(config = {}) {
3
    this.config = {
4
      endpoint: config.endpoint || '/api/perf',
5
      sampleRate: config.sampleRate || 1.0, // 采样率
6
      appId: config.appId || 'default',
7
      debug: config.debug || false,
8
      ...config,
9
    };
10

11
    this.metrics = {};
12
    this.observers = [];
13
    this.buffer = [];
14
    this.flushTimer = null;
15

16
    // 采样控制
17
    this.shouldSample = Math.random() < this.config.sampleRate;
18
    if (!this.shouldSample) return;
19

20
    this._init();
21
  }
22

23
  _init() {
24
    this._observeLCP();
25
    this._observeCLS();
26
    this._observeINP();
27
    this._observeFID();
28
    this._observeLongTasks();
29
    this._observeNavigation();
30

31
    // 页面卸载前发送数据
32
    document.addEventListener('visibilitychange', () => {
33
      if (document.visibilityState === 'hidden') {
34
        this._flush();
35
      }
36
    });
37

38
    // 定期发送缓冲数据
39
    this.flushTimer = setInterval(() => this._flush(), 30000);
40
  }
41

42
  _observeLCP() {
43
    try {
44
      let lcpValue = 0;
45
      const observer = new PerformanceObserver((list) => {
46
        const entries = list.getEntries();
47
        const last = entries[entries.length - 1];
48
        lcpValue = last.startTime;
49
        this.metrics.lcp = {
50
          value: lcpValue,
51
          element: last.element?.tagName,
52
          url: last.url,
53
          size: last.size,
54
        };
55
      });
56
      observer.observe({ type: 'largest-contentful-paint', buffered: true });
57
      this.observers.push(observer);
58
    } catch (e) {
59
      this._debug('LCP not supported');
60
    }
61
  }
62

63
  _observeCLS() {
64
    try {
65
      let clsValue = 0;
66
      let sessionValue = 0;
67
      let sessionEntries = [];
68

69
      const observer = new PerformanceObserver((list) => {
70
        for (const entry of list.getEntries()) {
71
          if (entry.hadRecentInput) continue;
72

73
          const firstEntry = sessionEntries[0];
74
          const lastEntry = sessionEntries[sessionEntries.length - 1];
75

76
          if (
77
            sessionValue &&
78
            entry.startTime - lastEntry.startTime < 1000 &&
79
            entry.startTime - firstEntry.startTime < 5000
80
          ) {
81
            sessionValue += entry.value;
82
            sessionEntries.push(entry);
83
          } else {
84
            sessionValue = entry.value;
85
            sessionEntries = [entry];
86
          }
87

88
          if (sessionValue > clsValue) {
89
            clsValue = sessionValue;
90
            this.metrics.cls = { value: clsValue };
91
          }
92
        }
93
      });
94
      observer.observe({ type: 'layout-shift', buffered: true });
95
      this.observers.push(observer);
96
    } catch (e) {
97
      this._debug('CLS not supported');
98
    }
99
  }
100

101
  _observeINP() {
102
    try {
103
      const interactionMap = new Map();
104

105
      const observer = new PerformanceObserver((list) => {
106
        for (const entry of list.getEntries()) {
107
          if (!entry.interactionId) continue;
108
          const existing = interactionMap.get(entry.interactionId);
109
          if (!existing || entry.duration > existing.duration) {
110
            interactionMap.set(entry.interactionId, entry);
111
          }
112
        }
113

114
        // 计算当前 INP
115
        const interactions = [...interactionMap.values()];
116
        if (interactions.length > 0) {
117
          interactions.sort((a, b) => b.duration - a.duration);
118
          const idx = Math.min(
119
            interactions.length - 1,
120
            Math.floor(interactions.length * 0.02)
121
          );
122
          this.metrics.inp = {
123
            value: interactions[idx].duration,
124
            interactionCount: interactions.length,
125
          };
126
        }
127
      });
128
      observer.observe({ type: 'event', buffered: true, durationThreshold: 16 });
129
      this.observers.push(observer);
130
    } catch (e) {
131
      this._debug('INP not supported');
132
    }
133
  }
134

135
  _observeFID() {
136
    try {
137
      const observer = new PerformanceObserver((list) => {
138
        const entry = list.getEntries()[0];
139
        if (entry) {
140
          this.metrics.fid = {
141
            value: entry.processingStart - entry.startTime,
142
            eventType: entry.name,
143
          };
144
          observer.disconnect();
145
        }
146
      });
147
      observer.observe({ type: 'first-input', buffered: true });
148
      this.observers.push(observer);
149
    } catch (e) {
150
      this._debug('FID not supported');
151
    }
152
  }
153

154
  _observeLongTasks() {
155
    try {
156
      let longTaskCount = 0;
157
      let totalBlockingTime = 0;
158

159
      const observer = new PerformanceObserver((list) => {
160
        for (const entry of list.getEntries()) {
161
          longTaskCount++;
162
          // TBT = 每个长任务超过 50ms 的部分之和
163
          totalBlockingTime += Math.max(0, entry.duration - 50);
164
        }
165
        this.metrics.longTasks = {
166
          count: longTaskCount,
167
          tbt: totalBlockingTime,
168
        };
169
      });
170
      observer.observe({ type: 'longtask', buffered: true });
171
      this.observers.push(observer);
172
    } catch (e) {
173
      this._debug('LongTask not supported');
174
    }
175
  }
176

177
  _observeNavigation() {
178
    try {
179
      const observer = new PerformanceObserver((list) => {
180
        const entry = list.getEntries()[0];
181
        if (entry) {
182
          this.metrics.navigation = {
183
            type: entry.type, // navigate, reload, back_forward, prerender
184
            ttfb: entry.responseStart - entry.requestStart,
185
            domContentLoaded: entry.domContentLoadedEventEnd - entry.startTime,
186
            load: entry.loadEventEnd - entry.startTime,
187
            domInteractive: entry.domInteractive - entry.startTime,
188
            // 详细时序
189
            dns: entry.domainLookupEnd - entry.domainLookupStart,
190
            tcp: entry.connectEnd - entry.connectStart,
191
            redirect: entry.redirectEnd - entry.redirectStart,
192
            // 传输
193
            transferSize: entry.transferSize,
194
          };
195
        }
196
      });
197
      observer.observe({ type: 'navigation', buffered: true });
198
      this.observers.push(observer);
199
    } catch (e) {
200
      this._debug('Navigation timing not supported');
201
    }
202
  }
203

204
  // 手动标记自定义指标
205
  mark(name) {
206
    performance.mark(name);
207
  }
208

209
  measure(name, startMark, endMark) {
210
    try {
211
      const measure = performance.measure(name, startMark, endMark);
212
      this._addToBuffer({
213
        type: 'custom',
214
        name,
215
        value: measure.duration,
216
        timestamp: Date.now(),
217
      });
218
    } catch (e) {
219
      this._debug('Measure failed:', e);
220
    }
221
  }
222

223
  _addToBuffer(data) {
224
    this.buffer.push({
225
      ...data,
226
      appId: this.config.appId,
227
      url: location.href,
228
      userAgent: navigator.userAgent,
229
      connection: navigator.connection
230
        ? {
231
            effectiveType: navigator.connection.effectiveType,
232
            rtt: navigator.connection.rtt,
233
            downlink: navigator.connection.downlink,
234
          }
235
        : null,
236
      deviceMemory: navigator.deviceMemory,
237
      hardwareConcurrency: navigator.hardwareConcurrency,
238
      timestamp: Date.now(),
239
    });
240
  }
241

242
  _flush() {
243
    // 收集最终指标
244
    this._addToBuffer({
245
      type: 'web-vitals',
246
      metrics: { ...this.metrics },
247
    });
248

249
    if (this.buffer.length === 0) return;
250

251
    const payload = JSON.stringify(this.buffer);
252
    this.buffer = [];
253

254
    // 使用 sendBeacon 确保页面关闭时也能发送
255
    if (navigator.sendBeacon) {
256
      navigator.sendBeacon(this.config.endpoint, payload);
257
    } else {
258
      // 降级方案
259
      fetch(this.config.endpoint, {
260
        method: 'POST',
261
        body: payload,
262
        keepalive: true,
263
      }).catch(() => {});
264
    }
265

266
    this._debug('Flushed metrics:', payload);
267
  }
268

269
  _debug(...args) {
270
    if (this.config.debug) {
271
      console.log('[PerfMonitor]', ...args);
272
    }
273
  }
274

275
  destroy() {
276
    this.observers.forEach((o) => o.disconnect());
277
    clearInterval(this.flushTimer);
278
    this._flush();
279
  }
280
}
281

282
// 初始化
283
const monitor = new PerfMonitor({
284
  endpoint: 'https://analytics.example.com/perf',
285
  appId: 'my-app',
286
  sampleRate: 0.1, // 10% 采样
287
  debug: false,
288
});
289

290
// 自定义指标
291
monitor.mark('app-init-start');
292
// ... 初始化逻辑
293
monitor.mark('app-init-end');
294
monitor.measure('app-init', 'app-init-start', 'app-init-end');
295

296
export default PerfMonitor;

十、数据上报策略#

10.1 sendBeacon vs fetch#

1
// sendBeacon 的优势：
2
// 1. 页面卸载时也能发送（不会被浏览器取消）
3
// 2. 异步且不阻塞页面关闭
4
// 3. 有大小限制（通常 64KB）
5

6
// 降级策略
7
function sendData(url, data) {
8
  const payload = JSON.stringify(data);
9

10
  // 优先使用 sendBeacon
11
  if (navigator.sendBeacon) {
12
    const success = navigator.sendBeacon(url, payload);
13
    if (success) return;
14
  }
15

16
  // 降级为 fetch + keepalive
17
  fetch(url, {
18
    method: 'POST',
19
    body: payload,
20
    keepalive: true,
21
    headers: { 'Content-Type': 'application/json' },
22
  }).catch(() => {
23
    // 最终降级：同步 XMLHttpRequest（不推荐）
24
    // 只在极端情况下使用
25
  });
26
}

10.2 采样与数据量控制#

1
// 分级采样策略
2
function getSampleRate(metric) {
3
  // 核心指标全量采集
4
  if (['lcp', 'cls', 'inp'].includes(metric)) return 1.0;
5
  // 资源加载 10% 采样
6
  if (metric === 'resource') return 0.1;
7
  // 长任务 50% 采样
8
  if (metric === 'longtask') return 0.5;
9
  // 其他 5% 采样
10
  return 0.05;
11
}
12

13
// 数据压缩
14
function compressPayload(data) {
15
  // 移除不必要的字段
16
  const compressed = data.map((item) => ({
17
    t: item.type,
18
    v: Math.round(item.value),
19
    ts: item.timestamp,
20
    // ... 只保留必要字段
21
  }));
22
  return JSON.stringify(compressed);
23
}

十一、总结#

Performance Observer API 是前端性能监控的基石。通过本文，你应该掌握了：

四大 Web Vitals 指标的采集原理和实现：LCP、FID、CLS、INP
长任务和资源加载的监控方法
生产级 SDK 的完整设计：采样、缓冲、上报、容错
数据上报的最佳实践：sendBeacon、keepalive、采样控制

实际项目中，你可以直接使用 Google 的 web-vitals 库作为采集层——它经过了大量的边界情况处理和浏览器兼容性测试。但理解底层原理，才能在出问题时快速定位和解决。

性能优化不是一次性的工作，而是一个持续的过程。有了监控数据，你才能知道优化的效果，才能发现回退，才能对性能有真正的掌控力。

“You can’t improve what you can’t measure.” —— 这句话在前端性能领域尤其适用。

音乐

音乐