1
const worker = new Worker('/search-worker.js');
2

3
searchInput.addEventListener('input', (e) => {
4
  // 不阻塞主线程
5
  worker.postMessage({ type: 'search', query: e.target.value });
6
});
7

8
worker.addEventListener('message', (e) => {
9
  // 拿到结果后再更新 UI
10
  renderResults(e.data.results);
11
});
12

13
// search-worker.js
14
self.addEventListener('message', (e) => {
15
  if (e.data.type === 'search') {
16
    // 在 Worker 线程执行密集计算
17
    const results = heavySearch(e.data.query);
18
    self.postMessage({ type: 'results', results });
19
  }
20
});

1
export interface Metric {
2
  name: 'LCP' | 'INP' | 'CLS' | 'FCP' | 'TTFB' | 'FID';
3
  value: number;
4
  rating: 'good' | 'needs-improvement' | 'poor';
5
  id: string;
6
  navigationType: 'navigate' | 'reload' | 'back-forward' | 'prerender';
7
  entries: PerformanceEntry[];
8
}
9

10
export interface RumConfig {
11
  reportUrl: string;
12
  appId: string;
13
  userId?: string;
14
  sampleRate?: number;       // 采样率 0-1
15
  debug?: boolean;
16
}

1
import type { Metric, RumConfig } from './types';
2

3
class WebVitalsRUM {
4
  private config: Required<RumConfig>;
5
  private metrics = new Map<string, Metric>();
6
  private lcpEntries: PerformanceEntry[] = [];
7
  private clsValue = 0;
8

9
  constructor(config: RumConfig) {
10
    this.config = {
11
      sampleRate: 1.0,
12
      debug: false,
13
      ...config,
14
    };
15

16
    // 采样决策
17
    if (Math.random() > this.config.sampleRate) return;
18

19
    this.init();
20
  }
21

22
  private init() {
23
    this.observeLCP();
24
    this.observeINP();
25
    this.observeCLS();
26
    this.observeFCP();
27
    this.observeTTFB();
28
    this.bindUnload();
29
  }
30

31
  // ============ LCP ============
32
  private observeLCP() {
33
    const observer = new PerformanceObserver((list) => {
34
      const entries = list.getEntries();
35
      // LCP 可能在页面加载过程中被多次更新，保留所有候选
36
      this.lcpEntries = entries;
37

38
      const lastEntry = entries[entries.length - 1];
39
      this.report({
40
        name: 'LCP',
41
        value: lastEntry.startTime,
42
        rating: this.rateLCP(lastEntry.startTime),
43
        id: this.generateId(),
44
        navigationType: this.getNavigationType(),
45
        entries: entries as any,
46
      });
47
    });
48

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

51
    // 页面隐藏时停止观察 LCP
52
    document.addEventListener('visibilitychange', () => {
53
      if (document.visibilityState === 'hidden') {
54
        observer.disconnect();
55
      }
56
    });
57
  }
58

59
  // ============ INP ============
60
  private observeINP() {
61
    let worstINP = 0;
62

63
    const observer = new PerformanceObserver((list) => {
64
      for (const entry of list.getEntries()) {
65
        if (entry.entryType !== 'event') continue;
66
        if ((entry as any).interactionId === 0) continue;  // 过滤掉非交互
67

68
        const duration = entry.duration;
69
        if (duration > worstINP) {
70
          worstINP = duration;
71
          this.report({
72
            name: 'INP',
73
            value: duration,
74
            rating: this.rateINP(duration),
75
            id: this.generateId(),
76
            navigationType: this.getNavigationType(),
77
            entries: [entry],
78
          });
79
        }
80
      }
81
    });
82

83
    // durationThreshold: 16 是浏览器一帧的时间，16ms 内的交互不会被记录
84
    observer.observe({
85
      type: 'event',
86
      buffered: true,
87
      durationThreshold: 16
88
    });
89
  }
90

91
  // ============ CLS ============
92
  private observeCLS() {
93
    const observer = new PerformanceObserver((list) => {
94
      for (const entry of list.getEntries()) {
95
        const layoutShift = entry as any;
96
        // 跳过用户输入后 500ms 内的偏移
97
        if (layoutShift.hadRecentInput) continue;
98

99
        this.clsValue += layoutShift.value;
100

101
        this.report({
102
          name: 'CLS',
103
          value: this.clsValue,
104
          rating: this.rateCLS(this.clsValue),
105
          id: this.generateId(),
106
          navigationType: this.getNavigationType(),
107
          entries: [entry],
108
        });
109
      }
110
    });
111

112
    observer.observe({ type: 'layout-shift', buffered: true });
113
  }
114

115
  // ============ FCP & TTFB ============
116
  private observeFCP() {
117
    const observer = new PerformanceObserver((list) => {
118
      for (const entry of list.getEntriesByName('first-contentful-paint')) {
119
        this.report({
120
          name: 'FCP',
121
          value: entry.startTime,
122
          rating: this.rateFCP(entry.startTime),
123
          id: this.generateId(),
124
          navigationType: this.getNavigationType(),
125
          entries: [entry],
126
        });
127
      }
128
    });
129
    observer.observe({ type: 'paint', buffered: true });
130
  }
131

132
  private observeTTFB() {
133
    const [nav] = performance.getEntriesByType('navigation') as PerformanceNavigationTiming[];
134
    if (nav) {
135
      const ttfb = nav.responseStart - nav.requestStart;
136
      this.report({
137
        name: 'TTFB',
138
        value: ttfb,
139
        rating: this.rateTTFB(ttfb),
140
        id: this.generateId(),
141
        navigationType: this.getNavigationType(),
142
        entries: [nav],
143
      });
144
    }
145
  }
146

147
  // ============ 数据上报 ============
148
  private report(metric: Metric) {
149
    if (this.config.debug) {
150
      console.log(`[WebVitals] ${metric.name}:`, metric.value, metric.rating);
151
    }
152

153
    // 存储最新值
154
    this.metrics.set(metric.name, metric);
155

156
    // 通过 sendBeacon 上报（页面关闭时也能发送）
157
    const body = JSON.stringify({
158
      appId: this.config.appId,
159
      userId: this.config.userId,
160
      url: location.href,
161
      userAgent: navigator.userAgent,
162
      connectionType: (navigator as any).connection?.effectiveType,
163
      timestamp: Date.now(),
164
      metric,
165
    });
166

167
    if ('sendBeacon' in navigator) {
168
      navigator.sendBeacon(this.config.reportUrl, body);
169
    } else {
170
      // Fallback: fetch with keepalive
171
      fetch(this.config.reportUrl, {
172
        method: 'POST',
173
        body,
174
        keepalive: true,
175
      }).catch(() => {});
176
    }
177
  }
178

179
  // 页面关闭时最后一次上报
180
  private bindUnload() {
181
    document.addEventListener('visibilitychange', () => {
182
      if (document.visibilityState === 'hidden') {
183
        // 上报当前所有指标
184
        for (const metric of this.metrics.values()) {
185
          this.report(metric);
186
        }
187
      }
188
    });
189
  }
190

191
  // ============ 评级标准 ============
192
  private rateLCP(value: number): Metric['rating'] {
193
    if (value <= 2500) return 'good';
194
    if (value <= 4000) return 'needs-improvement';
195
    return 'poor';
196
  }
197

198
  private rateINP(value: number): Metric['rating'] {
199
    if (value <= 200) return 'good';
200
    if (value <= 500) return 'needs-improvement';
201
    return 'poor';
202
  }
203

204
  private rateCLS(value: number): Metric['rating'] {
205
    if (value <= 0.1) return 'good';
206
    if (value <= 0.25) return 'needs-improvement';
207
    return 'poor';
208
  }
209

210
  private rateFCP(value: number): Metric['rating'] {
211
    if (value <= 1800) return 'good';
212
    if (value <= 3000) return 'needs-improvement';
213
    return 'poor';
214
  }
215

216
  private rateTTFB(value: number): Metric['rating'] {
217
    if (value <= 800) return 'good';
218
    if (value <= 1800) return 'needs-improvement';
219
    return 'poor';
220
  }
221

222
  private generateId(): string {
223
    return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
224
  }
225

226
  private getNavigationType(): Metric['navigationType'] {
227
    const [nav] = performance.getEntriesByType('navigation') as PerformanceNavigationTiming[];
228
    return (nav?.type as any) || 'navigate';
229
  }
230
}
231

232
// 初始化
233
new WebVitalsRUM({
234
  reportUrl: 'https://analytics.example.com/rum',
235
  appId: 'my-web-app',
236
  userId: 'anonymous',
237
  sampleRate: 0.1,  // 10% 采样
238
  debug: false,
239
});

1
rules:
2
  - name: LCP 退化告警
3
    condition: lcp_p75 > 4000
4
    duration: 5m
5
    severity: critical
6
    notify: [oncall, frontend-team]
7

8
  - name: INP 退化告警
9
    condition: inp_p75 > 500
10
    duration: 10m
11
    severity: warning
12
    notify: [frontend-team]
13

14
  - name: CLS 突变告警
15
    condition: cls_p75 > 0.25
16
    duration: 5m
17
    severity: warning
18
    notify: [frontend-team]