浏览器渲染优化

// DOM 树结构示例
// HTML:
// <div class="container">
//   <h1>Title</h1>
//   <p>Paragraph</p>
// </div>

// DOM 树:
// Document
//   └── html
//        ├── head
//        └── body
//             └── div.container
//                  ├── h1
//                  │    └── "Title"
//                  └── p
//                       └── "Paragraph"

// CSSOM 树结构示例
// CSS:
// .container { width: 100%; }
// .container h1 { color: blue; }
// .container p { font-size: 14px; }

// CSSOM 树:
// body
//   └── .container (width: 100%)
//        ├── h1 (color: blue)
//        └── p (font-size: 14px)

// 渲染树 = DOM 树 + CSSOM 树
// 只包含可见元素，visibility: hidden 的元素在渲染树中
// display: none 的元素不在渲染树中

// 触发回流的操作
// 1. 改变窗口大小
window.addEventListener('resize', () => {
  // 触发整个页面的回流
});

// 2. 改变元素尺寸
element.style.width = '200px'; // 触发回流
element.style.height = '100px'; // 触发回流

// 3. 获取布局属性（强制同步布局）
const width = element.offsetWidth; // 触发回流
const height = element.offsetHeight; // 触发回流

// ❌ 避免：读写交替导致布局抖动
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = elements[i].offsetWidth + 10 + 'px';
}

// ✅ 推荐：批量读取，批量写入
const widths = elements.map(el => el.offsetWidth);
elements.forEach((el, i) => {
  el.style.width = widths[i] + 10 + 'px';
});

// 触发重绘的操作
element.style.color = 'red'; // 触发重绘
element.style.backgroundColor = 'blue'; // 触发重绘
element.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)'; // 触发重绘

// 重绘不会触发布局计算，性能开销较小
// 但如果元素在合成层上，重绘可能不会影响其他层

// 创建合成层的方法
// 1. 使用 transform（推荐）
.animated-element {
  transform: translateZ(0); /* 创建合成层 */
  /* 或 */
  transform: translate3d(0, 0, 0);
}

// 2. 使用 will-change（明确提示浏览器）
.animated-element {
  will-change: transform, opacity;
}

// 3. 使用 opacity 动画
.fade-element {
  opacity: 0.5;
  transition: opacity 0.3s;
}

// 4. 使用 CSS 滤镜（部分情况）
.blurred-element {
  filter: blur(5px);
}

// ❌ 避免：过度使用合成层
.every-element {
  transform: translateZ(0); /* 不推荐：消耗过多GPU内存 */
}

// 回流触发场景详解

// 1. 页面首次渲染 - 必然触发回流
document.body.innerHTML = '<div>New Content</div>';

// 2. 浏览器窗口大小改变
window.addEventListener('resize', handleResize);

// 3. 元素尺寸改变
element.style.width = '200px';
element.style.height = '100px';
element.style.padding = '10px';
element.style.margin = '20px';
element.style.border = '1px solid black';

// 4. 元素位置改变
element.style.top = '50px';
element.style.left = '100px';
element.style.transform = 'translate(10px, 20px)'; // 不触发回流（合成层）

// 5. 内容改变
element.textContent = 'New Text';
element.innerHTML = '<span>New HTML</span>';

// 6. 字体改变
element.style.fontSize = '16px';
element.style.fontFamily = 'Arial';

// 7. DOM 操作
parent.appendChild(child); // 触发回流
parent.removeChild(child); // 触发回流

// 8. 获取布局属性（强制同步布局）
const rect = element.getBoundingClientRect();
const width = element.offsetWidth;
const height = element.offsetHeight;
const top = element.offsetTop;
const left = element.offsetLeft;
const style = window.getComputedStyle(element);

// 重绘触发场景详解

// 1. 颜色改变 - 只触发重绘
element.style.color = 'red';
element.style.backgroundColor = 'blue';
element.style.borderColor = 'green';

// 2. 背景改变
element.style.backgroundImage = 'url(image.jpg)';
element.style.backgroundSize = 'cover';

// 3. 边框样式改变
element.style.borderStyle = 'dashed';
element.style.borderWidth = '2px';

// 4. 阴影改变
element.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)';
element.style.textShadow = '1px 1px 2px black';

// 5. 透明度改变
element.style.opacity = '0.5';

// 6. visibility 改变（注意与 display:none 的区别）
element.style.visibility = 'hidden'; // 触发重绘，元素仍占据空间

// 对比：display:none 触发回流
element.style.display = 'none'; // 触发回流，元素不占据空间

// 回流与重绘的关系示例

// 回流 + 重绘：改变元素尺寸
element.style.width = '200px'; // 先回流计算布局，再重绘

// 只重绘：改变元素颜色
element.style.color = 'red'; // 只重绘，不回流

// 都不触发：使用合成层
element.style.transform = 'translateX(100px)'; // 不回流不重绘，只合成
element.style.opacity = '0.5'; // 在合成层上，不回流不重绘

// 性能排序（从低到高）：
// 回流 + 重绘 < 重绘 < 合成

// ❌ 避免：多次触发回流
element.style.width = '100px';
element.style.height = '100px';
element.style.margin = '10px';
element.style.padding = '10px';
// 每次样式修改都可能触发回流

// ✅ 推荐：批量修改样式
// 方法1：使用cssText
element.style.cssText = 'width: 100px; height: 100px; margin: 10px; padding: 10px;';

// 方法2：使用class
element.className = 'active';

// 方法3：使用requestAnimationFrame
function updateStyles() {
  requestAnimationFrame(() => {
    element.style.width = '100px';
    element.style.height = '100px';
  });
}

// ❌ 避免：使用top/left进行动画
.animated-element {
  position: absolute;
  top: 0;
  left: 0;
  transition: top 0.3s, left 0.3s;
}

// ✅ 推荐：使用transform进行动画
.animated-element {
  transform: translate(0, 0);
  transition: transform 0.3s;
}

// ❌ 避免：循环中操作DOM
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  document.body.appendChild(div); // 每次都触发回流
}

// ✅ 推荐：使用DocumentFragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  fragment.appendChild(div);
}
document.body.appendChild(fragment); // 只触发一次回流

// ❌ 避免：频繁获取布局属性
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = elements[i].offsetWidth + 10 + 'px';
  // 每次循环都触发回流（布局抖动）
}

// ✅ 推荐：批量读取，批量写入
const widths = [];
for (let i = 0; i < elements.length; i++) {
  widths[i] = elements[i].offsetWidth; // 先批量读取
}
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = widths[i] + 10 + 'px'; // 再批量写入
}

// ❌ 避免：频繁修改样式
setInterval(() => {
  element.style.backgroundColor = getRandomColor();
}, 100);

// ✅ 推荐：使用CSS动画
@keyframes colorChange {
  0% { background-color: red; }
  50% { background-color: green; }
  100% { background-color: blue; }
}

.animated-element {
  animation: colorChange 3s infinite;
}

// ❌ 避免：复杂的CSS选择器
.container .content .item .title .text {
  color: red;
}

// ✅ 推荐：简洁的CSS选择器
.item-text {
  color: red;
}

// ❌ 避免：过度使用渐变和阴影
.heavy-element {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3), 0 5px 15px rgba(0,0,0,0.2);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

// ✅ 推荐：适度使用视觉效果
.light-element {
  background: #667eea;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

// 创建合成层的场景

// 1. 动画元素
.animated-box {
  will-change: transform;
  transform: translateZ(0);
}

// 2. 固定定位元素
.fixed-header {
  position: fixed;
  will-change: transform;
}

// 3. 滚动容器
.scroll-container {
  overflow: auto;
  will-change: transform;
  -webkit-overflow-scrolling: touch;
}

// 4. 视频和Canvas
.video-container {
  transform: translateZ(0);
}

// 监控合成层
// Chrome DevTools -> More Tools -> Layers
// 可以查看所有合成层及其内存占用

// ❌ 避免：过度使用will-change
* {
  will-change: transform; /* 不推荐：消耗大量GPU内存 */
}

// ✅ 推荐：按需使用will-change
.animated-on-hover:hover {
  will-change: transform;
}

// ❌ 避免：使用@import（阻塞渲染）
@import url('styles.css');

// ✅ 推荐：使用link标签
<link rel="stylesheet" href="styles.css">

// ❌ 避免：深层嵌套选择器
.page .section .container .row .col .item .title {
  font-size: 16px;
}

// ✅ 推荐：扁平化选择器
.item-title {
  font-size: 16px;
}

// ✅ 推荐：使用CSS变量
:root {
  --primary-color: #007bff;
  --font-size-base: 16px;
}

.button {
  background-color: var(--primary-color);
  font-size: var(--font-size-base);
}

// ✅ 推荐：关键CSS内联
<head>
  <style>
    /* 关键CSS直接内联 */
    .header { height: 60px; }
    .hero { min-height: 400px; }
  </style>
</head>
<body>
  <!-- 内容 -->
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</body>

// ❌ 避免：在布局期间修改样式
function updateLayout() {
  element.style.width = '100px';
  const height = element.offsetHeight; // 强制同步布局
  element.style.height = height + 'px';
}

// ✅ 推荐：使用requestAnimationFrame
function updateLayout() {
  requestAnimationFrame(() => {
    element.style.width = '100px';
    requestAnimationFrame(() => {
      const height = element.offsetHeight;
      element.style.height = height + 'px';
    });
  });
}

// ❌ 避免：频繁操作DOM
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  list.appendChild(li);
});

// ✅ 推荐：使用虚拟列表（大数据量）
class VirtualList {
  constructor(container, itemHeight, renderItem) {
    this.container = container;
    this.itemHeight = itemHeight;
    this.renderItem = renderItem;
    this.visibleItems = Math.ceil(container.clientHeight / itemHeight);
    this.init();
  }
  
  init() {
    this.container.addEventListener('scroll', this.onScroll.bind(this));
  }
  
  onScroll() {
    const scrollTop = this.container.scrollTop;
    const startIndex = Math.floor(scrollTop / this.itemHeight);
    this.render(startIndex);
  }
  
  render(startIndex) {
    const fragment = document.createDocumentFragment();
    for (let i = startIndex; i < startIndex + this.visibleItems; i++) {
      const item = this.renderItem(i);
      fragment.appendChild(item);
    }
    this.container.innerHTML = '';
    this.container.appendChild(fragment);
  }
}

// ✅ 推荐：使用Intersection Observer懒加载
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

// CSS 是"渲染阻塞资源"：
// 浏览器必须构建完 CSSOM 才能生成渲染树，否则会渲染出无样式内容再重排（FOUC）
// 因此关键 CSS 应尽早、尽小地加载

// JS 默认是"解析阻塞资源"：
// 遇到 <script> 会暂停 DOM 解析，因为 JS 可能修改 DOM 和 CSSOM
// 而且 JS 执行前会等待前面的 CSSOM 构建完成（因为 JS 可能读取样式）

// 优化：用 async / defer 让脚本不阻塞解析
// <script async src="analytics.js"></script>  // 下载完立即执行，顺序不保证
// <script defer src="app.js"></script>        // 下载不阻塞，DOM 解析完后按序执行

<!-- 关键 CSS 内联，首屏立即有样式 -->
<style>
  .header { height: 60px; background: #fff; }
  .hero { min-height: 480px; }
</style>

<!-- 非关键 CSS 异步加载，不阻塞首屏渲染 -->
<link rel="preload" href="/css/rest.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/rest.css"></noscript>

<!-- 用 media 属性让打印样式不阻塞屏幕渲染 -->
<link rel="stylesheet" href="/css/print.css" media="print">

// 完整像素管线：JavaScript → Style → Layout → Paint → Composite
//
// 1. JavaScript：通过 JS 触发视觉变化（改样式、加元素、动画）
// 2. Style（样式计算）：确定每个元素最终应用哪些 CSS 规则
// 3. Layout（布局）：计算每个元素的几何位置和大小
// 4. Paint（绘制）：填充像素，绘制文字、颜色、图片、边框等
// 5. Composite（合成）：把各图层按正确顺序合成到屏幕
//
// 关键认知：不是每次更新都走完五步！改动的属性决定了从哪一步开始。

// 路径一：改动布局属性（width/height/top/left/margin...）
// → Style → Layout → Paint → Composite（走全程，最贵）
element.style.width = '200px';

// 路径二：改动绘制属性（color/background/box-shadow/border-radius...）
// → Style → Paint → Composite（跳过 Layout，较省）
element.style.backgroundColor = 'red';

// 路径三：改动合成属性（transform/opacity）
// → Style → Composite（跳过 Layout 和 Paint，最省，可交给 GPU）
element.style.transform = 'translateX(100px)';
element.style.opacity = '0.5';

// 关键结论：60fps 意味着每帧只有约 16.7ms 预算
// 1000ms / 60 ≈ 16.67ms，还要留给浏览器其他工作，实际 JS 预算约 10ms
// 因此动画务必只改 transform/opacity，把工作交给 GPU 合成线程，不占主线程

// 帧预算计算
// 60fps → 每帧 16.67ms；120fps → 每帧 8.33ms
// 一帧内浏览器要做：处理输入 → 执行 JS → 样式 → 布局 → 绘制 → 合成
// 留给开发者 JS 的时间通常 <10ms，超出就会掉帧（jank）

// 用 rAF 测量帧率
let last = performance.now();
let frames = 0;
function measureFPS(now) {
  frames++;
  if (now - last >= 1000) {
    console.log('FPS:', frames);
    frames = 0;
    last = now;
  }
  requestAnimationFrame(measureFPS);
}
requestAnimationFrame(measureFPS);

// ❌ 布局抖动：读（offsetWidth）触发布局，写又使布局失效，循环反复强制同步布局
function badResize(boxes) {
  for (let i = 0; i < boxes.length; i++) {
    // 读取 offsetWidth：为返回准确值，浏览器被迫同步执行布局
    const width = boxes[i].offsetWidth;
    // 写入：使刚算好的布局失效，下次读又要重算
    boxes[i].style.width = width / 2 + 'px';
  }
  // n 个元素 → n 次强制同步布局，O(n) 次昂贵计算
}

// ✅ 读写分离：先一次性读完所有值，再统一写入
function goodResize(boxes) {
  // 阶段一：批量读（只触发一次布局）
  const widths = boxes.map((box) => box.offsetWidth);
  // 阶段二：批量写（不再穿插读取，布局失效一次即可）
  boxes.forEach((box, i) => {
    box.style.width = widths[i] / 2 + 'px';
  });
}

// 几何相关的读取都可能触发强制布局：
// - offsetTop/Left/Width/Height
// - clientTop/Left/Width/Height
// - scrollTop/Left/Width/Height
// - getBoundingClientRect()
// - getComputedStyle()（部分属性）
// - offsetParent
// - scrollIntoView()、focus()（可能触发）

// window 相关：
// - innerWidth/innerHeight、scrollX/scrollY
// - getComputedStyle()

// 简易 FastDOM：把读操作和写操作分别排入队列，在 rAF 里先读后写
const reads = [];
const writes = [];
let scheduled = false;

function schedule() {
  if (scheduled) return;
  scheduled = true;
  requestAnimationFrame(() => {
    const r = reads.slice(); reads.length = 0;
    const w = writes.slice(); writes.length = 0;
    r.forEach((fn) => fn()); // 先执行所有读
    w.forEach((fn) => fn()); // 再执行所有写
    scheduled = false;
  });
}

const fastdom = {
  measure(fn) { reads.push(fn); schedule(); },
  mutate(fn) { writes.push(fn); schedule(); },
};

// 使用：读写自动分离，避免抖动
fastdom.measure(() => {
  const height = element.offsetHeight;
  fastdom.mutate(() => { element.style.height = height * 2 + 'px'; });
});

// 1. 3D transform 或 translateZ/translate3d
// .layer { transform: translateZ(0); }

// 2. 有动画的 transform / opacity（Web Animations 或 CSS animation）
// .layer { animation: move 1s infinite; }

// 3. will-change: transform / opacity
// .layer { will-change: transform; }

// 4. video / canvas / iframe 元素

// 5. 有合成层后代且自身有某些属性（overlap 重叠提升）

// 6. position: fixed（部分浏览器）

// 7. backdrop-filter

// 当一个合成层上方有多个重叠元素时，
// 浏览器可能把它们"压缩"到同一层以节省内存（Layer Squashing）
// 但某些情况无法压缩，导致意外创建大量层

// ❌ 意外的层爆炸：给一个长列表每一项都加 will-change
// .list-item { will-change: transform; } /* 1000 项 = 1000 个层，内存爆炸 */

// ✅ 只给正在动画的元素加，动画结束后移除
element.addEventListener('mouseenter', () => {
  element.style.willChange = 'transform';
});
element.addEventListener('animationend', () => {
  element.style.willChange = 'auto'; // 释放，让浏览器回收层
});

/* ❌ 全局滥用：预先为大量元素创建层，浪费 GPU 内存 */
* { will-change: transform; }

/* ❌ 长期挂着 will-change：浏览器一直为它保留资源 */
.always { will-change: transform, opacity; }

/* ✅ 只在即将变化前短暂提示，变化后移除 */
.card:hover { will-change: transform; }

// 一个合成层的内存 ≈ 宽 × 高 × 4 字节（RGBA）
// 例：一个 1920×1080 全屏层 ≈ 1920 × 1080 × 4 ≈ 8.3MB
// 若不小心创建 20 个全屏层 → 约 166MB GPU 内存，低端设备直接卡死或崩溃
// 因此：层要精、要少、用完即弃

/* contain 的取值 */
.widget {
  /* layout：内部布局不影响外部，外部也不影响内部布局 */
  contain: layout;
  /* paint：内容不会绘制到边界外，可跳过屏幕外绘制 */
  /* size：元素尺寸不依赖子元素（需配合固定尺寸） */
  /* style：某些样式效果不外泄 */
  /* strict = size + layout + paint + style */
  /* content = layout + paint + style */
}

/* 独立的卡片组件，用 contain 隔离，改动其内部不触发全页重排 */
.card { contain: content; }

/* 屏幕外的区块跳过渲染（布局/绘制），进入视口才渲染 */
.section {
  content-visibility: auto;
  /* 必须配合 contain-intrinsic-size 预留占位尺寸，否则滚动条会跳动 */
  contain-intrinsic-size: auto 600px;
}

// ❌ 用 setTimeout 做动画：与刷新不同步，易掉帧
let pos = 0;
function badAnimate() {
  pos += 2;
  box.style.transform = 'translateX(' + pos + 'px)';
  setTimeout(badAnimate, 16); // 16ms 不精确，累积漂移
}

// ✅ 用 rAF：与刷新同步，浏览器在合适时机调用
function goodAnimate() {
  pos += 2;
  box.style.transform = 'translateX(' + pos + 'px)';
  if (pos < 500) requestAnimationFrame(goodAnimate);
}
requestAnimationFrame(goodAnimate);

// 基于时间的动画（不同刷新率下速度一致）
let startTime = null;
function timeBasedAnimate(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsed = timestamp - startTime;
  const distance = Math.min(elapsed / 1000 * 200, 500); // 每秒 200px
  box.style.transform = 'translateX(' + distance + 'px)';
  if (distance < 500) requestAnimationFrame(timeBasedAnimate);
}
requestAnimationFrame(timeBasedAnimate);

// 用 requestIdleCallback 在浏览器空闲时处理低优先级任务，不阻塞渲染与交互
const tasks = [/* 大量非紧急任务 */];

function processTasks(deadline) {
  // timeRemaining() 返回本帧剩余空闲时间
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    const task = tasks.shift();
    task();
  }
  if (tasks.length > 0) {
    requestIdleCallback(processTasks);
  }
}
requestIdleCallback(processTasks, { timeout: 2000 }); // 超时兜底，避免饿死

// 长任务（>50ms）会阻塞主线程，导致输入无响应、动画掉帧
// 用 PerformanceObserver 监控长任务
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.warn('长任务:', Math.round(entry.duration), 'ms');
  }
}).observe({ type: 'longtask', buffered: true });

// 拆分长任务：把大循环切成小块，中间让出主线程
async function processInChunks(items, chunkSize = 100) {
  for (let i = 0; i < items.length; i += chunkSize) {
    const chunk = items.slice(i, i + chunkSize);
    chunk.forEach(handleItem);
    // 让出主线程，让浏览器有机会响应输入、渲染
    await new Promise((resolve) => setTimeout(resolve, 0));
    // 现代方案：await scheduler.yield();
  }
}

// isInputPending：处理任务时检测是否有待处理输入，有则让路
function processWithInputCheck(items) {
  while (items.length > 0) {
    if (navigator.scheduling?.isInputPending?.()) {
      // 有用户输入待处理，先让出，稍后继续
      setTimeout(() => processWithInputCheck(items), 0);
      return;
    }
    handleItem(items.shift());
  }
}

// 定高虚拟列表：每项高度固定，计算简单
class FixedVirtualList {
  constructor({ container, itemHeight, total, renderItem, buffer = 3 }) {
    this.container = container;      // 滚动容器
    this.itemHeight = itemHeight;    // 每项高度
    this.total = total;              // 数据总条数
    this.renderItem = renderItem;    // 渲染单项的函数
    this.buffer = buffer;            // 上下缓冲区条数

    // 撑起总高度的占位元素，保证滚动条正确
    this.phantom = document.createElement('div');
    this.phantom.style.height = total * itemHeight + 'px';
    this.phantom.style.position = 'relative';

    // 实际渲染内容的容器，用 transform 定位
    this.content = document.createElement('div');
    this.content.style.position = 'absolute';
    this.content.style.top = '0';
    this.content.style.left = '0';
    this.content.style.right = '0';

    this.phantom.appendChild(this.content);
    this.container.appendChild(this.phantom);

    // 用 passive 监听滚动，避免阻塞
    this.container.addEventListener('scroll', this.onScroll.bind(this), { passive: true });
    this.render();
  }

  onScroll() {
    // 用 rAF 节流，避免每个滚动事件都重渲染
    if (this.ticking) return;
    this.ticking = true;
    requestAnimationFrame(() => {
      this.render();
      this.ticking = false;
    });
  }

  render() {
    const scrollTop = this.container.scrollTop;
    const viewportHeight = this.container.clientHeight;

    // 计算可视范围的起止索引（含缓冲区）
    let start = Math.floor(scrollTop / this.itemHeight) - this.buffer;
    let end = Math.ceil((scrollTop + viewportHeight) / this.itemHeight) + this.buffer;
    start = Math.max(0, start);
    end = Math.min(this.total, end);

    // 用 transform 把内容容器平移到正确位置（不触发布局）
    this.content.style.transform = 'translateY(' + start * this.itemHeight + 'px)';

    // 只渲染可视范围内的项
    const fragment = document.createDocumentFragment();
    for (let i = start; i < end; i++) {
      const node = this.renderItem(i);
      node.style.height = this.itemHeight + 'px';
      fragment.appendChild(node);
    }
    this.content.replaceChildren(fragment);
  }
}

// 使用：10 万条数据，DOM 中始终只有约 20 个节点
new FixedVirtualList({
  container: document.getElementById('list'),
  itemHeight: 40,
  total: 100000,
  renderItem: (i) => {
    const div = document.createElement('div');
    div.textContent = '第 ' + i + ' 行';
    return div;
  },
});

// 动态高度更复杂：需在渲染后测量真实高度并缓存，修正位置
class DynamicVirtualList {
  constructor({ container, estimatedHeight, total, renderItem }) {
    this.container = container;
    this.estimated = estimatedHeight;
    this.total = total;
    this.renderItem = renderItem;
    // 缓存每项的位置信息（top、height、bottom），初始用预估值
    this.positions = Array.from({ length: total }, (_, i) => ({
      index: i,
      height: estimatedHeight,
      top: i * estimatedHeight,
      bottom: (i + 1) * estimatedHeight,
    }));
    this.container.addEventListener('scroll', () => this.render(), { passive: true });
    this.render();
  }

  // 二分查找：根据 scrollTop 找到第一个可见项
  findStartIndex(scrollTop) {
    let lo = 0, hi = this.total - 1, result = 0;
    while (lo <= hi) {
      const mid = (lo + hi) >> 1;
      if (this.positions[mid].bottom < scrollTop) {
        lo = mid + 1;
      } else {
        result = mid;
        hi = mid - 1;
      }
    }
    return result;
  }

  // 渲染后测量真实高度，修正后续所有项的位置
  updatePositions(start, nodes) {
    nodes.forEach((node, i) => {
      const idx = start + i;
      const realHeight = node.getBoundingClientRect().height;
      const pos = this.positions[idx];
      const diff = realHeight - pos.height;
      if (diff !== 0) {
        pos.height = realHeight;
        pos.bottom = pos.top + realHeight;
        // 修正后面所有项（可优化为惰性修正）
        for (let j = idx + 1; j < this.total; j++) {
          this.positions[j].top = this.positions[j - 1].bottom;
          this.positions[j].bottom = this.positions[j].top + this.positions[j].height;
        }
      }
    });
    // 更新总高度
    this.phantomHeight = this.positions[this.total - 1].bottom;
  }
}

// ❌ 非 passive：浏览器要等 JS 执行完才知道是否 preventDefault，滚动可能卡
container.addEventListener('touchmove', handler);
container.addEventListener('wheel', handler);

// ✅ passive：明确不阻止默认行为，滚动立即响应，滑动更跟手
container.addEventListener('touchmove', handler, { passive: true });
container.addEventListener('wheel', handler, { passive: true });

// ❌ scroll 事件里频繁 getBoundingClientRect：强制同步布局 + 高频触发
window.addEventListener('scroll', () => {
  images.forEach((img) => {
    const rect = img.getBoundingClientRect(); // 每次都触发布局
    if (rect.top < window.innerHeight) loadImage(img);
  });
});

// ✅ IntersectionObserver：浏览器异步计算相交，不触发布局、不占主线程
const io = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      loadImage(entry.target);
      io.unobserve(entry.target);
    }
  });
}, { rootMargin: '200px' }); // 提前 200px 预加载

images.forEach((img) => io.observe(img));

/* 现代方案：CSS 滚动驱动动画，完全在合成线程运行，不占主线程 */
@keyframes reveal {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.item {
  animation: reveal linear;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

/* ❌ 用 JS 监听 scroll 切换 fixed，易抖动、掉帧 */
/* ✅ 用原生 sticky，由浏览器合成线程处理，流畅 */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
}

// 方式一：CSS Transition/Animation —— 声明式，可被浏览器优化到合成线程
// .box { transition: transform 0.3s; }
// box.style.transform = 'translateX(100px)';

// 方式二：Web Animations API（WAAPI）—— JS 控制，同样可交给合成线程
const animation = box.animate(
  [
    { transform: 'translateX(0)', opacity: 1 },
    { transform: 'translateX(300px)', opacity: 0.3 },
  ],
  { duration: 300, easing: 'ease-out', fill: 'forwards' }
);
// 可编程控制：暂停、反向、调速、监听完成
animation.pause();
animation.play();
animation.reverse();
animation.playbackRate = 2;
animation.finished.then(() => console.log('动画完成'));

// 方式三：requestAnimationFrame 逐帧 —— 最灵活但占主线程，仅在必要时用
// （如物理引擎、canvas 动画、需精确逐帧控制的场景）

// FLIP：让"布局变化"看起来是平滑动画，实则只用 transform
function flip(element, mutate) {
  // First：记录变化前的位置
  const first = element.getBoundingClientRect();

  // 执行实际的 DOM/样式变化
  mutate();

  // Last：记录变化后的位置
  const last = element.getBoundingClientRect();

  // Invert：用 transform 把元素"拉回"变化前的位置
  const dx = first.left - last.left;
  const dy = first.top - last.top;
  const sx = first.width / last.width;
  const sy = first.height / last.height;
  element.style.transform = 'translate(' + dx + 'px,' + dy + 'px) scale(' + sx + ',' + sy + ')';
  element.style.transformOrigin = 'top left';

  // Play：下一帧移除 transform，让它平滑过渡到最终位置
  requestAnimationFrame(() => {
    element.style.transition = 'transform 0.3s ease';
    element.style.transform = '';
  });
}

<!-- 1. 显式尺寸或 aspect-ratio，避免加载后布局跳动（CLS） -->
<img src="/photo.jpg" width="800" height="600" alt="示例">

<!-- 2. 懒加载首屏之外的图片；首屏图用 eager -->
<img src="/below-fold.jpg" loading="lazy" width="400" height="300" alt="">
<img src="/hero.jpg" loading="eager" fetchpriority="high" width="1200" height="600" alt="">

<!-- 3. decoding=async：图片解码不阻塞主线程 -->
<img src="/large.jpg" decoding="async" alt="">

<!-- 4. 响应式图片：按视口发送合适尺寸，省流量、快渲染 -->
<img
  src="/img-800.webp"
  srcset="/img-480.webp 480w, /img-800.webp 800w, /img-1200.webp 1200w"
  sizes="(max-width: 600px) 480px, 800px"
  alt="">

<!-- 5. 现代格式，浏览器按支持度选择 -->
<picture>
  <source srcset="/img.avif" type="image/avif">
  <source srcset="/img.webp" type="image/webp">
  <img src="/img.jpg" alt="">
</picture>

// 编程式解码：先解码再插入，避免插入时的解码卡顿
async function addImageSmoothly(src, container) {
  const img = new Image();
  img.src = src;
  try {
    await img.decode(); // 在后台完成解码
    container.appendChild(img); // 此时插入不会引起解码导致的掉帧
  } catch (e) {
    // 解码失败处理
  }
}

// LQIP（低质量占位图）：先显示模糊小图，大图加载完切换
// 用 aspect-ratio 占位 + 背景模糊小图 + object-fit

/* font-display 控制字体加载期间的行为 */
@font-face {
  font-family: 'Brand';
  src: url('/fonts/brand.woff2') format('woff2');
  /* swap：立即用后备字体，字体到位后替换（FOUT，推荐首屏文本） */
  /* block：短暂隐藏文本等字体（FOIT，最长约 3s） */
  /* optional：短暂等待，超时就永久用后备字体（对性能最友好） */
  /* fallback：介于 swap 和 optional 之间 */
  font-display: swap;
  /* size-adjust 对齐后备字体尺寸，减少切换时的抖动（CLS） */
  size-adjust: 97%;
}

<!-- 预加载首屏关键字体，避免文本渲染被字体阻塞 -->
<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>

// 用 FontFace API 编程式加载字体，加载完成后再应用，避免布局抖动
const font = new FontFace('Brand', 'url(/fonts/brand.woff2)');
font.load().then((loaded) => {
  document.fonts.add(loaded);
  document.body.classList.add('fonts-loaded'); // 统一切换，减少多次重排
});

/* 用纯 CSS 骨架屏，配合 transform 动画（不触发布局） */
.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

// React 流式 SSR：内容分块流式发送，浏览器边收边渲染
// import { renderToPipeableStream } from 'react-dom/server';
// const { pipe } = renderToPipeableStream(<App />, {
//   onShellReady() { res.setHeader('content-type', 'text/html'); pipe(res); },
// });
// 配合 Suspense，慢的部分先占位，就绪后再流式补上

// GPU 加速并非万能，注意：
// 1. 只有 transform / opacity / filter 能高效交给 GPU 合成
// 2. 创建合成层有成本（内存 + 层管理），层不宜过多
// 3. 大面积重绘（大图层内容变化）仍需 CPU 绘制后上传 GPU，可能成为瓶颈
// 4. 文本在合成层上可能出现渲染模糊（subpixel 问题），动画结束应移除 will-change
// 5. 移动端 GPU 内存有限，层爆炸更容易导致崩溃

// 判断是否真的更快：用 DevTools 的 Rendering → Paint flashing / Layer borders 观察

// 使用步骤：
// 1. 打开 DevTools → Performance 面板
// 2. 点击录制（或 Ctrl+E），执行要分析的交互，停止录制
// 3. 查看时间线，重点关注：
//    - Main（主线程）轨道：找长任务（红色三角标记）
//    - 火焰图：看哪些函数耗时最长
//    - Frames：看每帧耗时，红色代表掉帧
//    - 各阶段颜色：
//      黄色 = Scripting（JS 执行）
//      紫色 = Rendering（样式计算 + 布局）
//      绿色 = Painting（绘制 + 合成）
//      灰色 = System / Idle

// 编程式标记，方便在 Performance 时间线定位自己的代码段
performance.mark('render-start');
doRender();
performance.mark('render-end');
performance.measure('render', 'render-start', 'render-end');
// 在 Performance 面板的 Timings 轨道能看到 'render' 这一段

// DevTools → More Tools → Rendering，勾选以下选项：
// - Paint flashing：重绘区域会高亮闪烁，一眼看出哪里频繁重绘
// - Layout Shift Regions：布局偏移区域高亮，定位 CLS 来源
// - Layer borders：显示合成层边界，排查层爆炸
// - Frame Rendering Stats：实时 FPS 与 GPU 内存
// - Scrolling performance issues：标出滚动性能问题区域

// DevTools → More Tools → Layers
// 可查看：所有合成层、每层的内存占用、层被创建的原因（Compositing Reasons）
// 用途：排查"意外的合成层"和"层爆炸"导致的内存问题

// 1. 引入虚拟列表，DOM 节点从 4 万降到约 30 个
// 2. scroll 判断改用 IntersectionObserver
// 3. 简化阴影，用单层 box-shadow
// 4. 滚动容器加 contain: layout paint

// ❌ 用 height 动画：每帧都触发布局，还要重排下方所有元素
// .card { transition: height 0.3s; }

// ✅ 用 transform: scaleY + FLIP，或用 grid-template-rows 0fr→1fr
// 方案 A：transform scaleY（可能有内容拉伸，配合子元素反向缩放）
// 方案 B：现代方案 grid 行高动画（部分浏览器可动画 fr）
.card {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.card.open { grid-template-rows: 1fr; }
.card > .content { overflow: hidden; }

// React 的"渲染"是执行组件函数生成虚拟 DOM，与浏览器渲染不同
// 但过度的 React 重渲染最终会导致更多的 DOM 操作与浏览器渲染

// 1. memo 避免 props 未变时重渲染
const Item = React.memo(function Item({ data }) {
  return <li>{data.name}</li>;
});

// 2. useMemo / useCallback 稳定引用，避免子组件误重渲染
const handleClick = useCallback(() => {}, []);
const sorted = useMemo(() => heavySort(items), [items]);

// 3. 列表用稳定 key，帮助 React 精确 diff，减少 DOM 增删
// items.map(item => <Item key={item.id} data={item} />)

// 4. 用 startTransition 把非紧急更新标记为可中断，保持交互流畅
// import { startTransition } from 'react';
// startTransition(() => setBigList(filtered));

// v-if：真正增删 DOM（触发布局绘制），适合不常切换
// v-show：只切 display（仍触发一次布局），适合频繁切换
// v-once：只渲染一次的静态内容
// v-memo：缓存子树，依赖不变则跳过更新（Vue 3.2+）

// 1. 移动端 CPU/GPU 较弱，帧预算更紧张，动画务必只用 transform/opacity
// 2. GPU 内存有限，合成层要更克制，避免层爆炸导致崩溃
// 3. 高分屏（DPR 2/3）绘制像素更多，重绘成本按 DPR 平方增长
// 4. 用 -webkit-overflow-scrolling: touch 启用惯性滚动（旧 iOS）
// 5. 300ms 点击延迟：用 touch-action: manipulation 或 viewport 消除
// 6. 减少复杂滤镜/阴影，移动端绘制代价更高

// viewport 配置，避免缩放与延迟
// <meta name="viewport" content="width=device-width, initial-scale=1">

// ❌ 循环中逐个插入：每次 append 都可能触发回流
const list = document.getElementById('list');
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = '项 ' + i;
  list.appendChild(li); // 反复触发布局
}

// ✅ 方案一：DocumentFragment 离线构建，一次性插入
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = '项 ' + i;
  fragment.appendChild(li); // fragment 不在文档树，不触发布局
}
list.appendChild(fragment); // 只触发一次回流

// ✅ 方案二：拼接 HTML 字符串一次性写入（注意 XSS 转义）
let html = '';
for (let i = 0; i < 1000; i++) {
  html += '<li>项 ' + i + '</li>';
}
list.innerHTML = html; // 解析 + 一次回流

// ✅ 方案三：先脱离文档树，改完再放回
const parent = list.parentNode;
const next = list.nextSibling;
parent.removeChild(list);   // 脱离文档
// ...大量修改 list...
parent.insertBefore(list, next); // 放回，改动期间不触发页面回流

// ✅ 方案四：display:none 期间修改（改动不触发布局，恢复时一次回流）
list.style.display = 'none';
// ...大量修改...
list.style.display = '';

/* ❌ 关键选择器是通配/宽泛，浏览器要检查海量元素 */
.sidebar * { color: red; }
div div div div span { font-size: 12px; }

/* ❌ 深层后代选择器，匹配时向上回溯多层 */
.page .section .container .row .col .item .title { color: blue; }

/* ✅ 关键选择器具体，用类名直接命中 */
.sidebar-text { color: red; }
.item-title { color: blue; }

// 样式计算成本 ≈ 元素数量 × 规则数量（简化）
// 减少方式：精简未用 CSS（PurgeCSS）、扁平选择器、避免深层嵌套

// ResizeObserver：监听元素尺寸变化，替代 window.resize + 手动测量
const ro = new ResizeObserver((entries) => {
  for (const entry of entries) {
    // contentRect 已由浏览器计算好，读取不额外触发布局
    const { width, height } = entry.contentRect;
    adjustLayout(width, height);
  }
});
ro.observe(document.getElementById('chart'));

// MutationObserver：监听 DOM 变化，异步批量回调（不阻塞）
const mo = new MutationObserver((mutations) => {
  // 批量处理变化，避免对每次 DOM 改动同步响应
  mutations.forEach((m) => { /* ... */ });
});
mo.observe(target, { childList: true, subtree: true });

// IntersectionObserver：可见性检测（前文详述），懒加载/曝光统计首选

// 高频事件（scroll/resize/mousemove）直接改样式会导致过度渲染

// 节流（throttle）：固定间隔执行，适合 scroll/mousemove
function throttle(fn, wait) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= wait) {
      last = now;
      fn.apply(this, args);
    }
  };
}

// 更好的方案：用 rAF 节流，保证与刷新同步，一帧最多执行一次
function rafThrottle(fn) {
  let ticking = false;
  return function (...args) {
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(() => {
      fn.apply(this, args);
      ticking = false;
    });
  };
}
window.addEventListener('scroll', rafThrottle(updateHeader), { passive: true });

// 防抖（debounce）：停止触发后才执行，适合 resize 结束后重算布局
function debounce(fn, wait) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), wait);
  };
}
window.addEventListener('resize', debounce(recalcLayout, 200));

// ❌ 给 1000 个列表项各绑一个监听器：内存高、绑定慢
items.forEach((item) => item.addEventListener('click', handler));

// ✅ 事件委托：只在父元素绑一个，利用冒泡判断目标
list.addEventListener('click', (e) => {
  const item = e.target.closest('.list-item');
  if (item) {
    handleItemClick(item.dataset.id);
  }
});
// 好处：监听器少、动态新增的子项自动"生效"、内存占用低

// 把 Canvas 绘制转移到 Worker，避免复杂绘制阻塞主线程
// 主线程：
const canvas = document.getElementById('c');
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('canvas-worker.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);

// canvas-worker.js：
// self.onmessage = (e) => {
//   const ctx = e.data.canvas.getContext('2d');
//   function draw() {
//     // 复杂绘制在 Worker 线程执行，主线程保持流畅
//     requestAnimationFrame(draw);
//   }
//   draw();
// };

/* translateZ(0) / translate3d(0,0,0)：老式"hack"，强制创建合成层 */
.old-hack { transform: translateZ(0); }

/* will-change：现代、语义化的提示，浏览器可更智能地管理 */
.modern { will-change: transform; }

/* 把频繁变化的元素独立到合成层，其重绘不影响其他层 */
.live-badge {
  will-change: transform;
  /* 或 transform: translateZ(0); */
}

/* 用 contain 限制重绘范围 */
.independent-widget {
  contain: paint; /* 内容不会绘制到边界外，可整体跳过屏外绘制 */
}

// 只更新变化的部分，而非整块重渲染
// ❌ 每秒重设整个容器的 innerHTML（全量重绘）
setInterval(() => { container.innerHTML = renderAll(data); }, 1000);

// ✅ 只更新变化的文本节点
setInterval(() => { counterNode.textContent = data.count; }, 1000);

// 需求：长文章页，左侧目录随滚动高亮当前章节，顶部导航吸顶
class ScrollSpy {
  constructor({ sections, navLinks, header }) {
    this.sections = sections;   // 章节元素数组
    this.navLinks = navLinks;   // 目录链接数组
    this.header = header;

    // 用 IntersectionObserver 检测章节可见性（不用 scroll + 布局读取）
    this.observer = new IntersectionObserver(this.onIntersect.bind(this), {
      rootMargin: '-20% 0px -70% 0px', // 以视口中上部为判定线
      threshold: 0,
    });
    this.sections.forEach((s) => this.observer.observe(s));

    // 吸顶用 sticky（CSS），阴影用 rAF 节流的 scroll 判断
    window.addEventListener('scroll', this.onScroll.bind(this), { passive: true });
  }

  onIntersect(entries) {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const id = entry.target.id;
        // 批量更新高亮：先移除再添加，改动 class 而非内联样式
        this.navLinks.forEach((link) => {
          link.classList.toggle('active', link.dataset.target === id);
        });
      }
    });
  }

  onScroll() {
    if (this.ticking) return;
    this.ticking = true;
    requestAnimationFrame(() => {
      // 用 scrollY 而非 getBoundingClientRect，避免强制同步布局
      const scrolled = window.scrollY > 10;
      // 只切 class（触发合成属性 box-shadow 的重绘，范围小）
      this.header.classList.toggle('scrolled', scrolled);
      this.ticking = false;
    });
  }

  destroy() {
    this.observer.disconnect();
    window.removeEventListener('scroll', this.onScroll);
  }
}

/* 配套样式：吸顶用 sticky，导航动画只用 transform/opacity */
.header {
  position: sticky;
  top: 0;
  transition: box-shadow 0.2s ease;
  will-change: box-shadow;
}
.header.scrolled { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

.nav-link {
  transition: color 0.15s ease, transform 0.15s ease;
}
.nav-link.active {
  color: var(--primary);
  transform: translateX(4px); /* 用 transform 而非 margin，走合成 */
}

/* 章节区块用 contain 隔离，超长文章用 content-visibility 跳过屏外 */
.section {
  contain: layout style;
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

// 例：可视化大屏用 Canvas 而非海量 DOM 元素
// 1 万个数据点：
// - DOM 方案：1 万个 div，布局绘制极慢
// - Canvas 方案：一张画布上绘制，性能高数个量级
// - 数据量更大时用 WebGL / OffscreenCanvas 进一步提升

// Chrome 多进程（简化）：
// - 浏览器进程（Browser Process）：管理界面、网络、存储
// - 渲染进程（Renderer Process）：每个标签页一个，负责渲染
// - GPU 进程：负责合成与绘制上屏
// - 网络进程、插件进程等

// 渲染进程内的关键线程：
// - 主线程（Main Thread）：解析 HTML/CSS、执行 JS、样式计算、布局、绘制记录
// - 合成线程（Compositor Thread）：处理滚动、合成图层，不依赖主线程
// - 光栅线程（Raster Threads）：把绘制记录光栅化成位图
// - Worker 线程：Web Worker / Service Worker

// 关键结论：
// 1. 把动画交给合成线程（transform/opacity）→ 主线程忙也不卡
// 2. 把重活拆分或移到 Worker → 释放主线程
// 3. 减少主线程的布局/绘制工作 → 更多帧预算留给 JS

// 用 PerformanceObserver 采集渲染相关指标
// 1. Paint 时序（FP / FCP）
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, Math.round(entry.startTime), 'ms');
    // first-paint / first-contentful-paint
  }
}).observe({ type: 'paint', buffered: true });

// 2. LCP
new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const last = entries[entries.length - 1];
  console.log('LCP:', Math.round(last.startTime), 'ms', last.element);
}).observe({ type: 'largest-contentful-paint', buffered: true });

// 3. CLS（累积布局偏移）
let clsValue = 0;
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      clsValue += entry.value;
      console.log('当前 CLS:', clsValue.toFixed(3), entry.sources?.map((s) => s.node));
    }
  }
}).observe({ type: 'layout-shift', buffered: true });

// 把真实用户的渲染性能数据采集并上报，建立监控大盘
function reportRenderingMetrics() {
  const metrics = {};

  // 采集导航时序中的渲染相关阶段
  const nav = performance.getEntriesByType('navigation')[0];
  if (nav) {
    metrics.ttfb = Math.round(nav.responseStart);
    metrics.domContentLoaded = Math.round(nav.domContentLoadedEventEnd);
    metrics.domComplete = Math.round(nav.domComplete);
  }

  // 采集 FCP
  const fcp = performance.getEntriesByName('first-contentful-paint')[0];
  if (fcp) metrics.fcp = Math.round(fcp.startTime);

  // 长任务总时长（近似主线程阻塞）
  let longTaskTotal = 0;
  performance.getEntriesByType('longtask').forEach((t) => { longTaskTotal += t.duration; });
  metrics.longTaskTotal = Math.round(longTaskTotal);

  // 附带设备/网络上下文，便于分维度分析
  metrics.dpr = window.devicePixelRatio;
  metrics.effectiveType = navigator.connection?.effectiveType;
  metrics.deviceMemory = navigator.deviceMemory;

  // 页面隐藏时上报，保证可靠送达
  const body = JSON.stringify(metrics);
  navigator.sendBeacon?.('/rum/rendering', body);
}

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

// 面对一个渲染性能问题，如何定位与决策：
function diagnose(problem) {
  if (problem === '首屏白屏久') {
    // 检查关键渲染路径
    return '内联关键 CSS、defer JS、preload 首图/字体、SSR';
  }
  if (problem === '滚动卡顿') {
    // 检查 DOM 规模与滚动监听
    return '虚拟列表、passive 监听、IntersectionObserver、contain';
  }
  if (problem === '动画掉帧') {
    // 检查动画属性
    return '只用 transform/opacity、WAAPI/FLIP、避免布局属性动画';
  }
  if (problem === '交互卡顿(INP高)') {
    // 检查主线程长任务
    return '拆分长任务、让出主线程、Web Worker、减少同步布局';
  }
  if (problem === '布局乱跳(CLS高)') {
    // 检查尺寸预留
    return '图片/广告预留尺寸、字体 size-adjust、避免动态插入顶开内容';
  }
  return '用 DevTools Performance + Rendering 面板定位具体阶段';
}