推论 1：任何「让搬运工多干活」的优化，收益都有限；
推论 2：任何「把活挪到别的线程」的优化，收益上限很高；
推论 3：任何「减少总工作量」的优化，收益最稳。

11 性能优化
  ├─ 前置：05 浏览器（渲染管线）、08 渲染架构、10 网络缓存
  ├─ 紧接：18 可观测性（RUM 与告警）
  ├─ 交叉：02 CSS（布局与合成）、06 框架（重渲染）
  └─ 长期：17 架构（性能治理体系）

LCP：等得久不久   ← 加载体验
INP：点了有没有反应 ← 交互体验
CLS：页面稳不稳   ← 视觉稳定性

输入延迟（input delay）：事件发生 → 事件回调开始执行
处理时间（processing）：事件回调执行 + 框架更新
呈现延迟（presentation）：更新完成 → 下一帧真正绘制

单次偏移分数 = 影响比例 × 距离比例
影响比例：偏移元素占视口面积的比例
距离比例：偏移距离占视口高度的比例
CLS = 所有「非用户输入导致」的偏移分数之和（按会话窗口取最大）

/**
 * TBT 的计算口径：所有长任务超出 50ms 的部分求和。
 * @param {PerformanceEntry[]} longTasks longtask 观测结果
 * @returns {number} 毫秒
 */
function calculateTBT(longTasks) {
  return longTasks.reduce((sum, task) => sum + Math.max(0, task.duration - 50), 0);
}

TTFB ─► FCP ─► LCP ─► 可交互
  │      │      │
  │      │      └─ 受图片/字体/主线程影响
  │      └──────── 受 CSS/字体/JS 阻塞影响
  └─────────────── 受服务端/网络/CDN 影响

// 控制台快速查看本次访问的 LCP 候选
performance.getEntriesByType('largest-contentful-paint').forEach((e) => {
  console.log(e.startTime, e.element, e.url, e.size);
});

# 桌面预设
npx lighthouse https://example.com --view --preset=desktop

# 移动端（默认，模拟 4x CPU 降速 + 慢 4G）
npx lighthouse https://example.com --view --throttling-method=simulate

读火焰图的顺序：
找最宽的 Task → 展开看子任务 → 找 Self Time 最大的函数
→ 看它属于「脚本 / 样式 / 布局 / 绘制 / GC」哪一类

按页面类型：列表 / 详情 / 表单 / 支付
按设备：低端 Android / 中端 / iOS
按网络：4G / 5G / WiFi / 弱网
按版本：v1.2.3 / v1.2.4
按地域：华北 / 华南 / 海外

1. RUM 发现异常：某页面 LCP P75 从 2.1s 涨到 3.4s
2. 分桶定位：只有低端 Android + 4G 明显恶化
3. Lab 复现：Performance 录制同样的设备/网络条件
4. 找到原因：新增的第三方脚本阻塞了主线程 400ms
5. 修复后灰度：对比新版本与旧版本的 P75
6. 固化：把该脚本的加载策略写进规范/门禁

<picture>
  <source type="image/avif" srcset="hero-800.avif 800w, hero-1600.avif 1600w" sizes="100vw" />
  <source type="image/webp" srcset="hero-800.webp 800w, hero-1600.webp 1600w" sizes="100vw" />
  <img src="hero-800.jpg" width="1600" height="900" alt="首页主视觉" fetchpriority="high" />
</picture>

<img
  src="card-400.webp"
  srcset="card-400.webp 400w, card-800.webp 800w, card-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 400px"
  width="400"
  height="300"
  alt="商品图"
  loading="lazy"
  decoding="async"
/>

实际需要宽度 = sizes 计算值 × devicePixelRatio

<!-- 首屏主图：早发现 + 高优先级 -->
<link rel="preload" as="image" href="/hero-1200.webp" imagesrcset="/hero-800.webp 800w, /hero-1200.webp 1200w" imagesizes="100vw" />

/* 现代写法：用 aspect-ratio 预留空间，图片加载后不跳动 */
.thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #f2f2f2; /* 占位色，避免空白 */
}

<!-- 传统写法：width/height 属性让浏览器提前算出比例 -->
<img src="a.webp" width="800" height="600" alt="" />

// 列出页面中实际下载的图片及其尺寸、传输大小、解码耗时
performance.getEntriesByType('resource')
  .filter((e) => e.initiatorType === 'img')
  .map((e) => ({ url: e.name, transfer: e.transferSize, duration: e.duration }))
  .sort((a, b) => b.transfer - a.transfer);

浏览器解析 CSS → 发现 @font-face → 下载字体
  ├─ 未设置 font-display：文字最多「空白」约 3s（block period）
  └─ 设置 swap：立刻用系统字体渲染，字体到达后替换

@font-face {
  font-family: 'Brand';
  src: url('/fonts/brand.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+4E00-9FFF; /* 只声明中文字符范围 */
}

# 用 fonttools 按页面实际用到的字符做子集
pyftsubset brand.ttf \
  --text-file=used-chars.txt \
  --flavor=woff2 \
  --output-file=brand-subset.woff2

/* 分段加载：不同 unicode-range 可以并行下载，缺字自动回退 */
@font-face {
  font-family: 'Brand';
  src: url('/fonts/brand-cjk-basic.woff2') format('woff2');
  unicode-range: U+4E00-9FFF, U+3000-303F;
  font-display: swap;
}

<link
  rel="preload"
  href="/fonts/brand-subset.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

/* 让后备字体的行高与自定义字体接近，减少切换抖动 */
@font-face {
  font-family: 'Brand Fallback';
  src: local('PingFang SC');
  size-adjust: 96%;
  ascent-override: 88%;
  descent-override: 12%;
}

<!-- 1) 阻塞：立即下载并执行 -->
<script src="/critical.js"></script>

<!-- 2) defer：不阻塞解析，DOM 解析完后按顺序执行 -->
<script defer src="/app.js"></script>

<!-- 3) async：下载完立即执行，顺序不保证 -->
<script async src="/analytics.js"></script>

<!-- 4) module：默认 defer，支持 import -->
<script type="module" src="/main.js"></script>

<link rel="preconnect" href="https://cdn.example.com" crossorigin />
<link rel="dns-prefetch" href="https://analytics.example.com" />
<link rel="preload" href="/app.css" as="style" />
<link rel="prefetch" href="/next-page.js" />

HTML 解析
  → 发现 CSS（Highest）
  → 发现字体（High，preload 后）
  → 发现首屏图（High，fetchpriority 后）
  → 发现 async 脚本（Low）
  → 发现首屏以下的图（Low，lazy）

/**
 * 第三方脚本降级：超时未加载就跳过，不阻塞业务。
 * @param {string} src 脚本地址
 * @param {number} timeout 超时毫秒
 */
function loadScriptWithTimeout(src, timeout = 3000) {
  return new Promise((resolve) => {
    const el = document.createElement('script');
    let settled = false;

    const done = (ok) => {
      if (settled) return;
      settled = true;
      resolve(ok);
    };

    el.src = src;
    el.async = true;
    el.onload = () => done(true);
    el.onerror = () => done(false);
    setTimeout(() => done(false), timeout);
    document.head.appendChild(el);
  });
}

/**
 * 骨架屏不改变真实指标，但显著改善「感知等待」。
 * 关键：结构与最终内容一致，避免切换时跳动（CLS）。
 */
export function CardSkeleton() {
  return (
    <div className="card" aria-busy="true" aria-live="polite">
      <div className="skeleton skeleton--title" />
      <div className="skeleton skeleton--line" />
      <div className="skeleton skeleton--line skeleton--short" />
    </div>
  );
}

一帧（60Hz）= 16.7ms
├─ 输入处理（事件回调）        ≤ 4ms
├─ JS 执行（状态更新、渲染）   ≤ 8ms
├─ 样式计算 + 布局             ≤ 3ms
├─ 绘制 + 合成                 ≤ 2ms
└─ 缓冲                        ≈ 2ms

用户点击
  → 浏览器合成线程接收输入
  → 主线程派发事件（pointerdown → mousedown → click）
  → 事件处理（你的 JS）
  → 状态更新 → 框架调度 → 重渲染（JS）
  → 样式计算（Recalculate Style）
  → 布局（Layout）
  → 绘制（Paint，生成绘制指令）
  → 分层与合成（Composite）
  → GPU 上屏

形态 A：单次长任务
  ▁▁▁▁▁████████████▁▁▁▁     ← 一次 300ms 的 JS，直接丢 18 帧
  修法：拆分任务 / 移 Worker

形态 B：每帧都超预算
  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓        ← 每秒都在 20ms，持续掉帧
  修法：减少每帧工作量（虚拟化、简化样式）

形态 C：偶发 GC
  ▁▁▁▁▁▁▁▁▁██▁▁▁▁▁▁▁▁▁▁     ← 内存分配过多，GC 停顿
  修法：减少临时对象、对象池、避免大数组频繁重建

DOM 树 + CSSOM 树
      ↓ 合并
   渲染树（Render Tree）
      ↓ 计算每个盒子的位置与大小
   布局（Layout / Reflow）
      ↓ 生成绘制指令
   绘制（Paint）
      ↓ 分图层、光栅化、合成
   合成（Composite） → 屏幕

// ❌ 读-写-读-写交替：每次写之后的读都强制重新布局
for (const el of items) {
  el.style.width = `${el.offsetWidth + 10}px`; // 写 → 读 → 写 → 读
}

// ✅ 先批量读，再批量写
const widths = items.map((el) => el.offsetWidth);
items.forEach((el, i) => {
  el.style.width = `${widths[i] + 10}px`;
});

offsetTop / offsetLeft / offsetWidth / offsetHeight
scrollTop / scrollLeft / scrollWidth / scrollHeight
clientTop / clientLeft / clientWidth / clientHeight
getComputedStyle()
getBoundingClientRect()
range.getBoundingClientRect()
element.focus()（可能触发滚动与布局）

/* 提升为独立合成层：动画由合成线程驱动 */
.animated {
  will-change: transform;
  transform: translateZ(0);
}

/**
 * 只在交互期间提升图层，结束后释放。
 * @param el 目标元素
 */
function boostLayerDuringInteraction(el) {
  el.style.willChange = 'transform';
  const done = () => {
    el.style.willChange = 'auto';
    el.removeEventListener('transitionend', done);
  };
  el.addEventListener('transitionend', done);
}

长任务（Long Task）：主线程连续占用 > 50ms 的任务
  → 期间无法处理输入、无法渲染新帧
  → 用户感受：点了没反应、滚动卡住、输入延迟

/**
 * 采集长任务，并尽量定位到来源脚本。
 * attribution 在部分浏览器不可用，需要做空值保护。
 */
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const source = entry.attribution?.[0];
    report('long-task', {
      duration: entry.duration,
      start: entry.startTime,
      container: source?.containerType,
      src: source?.containerSrc,
      name: source?.containerName,
    });
  }
}).observe({ type: 'longtask', buffered: true });

/**
 * LoAF：更细的长帧归因，能看到脚本、样式、布局各占多少。
 * Chrome 123+ 可用，其他浏览器降级为 longtask。
 */
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    report('loaf', {
      duration: entry.duration,
      blocking: entry.blockingDuration,
      scripts: entry.scripts?.map((s) => ({
        src: s.sourceURL,
        duration: s.duration,
        invoker: s.invoker,
      })),
      styleAndLayout: entry.styleAndLayoutStart
        ? entry.startTime + entry.duration - entry.styleAndLayoutStart
        : 0,
    });
  }
}).observe({ type: 'long-animation-frame', buffered: true });

/**
 * 1) 主动让出主线程：把大循环切成小块，每块之后让出。
 * 优先用 scheduler.yield（Chrome 129+），否则退化为宏任务。
 */
async function yieldToMain() {
  if (globalThis.scheduler?.yield) return globalThis.scheduler.yield();
  return new Promise((resolve) => setTimeout(resolve, 0));
}

/**
 * 分批处理：每批处理完都让出，保证输入有机会被响应。
 * @param items 待处理数据
 * @param batchSize 每批数量
 * @param work 单条处理函数
 */
async function processInChunks(items, batchSize, work) {
  for (let i = 0; i < items.length; i += batchSize) {
    const batch = items.slice(i, i + batchSize);
    for (const item of batch) work(item);
    await yieldToMain();
  }
}

/**
 * 2) 空闲时执行：适合「不急但要做」的预计算。
 * 注意 timeRemaining 要给下一帧留余量，不要贪心。
 */
function runWhenIdle(queue) {
  const schedule = window.requestIdleCallback ?? ((cb) => setTimeout(() => cb({ timeRemaining: () => 8 }), 16));

  const step = (deadline) => {
    while (deadline.timeRemaining() > 4 && queue.length) {
      const task = queue.shift();
      task();
    }
    if (queue.length) schedule(step);
  };

  schedule(step);
}

/**
 * 3) 移到 Worker：适合纯计算（解析、加密、图像处理）。
 * 注意结构化克隆的成本，大数据优先用 Transferable。
 */
const worker = new Worker(new URL('./heavy.worker.js', import.meta.url), { type: 'module' });

worker.postMessage({ buffer }, [buffer]); // 第二个参数转移所有权，零拷贝
worker.onmessage = (e) => updateUI(e.data);

/**
 * 4) 不渲染那么多：虚拟化、分页、折叠。
 * 这是唯一能「消除」而不是「分摊」成本的手段。
 */

外层容器（固定高度，overflow: auto）
└─ 占位层（高度 = 总条数 × 行高）  ← 撑开滚动条
   └─ 可见区（绝对定位，只渲染 start ~ end）

startIndex = floor(scrollTop / itemHeight) - overscan
visibleCount = ceil(containerHeight / itemHeight) + overscan * 2
endIndex = min(total, startIndex + visibleCount)
offsetY = startIndex * itemHeight

import { useCallback, useMemo, useRef, useState } from 'react';

interface VirtualListProps<T> {
  items: T[];
  itemHeight: number;
  height: number;
  overscan?: number;
  renderItem: (item: T, index: number) => React.ReactNode;
}

/**
 * 定高虚拟列表：只渲染可视区 + 缓冲区。
 * 关键点：滚动状态用 rAF 合并，避免每个 scroll 事件都触发渲染。
 */
export function VirtualList<T>({
  items,
  itemHeight,
  height,
  overscan = 4,
  renderItem,
}: VirtualListProps<T>) {
  const [scrollTop, setScrollTop] = useState(0);
  const ticking = useRef(false);

  const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
    const next = e.currentTarget.scrollTop;
    if (ticking.current) return;
    ticking.current = true;
    requestAnimationFrame(() => {
      setScrollTop(next);
      ticking.current = false;
    });
  }, []);

  const { start, end, offsetY } = useMemo(() => {
    const first = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
    const count = Math.ceil(height / itemHeight) + overscan * 2;
    return {
      start: first,
      end: Math.min(items.length, first + count),
      offsetY: first * itemHeight,
    };
  }, [scrollTop, itemHeight, height, overscan, items.length]);

  return (
    <div style={{ height, overflowY: 'auto' }} onScroll={handleScroll}>
      <div style={{ height: items.length * itemHeight, position: 'relative' }}>
        <div style={{ transform: `translateY(${offsetY}px)` }}>
          {items.slice(start, end).map((item, i) => (
            <div key={start + i} style={{ height: itemHeight }}>
              {renderItem(item, start + i)}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/**
 * 不定高列表的核心：维护每项高度与累计偏移，用二分查找定位起始项。
 */
export class HeightCache {
  private heights: number[] = [];
  private offsets: number[] = [0];

  /** 记录某项高度，返回是否发生变化 */
  set(index: number, height: number): boolean {
    if (this.heights[index] === height) return false;
    this.heights[index] = height;
    this.rebuild();
    return true;
  }

  /** 重建累计偏移（条目多时可用 Fenwick 树优化） */
  private rebuild(): void {
    this.offsets = [0];
    for (let i = 0; i < this.heights.length; i += 1) {
      this.offsets[i + 1] = this.offsets[i] + (this.heights[i] ?? 0);
    }
  }

  /** 二分查找：给定滚动位置，返回对应索引 */
  indexAt(scrollTop: number): number {
    let lo = 0;
    let hi = this.offsets.length - 1;
    while (lo < hi) {
      const mid = (lo + hi) >> 1;
      if (this.offsets[mid] < scrollTop) lo = mid + 1;
      else hi = mid;
    }
    return Math.max(0, lo - 1);
  }

  offsetOf(index: number): number {
    return this.offsets[index] ?? 0;
  }
}

/**
 * 用 rAF 合并到一帧：滚动/拖拽/缩放等每帧最多算一次。
 * 比 setTimeout 节流更贴近渲染节奏。
 */
function createFrameThrottle(fn) {
  let ticking = false;
  let lastArgs;

  return (...args) => {
    lastArgs = args;
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(() => {
      fn(...lastArgs);
      ticking = false;
    });
  };
}

const onScroll = createFrameThrottle(() => {
  // 读取位置并更新
});

window.addEventListener('scroll', onScroll, { passive: true });

import { memo, useCallback, useMemo, useState } from 'react';

interface RowProps {
  item: { id: string; label: string };
  onSelect: (id: string) => void;
}

/** memo 只做浅比较：props 引用变了就会重渲染 */
const Row = memo(function Row({ item, onSelect }: RowProps) {
  return <button onClick={() => onSelect(item.id)}>{item.label}</button>;
});

export function Table({ items }: { items: RowProps['item'][] }) {
  const [selected, setSelected] = useState<string | null>(null);

  // ✅ 稳定引用：依赖为空，函数只创建一次
  const handleSelect = useCallback((id: string) => setSelected(id), []);

  // ✅ 只在 items 变化时重新计算
  const sorted = useMemo(() => [...items].sort((a, b) => a.label.localeCompare(b.label)), [items]);

  return (
    <div>
      {sorted.map((item) => (
        <Row key={item.id} item={item} onSelect={handleSelect} />
      ))}
      <p>已选：{selected}</p>
    </div>
  );
}

// ❌ 输入框的每次按键都让整个列表重渲染
function Page() {
  const [keyword, setKeyword] = useState('');
  return (
    <>
      <input value={keyword} onChange={(e) => setKeyword(e.target.value)} />
      <ExpensiveList />
    </>
  );
}

// ✅ 状态下移：把 state 放进只依赖它的子组件
function SearchBox() {
  const [keyword, setKeyword] = useState('');
  return <input value={keyword} onChange={(e) => setKeyword(e.target.value)} />;
}

function Page() {
  return (
    <>
      <SearchBox />
      <ExpensiveList />
    </>
  );
}

// ✅ 细粒度订阅：只有用到的字段变化才重渲染
import { useSyncExternalStore } from 'react';

function useStoreSelector<T>(store, selector: (s: any) => T): T {
  return useSyncExternalStore(
    store.subscribe,
    () => selector(store.getState()),
    () => selector(store.getInitialState?.() ?? store.getState())
  );
}

import { Profiler } from 'react';

/**
 * 记录每次提交的耗时与原因，只在开发/预发开启。
 * 生产环境可用 Performance API 采样。
 */
<Profiler
  id="OrderTable"
  onRender={(id, phase, actualDuration, baseDuration) => {
    if (actualDuration > 16) {
      console.warn('[perf]', id, phase, { actualDuration, baseDuration });
    }
  }}
>
  <OrderTable />
</Profiler>

<!-- 首屏关键样式内联，其余异步加载 -->
<style>
  /* 只放首屏可见区域的样式：布局骨架、字体、首屏组件 */
  .header { height: 56px; }
  .hero { aspect-ratio: 16 / 9; }
</style>
<link rel="stylesheet" href="/app.css" media="print" onload="this.media='all'" />
<noscript><link rel="stylesheet" href="/app.css" /></noscript>

{
  "budgets": [
    { "resourceType": "script", "budget": 200 },
    { "resourceType": "image", "budget": 500 },
    { "resourceType": "total", "budget": 1000 }
  ]
}

# size-limit：把体积写进 CI，超出直接失败
npx size-limit

// .size-limit.js
module.exports = [
  { name: '首屏入口', path: 'dist/assets/index-*.js', limit: '200 kB' },
  { name: '样式', path: 'dist/assets/index-*.css', limit: '60 kB' },
];

1. 测当前 P75 作为基线
2. 目标 = 基线 × 0.8（先争取 20% 改善）
3. 参考竞品与设备能力
4. 每季度复核，随业务调整

/**
 * LCP 采集：只在页面隐藏前上报，避免上报到中间值。
 * 注意：LCP 在首次输入后会停止更新，所以要在交互前完成采集。
 */
let lcpValue = 0;
let lcpElement = null;

new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const last = entries[entries.length - 1];
  lcpValue = last.startTime;
  lcpElement = last.element ?? null;
}).observe({ type: 'largest-contentful-paint', buffered: true });

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden' && lcpValue) {
    report('LCP', { value: lcpValue, tag: lcpElement?.tagName, url: lcpElement?.currentSrc });
  }
});

/**
 * 简化版 INP 采集：记录每次交互的耗时，取高分位。
 * 真实实现要考虑：同一交互的多个事件合并、键盘/指针分类、忽略滚动。
 */
const interactions = [];

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration < 40) continue; // 低于阈值的不影响 INP
    interactions.push(entry.duration);
  }
}).observe({ type: 'event', buffered: true, durationThreshold: 40 });

/**
 * 取 P98 近似「最差交互」，与官方口径接近。
 * @returns {number} 毫秒
 */
function getWorstInteraction() {
  if (!interactions.length) return 0;
  const sorted = [...interactions].sort((a, b) => a - b);
  return sorted[Math.floor(sorted.length * 0.98)] ?? sorted[sorted.length - 1];
}

/**
 * CLS 会话窗口：把间隔 < 1s 的偏移聚成一组，组最长 5s，
 * 取所有组里分数最大的一组作为 CLS。
 */
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.hadRecentInput) continue; // 用户操作导致的偏移不计入
    report('layout-shift', {
      value: entry.value,
      sources: entry.sources?.map((s) => ({
        tag: s.node?.nodeName,
        previousRect: s.previousRect,
        currentRect: s.currentRect,
      })),
    });
  }
}).observe({ type: 'layout-shift', buffered: true });

主线程
├─ Task (320ms)                 ← 一个长任务
│  ├─ Function Call (120ms)     ← 你的业务逻辑
│  │  ├─ parseData (80ms)
│  │  └─ setState (40ms)
│  ├─ Recalculate Style (40ms)
│  ├─ Layout (80ms)
│  ├─ Paint (60ms)
│  └─ GC (20ms)
└─ Task (16ms)

/**
 * 兼容的让出：优先 scheduler.yield，其次 postTask，最后 MessageChannel。
 * @returns {Promise<void>}
 */
function yieldToMainCompat() {
  if (globalThis.scheduler?.yield) return globalThis.scheduler.yield();
  if (globalThis.scheduler?.postTask) {
    return globalThis.scheduler.postTask(() => {}, { priority: 'user-visible' });
  }
  return new Promise((resolve) => {
    const channel = new MessageChannel();
    channel.port1.onmessage = () => resolve();
    channel.port2.postMessage(null);
  });
}

用户输入相关 → 最高优先级，立即处理，不做重计算
视觉更新   → 在下一帧前完成（rAF）
数据上报   → 后台优先级（background）
预计算     → 空闲时（idle）

/**
 * 用 AbortController 统一清理监听，避免遗漏。
 * 组件卸载、路由切换时调用 abort 即可。
 */
const controller = new AbortController();
window.addEventListener('resize', onResize, { signal: controller.signal });
window.addEventListener('scroll', onScroll, { signal: controller.signal, passive: true });

// 清理
controller.abort();

1. 看趋势：Performance Monitor（或 RUM 内存指标）
   反复进出同一页面，内存应回到基线；持续上升即泄漏

2. 抓快照：Memory 面板 → Heap snapshot
   操作前拍一次、操作后拍一次、再操作后拍一次
   对比三次的「对象数增长」

3. 找引用链：选增长的对象 → Retainers
   看是谁持有它（闭包、事件监听、全局 Map、Detached DOM）

TTFB（服务端渲染）
  + HTML 传输
  + JS 下载（可能很大）
  + 水合（组件树执行 + 事件绑定）
  = 可交互时间

传输成本：字节数（格式、压缩、尺寸）
解码成本：像素数（宽 × 高 × 4 字节）
绘制成本：绘制区域与效果（滤镜、阴影、透明度）

/* 屏外内容延迟渲染：长列表/长文的首屏提速利器 */
.section {
  content-visibility: auto;
  contain-intrinsic-size: 600px; /* 占位，避免滚动条跳动 */
}

<!-- 首屏：eager + 高优先级 -->
<img src="hero.webp" fetchpriority="high" width="1200" height="600" alt="" />

<!-- 首屏以下：lazy + 异步解码 -->
<img src="card.webp" loading="lazy" decoding="async" width="400" height="300" alt="" />

<!-- 轮播第二张之后：lazy，但第一张要 eager -->

Step 1 确认指标异常
  LCP P75 4.2s（基线 2.3s），持续 3 天

Step 2 分维度下钻
  页面类型 / 机型 / 网络 / 地域 / 版本 / 是否首访

Step 3 找长尾
  是整体退化，还是某 10% 用户特别慢

Step 4 定位阶段
  TTFB？资源发现？资源下载？渲染阻塞？水合？

Step 5 Lab 复现
  模拟同样的设备与网络，录制 Performance

Step 6 假设 → 实验 → 验证
  改一个变量，灰度对比，确认因果

现象：LCP P75 从 2.1s 涨到 3.6s，全站
分桶：仅 Android WebView + 4G 明显，iOS 无变化
Lab 复现：WebView 中新增的 JS SDK 执行 620ms
根因：SDK 在 DOMContentLoaded 时同步初始化，阻塞首屏
修复：延迟到 idle 初始化 + 超时降级
结果：LCP 回到 2.2s，INP 改善 80ms

采集层：PerformanceObserver（LCP/INP/CLS/LoAF/长任务）+ 自定义埋点
   ↓ 采样、脱敏、补充上下文（页面、版本、机型、网络）
传输层：sendBeacon / fetch keepalive（页面卸载也能发）
   ↓
存储层：按 session 聚合，保留分位数与分布（不能只存均值）
   ↓
分析层：页面 × 版本 × 机型 × 网络 × 地域 多维下钻
   ↓
告警层：P75 超阈值 / 周同比劣化 → 通知页面 owner

/**
 * 一次访问的指标容器：页面隐藏时统一上报。
 * 关键：LCP 在首次输入后会停止更新，所以要在交互前读走。
 */
const metrics = {
  lcp: 0,
  cls: 0,
  inp: [],
  longTasks: 0,
  ttfb: 0,
  page: location.pathname,
  version: window.__APP_VERSION__,
};

new PerformanceObserver((list) => {
  const last = list.getEntries().at(-1);
  if (last) metrics.lcp = last.startTime;
}).observe({ type: 'largest-contentful-paint', buffered: true });

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) metrics.cls += entry.value;
  }
}).observe({ type: 'layout-shift', buffered: true });

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration >= 40) metrics.inp.push(entry.duration);
  }
}).observe({ type: 'event', buffered: true, durationThreshold: 40 });

new PerformanceObserver((list) => {
  metrics.longTasks += list.getEntries().length;
}).observe({ type: 'longtask', buffered: true });

/**
 * 上报：sendBeacon 在卸载时也不会被取消。
 * 数据量要控制，避免超过浏览器队列上限。
 */
function flush() {
  const nav = performance.getEntriesByType('navigation')[0];
  metrics.ttfb = nav?.responseStart ?? 0;
  const payload = JSON.stringify({
    ...metrics,
    inp: metrics.inp.sort((a, b) => a - b)[Math.floor(metrics.inp.length * 0.98)] ?? 0,
  });
  navigator.sendBeacon('/rum/perf', new Blob([payload], { type: 'application/json' }));
}

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') flush();
});

日上报量 = DAU × 人均 PV × 采样率 × 单条体积

/**
 * 性能分桶：按 LCP 把用户分成快/慢两组，比较业务指标。
 * 注意混杂：慢用户可能本来设备就差、转化就低，
 * 所以只能作为线索，不能直接当因果。
 */
function bucketByLCP(lcp) {
  if (lcp <= 2500) return 'fast';
  if (lcp <= 4000) return 'medium';
  return 'slow';
}

示例（假设，需用自己的数据校准）：
  日活 100 万，下单转化 3%，客单价 100 元
  LCP 从 3.5s 降到 2.0s，实验显示转化率 +0.15 个百分点

  日增订单 = 100 万 × 0.15% = 1500 单
  日增 GMV = 1500 × 100 = 15 万元
  年化    ≈ 5475 万元

  投入：2 人 × 1 季度 ≈ 60 人天

页面级：每个页面有 owner（团队），LCP/INP/CLS 进该团队的看板
发布级：每次发布自动生成「性能对比卡」，劣化需要说明
需求级：DoD 增加「无性能回退」一项
季度级：Top 10 劣化页面进入专项，有明确目标与截止时间

1. 首屏 JS 体积超预算 → CI 失败（不允许「先合再优化」）
2. 新增第三方脚本必须走评审（列出体积、执行时机、降级方案）
3. 图片必须走 CDN 与 srcset（禁止直接引用设计稿原图）

P75 达标 ≠ 体验好。
P99 用户可能是低端机 + 弱网 + 老版本，占比小但流失率高。

/**
 * 能力与网络探测：用于决定是否降级，不要用于「判断用户好坏」。
 * 这些 API 并非所有浏览器都支持，缺失时按「不降级」处理。
 */
export function getRuntimeProfile() {
  const conn = navigator.connection;
  const memory = navigator.deviceMemory;
  const cores = navigator.hardwareConcurrency;

  return {
    slowNetwork: ['slow-2g', '2g', '3g'].includes(conn?.effectiveType ?? ''),
    lowMemory: typeof memory === 'number' && memory <= 2,
    lowCPU: typeof cores === 'number' && cores <= 4,
  };
}

<!-- 关键改动：让浏览器在解析 HTML 时就发现首屏图 -->
<link
  rel="preload"
  as="image"
  href="/hero-1200.avif"
  imagesrcset="/hero-800.avif 800w, /hero-1200.avif 1200w"
  imagesizes="100vw"
  fetchpriority="high"
/>

/**
 * 推荐位延后：不参与首屏关键路径，避免抢占主线程。
 * 用 Suspense 边界包裹，加载失败不影响主内容。
 */
const Recommendation = lazy(() => import('./Recommendation'));

export function DetailPage() {
  return (
    <main>
      <Hero />
      <Article />
      <Suspense fallback={<RecommendationSkeleton />}>
        <Recommendation />
      </Suspense>
    </main>
  );
}

# CI 配置：体积与指标双门禁
- name: 首屏体积预算
  run: npx size-limit

- name: Lighthouse 预算
  run: npx lhci autorun --config=.lighthouserc.json

{
  "ci": {
    "assert": {
      "assertions": {
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
        "total-byte-weight": ["warn", { "maxNumericValue": 1000000 }]
      }
    }
  }
}

/**
 * 采集 LCP / CLS / INP 并在页面隐藏时上报。
 * 说明：这是教学实现，生产建议直接用 web-vitals 库（处理了大量边界）。
 * @param {(data: object) => void} onReport 上报回调
 * @returns {() => object} 返回「立即读取当前值」的函数，便于测试
 */
export function createVitalsCollector(onReport) {
  const state = {
    lcp: 0,
    lcpElement: null,
    cls: 0,
    clsWindow: { value: 0, start: 0, last: 0 },
    interactions: [],
    reported: false,
  };

  /** CLS 会话窗口：间隔 < 1s 的偏移并入同组，组最长 5s，取最大值 */
  const addShift = (entry) => {
    if (entry.hadRecentInput) return;
    const w = state.clsWindow;
    const gap = entry.startTime - w.last;
    const inWindow = w.start && gap < 1000 && entry.startTime - w.start < 5000;

    if (inWindow) {
      w.value += entry.value;
      w.last = entry.startTime;
    } else {
      w.value = entry.value;
      w.start = entry.startTime;
      w.last = entry.startTime;
    }
    state.cls = Math.max(state.cls, w.value);
  };

  const observers = [];

  const observe = (type, cb, options = {}) => {
    try {
      const po = new PerformanceObserver((list) => cb(list.getEntries()));
      po.observe({ type, buffered: true, ...options });
      observers.push(po);
    } catch {
      // 浏览器不支持该 entry 类型，忽略
    }
  };

  observe('largest-contentful-paint', (entries) => {
    const last = entries.at(-1);
    if (last) {
      state.lcp = last.startTime;
      state.lcpElement = last.element ?? null;
    }
  });

  observe('layout-shift', (entries) => entries.forEach(addShift));

  observe(
    'event',
    (entries) => {
      for (const e of entries) {
        if (e.duration >= 40) state.interactions.push(e.duration);
      }
    },
    { durationThreshold: 40 }
  );

  /** 读取当前指标：INP 取 P98 近似 */
  const read = () => {
    const sorted = [...state.interactions].sort((a, b) => a - b);
    const inp = sorted.length ? sorted[Math.floor(sorted.length * 0.98)] : 0;
    return {
      lcp: Math.round(state.lcp),
      cls: Number(state.cls.toFixed(3)),
      inp: Math.round(inp),
      lcpTag: state.lcpElement?.tagName ?? null,
    };
  };

  const flush = () => {
    if (state.reported) return;
    state.reported = true;
    onReport({ ...read(), page: location.pathname });
    observers.forEach((o) => o.disconnect());
  };

  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') flush();
  });

  return read;
}

/**
 * 分片执行任务队列：每片不超过 timeSlice 毫秒，片间让出主线程。
 * 支持 cancel，适合大列表预处理、导入解析等场景。
 * @param {Array<() => void>} tasks 任务列表
 * @param {{ timeSlice?: number, onProgress?: (done: number, total: number) => void }} [options]
 */
export function createChunkedRunner(tasks, { timeSlice = 8, onProgress } = {}) {
  let cursor = 0;
  let cancelled = false;

  /**
   * 让出主线程：优先 scheduler.yield，其次 MessageChannel。
   * 不用 setTimeout，避免嵌套 4ms 延迟叠加。
   */
  const yieldToMain = () => {
    if (globalThis.scheduler?.yield) return globalThis.scheduler.yield();
    return new Promise((resolve) => {
      const channel = new MessageChannel();
      channel.port1.onmessage = () => resolve();
      channel.port2.postMessage(null);
    });
  };

  /** 启动执行，返回 Promise 以便等待完成 */
  const run = async () => {
    let sliceStart = performance.now();

    while (cursor < tasks.length) {
      if (cancelled) return { cancelled: true, done: cursor };
      tasks[cursor]();
      cursor += 1;

      if (performance.now() - sliceStart >= timeSlice) {
        onProgress?.(cursor, tasks.length);
        await yieldToMain();
        sliceStart = performance.now();
      }
    }

    onProgress?.(cursor, tasks.length);
    return { cancelled: false, done: cursor };
  };

  return {
    run,
    cancel() {
      cancelled = true;
    },
  };
}

#!/usr/bin/env node
/**
 * 简易体积预算：扫描 dist，按类型汇总 gzip 体积，超阈值退出码 1。
 * 用法：node scripts/check-budget.mjs
 */
import { readdir, readFile } from 'node:fs/promises';
import { gzipSync } from 'node:zlib';
import path from 'node:path';

const DIST = 'dist/assets';
const BUDGET = { js: 200 * 1024, css: 60 * 1024, img: 500 * 1024 };

/** 递归列出文件 */
async function walk(dir) {
  const entries = await readdir(dir, { withFileTypes: true });
  const files = [];
  for (const entry of entries) {
    const full = path.join(dir, entry.name);
    if (entry.isDirectory()) files.push(...(await walk(full)));
    else files.push(full);
  }
  return files;
}

const files = await walk(DIST);
const totals = { js: 0, css: 0, img: 0 };

for (const file of files) {
  const ext = path.extname(file).slice(1);
  const key = ext === 'js' || ext === 'mjs' ? 'js' : ext === 'css' ? 'css' : ['png', 'jpg', 'webp', 'avif'].includes(ext) ? 'img' : null;
  if (!key) continue;
  const buf = await readFile(file);
  totals[key] += gzipSync(buf).length;
}

let failed = false;
for (const [key, size] of Object.entries(totals)) {
  const limit = BUDGET[key];
  const ok = size <= limit;
  if (!ok) failed = true;
  console.log(`${key}: ${(size / 1024).toFixed(1)}KB / ${(limit / 1024).toFixed(0)}KB ${ok ? 'OK' : 'FAIL'}`);
}

process.exit(failed ? 1 : 0);