前端性能监控实战：从 Core Web Vitals 到 RUM 的全链路方案

// 最简采集方案 - 使用 web-vitals 库（v4+）
import { onLCP, onINP, onCLS, onTTFB, onFCP } from 'web-vitals';

// 上报函数 - 发送到你的后端采集服务
function sendToAnalytics(metric) {
  const body = JSON.stringify({
    name: metric.name,        // 指标名：LCP/INP/CLS 等
    value: metric.value,      // 数值
    rating: metric.rating,     // good/needs-improvement/poor
    id: metric.id,             // 唯一标识，用于去重
    delta: metric.delta,       // 增量值（CLS 特有）
    page_url: window.location.href,
    page_path: window.location.pathname,
    user_agent: navigator.userAgent,
    // 采样标识，避免全量上报压垮后端
    session_id: getSessionId(),
    timestamp: Date.now(),
  });

  // 用 sendBeacon 而不是 fetch，原因在下面解释
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/rum/collect', body);
  } else {
    fetch('/api/rum/collect', { body, method: 'POST', keepalive: true });
  }
}

// 绑定监听 - 这些回调会在指标最终确定时触发
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
onTTFB(sendToAnalytics);
onFCP(sendToAnalytics);

// 按 session 采样 - 10% 的 session 采集全量指标
function shouldSample() {
  const sampleRate = 0.1; // 10%
  // 用 session 维度采样，同一用户多次访问要么全采要么全不采
  // 避免单用户只采到部分指标，数据割裂
  const sessionId = getSessionId();
  const hash = simpleHash(sessionId);
  return (hash % 100) < (sampleRate * 100);
}

function simpleHash(str) {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    const char = str.charCodeAt(i);
    hash = ((hash << 5) - hash) + char;
    hash = hash & hash;
  }
  return Math.abs(hash);
}

if (shouldSample()) {
  onLCP(sendToAnalytics);
  onINP(sendToAnalytics);
  onCLS(sendToAnalytics);
}

package main

import (
    "encoding/json"
    "log"
    "net/http"
    "time"
    
    "github.com/redis/go-redis/v9"
)

type RumMetric struct {
    Name      string  `json:"name"`
    Value     float64 `json:"value"`
    Rating    string  `json:"rating"`
    ID        string  `json:"id"`
    Delta     float64 `json:"delta"`
    PageURL   string  `json:"page_url"`
    PagePath  string  `json:"page_path"`
    UserAgent string  `json:"user_agent"`
    SessionID string  `json:"session_id"`
    Timestamp int64   `json:"timestamp"`
}

func collectHandler(w http.ResponseWriter, r *http.Request) {
    if r.Method != "POST" {
        http.Error(w, "Method Not Allowed", 405)
        return
    }

    var m RumMetric
    if err := json.NewDecoder(r.Body).Decode(&m); err != nil {
        http.Error(w, "Bad Request", 400)
        return
    }

    // 基础校验 - 挡掉乱七八糟的脏数据
    if m.Name == "" || m.Value <= 0 || m.PagePath == "" {
        http.Error(w, "Invalid metric", 400)
        return
    }

    // 写入 Redis Stream，后端异步消费写时序库
    // 用 Stream 而不是直接写库，防止突发流量打挂数据库
    data, _ := json.Marshal(m)
    err := rdb.XAdd(ctx, &redis.XAddArgs{
        Stream: "rum:metrics",
        Values: map[string]interface{}{
            "data":     string(data),
            "received": time.Now().UnixMilli(),
        },
        MaxLen: 100000, // 防止积压爆内存
    }).Err()
    
    if err != nil {
        log.Printf("redis XAdd failed: %v", err)
        http.Error(w, "Internal Error", 500)
        return
    }

    w.WriteHeader(204)
}

func main() {
    http.HandleFunc("/api/rum/collect", collectHandler)
    log.Println("RUM collector listening on :8080")
    log.Fatal(http.ListenAndServe(":8080", nil))
}

// 把 RUM 数据转成 Prometheus histogram
var (
    lcpHistogram = prometheus.NewHistogram(prometheus.HistogramOpts{
        Name:    "rum_lcp_seconds",
        Help:    "Largest Contentful Paint in seconds",
        Buckets: []float64{0.5, 1.0, 1.5, 2.0, 2.5, 3.0, 4.0, 5.0, 8.0},
    })
    inpHistogram = prometheus.NewHistogram(prometheus.HistogramOpts{
        Name:    "rum_inp_seconds",
        Help:    "Interaction to Next Paint in seconds",
        Buckets: []float64{0.05, 0.1, 0.15, 0.2, 0.3, 0.5, 0.8, 1.0},
    })
    clsHistogram = prometheus.NewHistogram(prometheus.HistogramOpts{
        Name:    "rum_cls_score",
        Help:    "Cumulative Layout Shift score",
        Buckets: []float64{0.01, 0.05, 0.1, 0.15, 0.2, 0.25, 0.5},
    })
)

func recordMetric(m RumMetric) {
    // 用 label 区分页面路径和设备类型
    // 注意 label 基数不要太大，否则 Prometheus 会爆
    switch m.Name {
    case "LCP":
        lcpHistogram.Observe(m.Value / 1000) // ms 转 s
    case "INP":
        inpHistogram.Observe(m.Value / 1000)
    case "CLS":
        clsHistogram.Observe(m.Value)
    }
}

# alertmanager_rules.yml
groups:
  - name: frontend-performance
    rules:
      # LCP P75 超过 4 秒 - 差体验，立即告警
      - alert: FrontendLCPPoor
        expr: |
          histogram_quantile(0.75,
            sum(rate(rum_lcp_seconds_bucket[1h])) by (le, page_group)
          ) > 4.0          
        for: 10m
        labels:
          severity: warning
          team: frontend
        annotations:
          summary: "LCP P75 超过 4 秒: {{ $labels.page_group }}"
          description: "页面 {{ $labels.page_group }} 的 LCP P75 为 {{ $value }}s，已进入差体验区间"

      # INP P75 超过 500ms - 交互卡顿
      - alert: FrontendINPPoor
        expr: |
          histogram_quantile(0.75,
            sum(rate(rum_inp_seconds_bucket[1h])) by (le, page_group)
          ) > 0.5          
        for: 10m
        labels:
          severity: warning
          team: frontend
        annotations:
          summary: "INP P75 超过 500ms: {{ $labels.page_group }}"
          description: "交互响应延迟 P75 为 {{ $value }}s，用户会明显感到卡顿"

      # CLS P75 超过 0.25 - 布局严重抖动
      - alert: FrontendCLSPoor
        expr: |
          histogram_quantile(0.75,
            sum(rate(rum_cls_score_bucket[1h])) by (le, page_group)
          ) > 0.25          
        for: 10m
        labels:
          severity: warning
          team: frontend
        annotations:
          summary: "CLS P75 超过 0.25: {{ $labels.page_group }}"
          description: "布局偏移严重，P75 为 {{ $value }}"

      # 数据量骤降 - 采集可能挂了
      - alert: RUMDataDrop
        expr: |
          sum(rate(rum_lcp_seconds_bucket[5m])) < 
          sum(rate(rum_lcp_seconds_bucket[5m] offset 1d)) * 0.3          
        for: 15m
        labels:
          severity: critical
          team: sre
        annotations:
          summary: "RUM 数据量骤降超过 70%"
          description: "可能是采集脚本异常或上报接口故障"

<!-- 错误做法：LCP 图片用懒加载 -->
<img src="hero.jpg" loading="lazy" alt="首屏主图">
<!-- 懒加载会让首屏图片延迟加载，LCP 直接爆炸 -->

<!-- 正确做法：对 LCP 元素用 preload + eager -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
<img src="hero.webp" width="1080" height="720" fetchpriority="high" alt="首屏主图">

<!-- 图片用现代格式：WebP/AVIF 比 JPEG 小 30-50% -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1080" height="720" alt="首屏主图">
</picture>

// 错误做法：一次性处理大数据
function processAllItems(items) {
  items.forEach(item => {
    // 每个处理耗时 5ms，1000 个就是 5 秒的长任务
    heavyProcess(item);
  });
}

// 正确做法：用 scheduler.yield 或 setTimeout 拆分
async function processAllItems(items) {
  const CHUNK_SIZE = 20; // 每批处理 20 个
  
  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    const chunk = items.slice(i, i + CHUNK_SIZE);
    chunk.forEach(item => heavyProcess(item));
    
    // 让出主线程，让浏览器响应用户交互
    if (typeof scheduler !== 'undefined' && scheduler.yield) {
      // 新 API，Chrome 129+ 支持
      await scheduler.yield();
    } else {
      // 后备方案：用 setTimeout(0) 让出主线程
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

<!-- 错误：没指定 width/height -->
<img src="photo.jpg" alt="照片">
<!-- 浏览器不知道图片多大，加载完后布局重排，CLS 飙升 -->

<!-- 正确：指定尺寸 -->
<img src="photo.jpg" width="800" height="600" alt="照片">

<!-- 更好：用 CSS aspect-ratio，适配响应式 -->
<img src="photo.jpg" style="aspect-ratio: 4/3; width: 100%;" alt="照片">

<!-- 广告位：预留占位空间 -->
<div class="ad-slot" style="min-height: 250px;">
  <!-- 广告加载前就有高度，不会把下方内容挤走 -->
</div>

# 总览面板 - 三大指标 P75 按页面分组
histogram_quantile(0.75, sum(rate(rum_lcp_seconds_bucket[1h])) by (le, page_group))

# 设备维度对比
histogram_quantile(0.75, sum(rate(rum_lcp_seconds_bucket[1h])) by (le, device_type))

# 发版前后对比 - 用 offset 对比昨天同时段
histogram_quantile(0.75, sum(rate(rum_lcp_seconds_bucket[1h])) by (le)) 
- 
histogram_quantile(0.75, sum(rate(rum_lcp_seconds_bucket[1h] offset 1d)) by (le))