前端动画与渲染性能：帧率、合成层与 GPU 加速

JavaScript/CSS → Style（计算样式）→ Layout（布局）→ Paint（绘制）→ Composite（合成）

1. Parse：解析 HTML/CSS/JS 构建 DOM/CSSOM
2. Style：计算每个元素的最终样式（匹配选择器、继承、层叠）
3. Layout：计算元素几何位置（宽高、位置），生成布局树
4. Paint：将布局树绘制成像素图层（Background/Text/Border/Shadow）
5. Composite：将图层合成到屏幕（GPU 参与）

# 「修改 Layout 属性最昂贵」——触发重新布局后的完整流水线
# 「Composite 属性最便宜」——跳过 Layout 和 Paint，直接 GPU 合成
# 原则：做动画尽量用 transform 和 opacity

60fps：每帧 16.67ms，人眼感知流畅
120fps：每帧 8.33ms，高刷屏幕更顺滑
30fps：可感知卡顿，仅用于低功耗场景
# 实际预算 < 16.67ms（浏览器自身工作占 6-10ms）
# JavaScript 执行 + Style + Layout + Paint 必须在 ~10ms 内完成

VSync：显示器刷新信号，浏览器与之同步
如果一帧未在 VSync 前完成 → 跳过这一帧 → 显示上一帧 → 掉帧
# 掉帧感知的不是「慢」，而是「不一致」——时快时慢最卡

let lastTime = performance.now();
let frames = 0;

function measureFPS() {
  frames++;
  const now = performance.now();
  if (now >= lastTime + 1000) {
    console.log(`FPS: ${frames}`);
    frames = 0;
    lastTime = now;
  }
  requestAnimationFrame(measureFPS);
}
measureFPS();

/* GPU 加速动画 */
.card {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.card:hover {
  transform: translateY(-10px);
  opacity: 0.9;
}

/* will-change 提示浏览器创建合成层 */
.animated {
  will-change: transform;
}

// requestAnimationFrame — 与 VSync 同步
function animate(element, targetX) {
  const startX = element.offsetLeft;
  const startTime = performance.now();
  const duration = 300;

  function step(now) {
    const progress = Math.min((now - startTime) / duration, 1);
    const eased = 1 - Math.pow(1 - progress, 3); // ease-out-cubic
    element.style.transform = `translateX(${startX + (targetX - startX) * eased}px)`;
    
    if (progress < 1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

CSS：简单过渡、用户交互反馈、性能最优（浏览器优化路径）
JS：复杂物理动画、多元素同步、逐帧控制、游戏逻辑
WAAPI：CSS 性能 + JS 控制（未来趋势）

合成层 = 独立的 GPU 纹理，可直接 GPU 变换（无重绘）
浏览器自动创建合成层的情况：
  - 3D transforms（translateZ、rotate3d）
  - opacity 动画
  - will-change: transform/opacity
  - fixed/absolute + z-index + 覆盖其他层
  - video/canvas/iframe

/* 提示浏览器提前创建合成层 */
.animated-element {
  will-change: transform;
}

/* 动画结束后移除（避免过多合成层占内存） */
.animation-complete {
  will-change: auto;
}

/* 注意：滥用 will-change 会消耗 GPU 内存 */

每个合成层占用 GPU 内存（≈ 宽×高×4 bytes）
移动端 100 个全屏层 ≈ 100 × 375 × 812 × 4 ≈ 120MB GPU 内存
# 症状：页面滚动卡顿、GPU 内存溢出
# 排查：Chrome DevTools → Layers 面板

1) 录制：Performance → Record → 执行动画 → Stop
2) 分析：
   - Frames：绿色=60fps，黄色=警告，红色=掉帧
   - Main Thread：长任务（>50ms）需拆分
   - Raster/Composite：GPU 工作情况
   - Layer Borders：看合成层边界

Paint flashing：绿色闪烁 = 重绘区域
Layout Shift Regions：蓝色 = 布局偏移
Layer borders：橙色边框 = 合成层
FPS meter：实时帧率显示

查看所有合成层：
- 层数统计
- 每个层的内存占用
- 层的大小和位置
- 创建原因（hover 查看）

// 坏：读-写-读-写交替
function bad() {
  for (let i = 0; i < 100; i++) {
    const height = element.offsetHeight;  // 读（触发 layout）
    element.style.height = (height + 1) + 'px';  // 写
  }
}

// 好：批量读、批量写
function good() {
  const heights = elements.map(el => el.offsetHeight);  // 批量读
  elements.forEach((el, i) => {
    el.style.height = (heights[i] + 1) + 'px';  // 批量写
  });
}

快速连续修改布局属性 → 浏览器被迫反复 layout
# 避免：用 transform 替代 top/left、用 requestAnimationFrame 节流

大面积高频重绘：box-shadow 动画、blur 滤镜、渐变动画
# 解决：
#   - 动画元素提升到合成层（will-change/transform）
#   - 降低重绘频率（节流到 30fps）
#   - 使用 canvas 替代 DOM 动画

FLIP = First / Last / Invert / Play

1) First：记录元素初始位置
2) Last：计算元素最终位置
3) Invert：用 transform 把元素「倒回」初始位置（无动画）
4) Play：启用 transition，transform 归零 → 元素动画到最终位置

# 效果：只改变 transform（Composite），不触发 Layout

// FLIP 简化实现
function flipAnimate(element, finalRect) {
  const first = element.getBoundingClientRect();
  
  // 应用最终状态（先设 transform 为 0）
  element.style.transform = 'none';
  const last = element.getBoundingClientRect();
  
  // Invert
  const invertX = first.left - last.left;
  const invertY = first.top - last.top;
  element.style.transform = `translate(${invertX}px, ${invertY}px)`;
  element.style.transition = 'none';
  
  // Play
  requestAnimationFrame(() => {
    element.style.transition = 'transform 0.3s ease';
    element.style.transform = 'translate(0, 0)';
  });
}

# 只渲染可视区域的列表项
# react-window / @tanstack/react-virtual
# 原理：总高度固定，可视区域动态渲染，滚动时更新
# 效果：百万级列表流畅滚动

// 在 Worker 中渲染 canvas
const offscreen = canvas.transferControlToOffscreen();
worker.postMessage({ canvas: offscreen }, [offscreen]);

// Worker 中
self.onmessage = function(e) {
  const canvas = e.data.canvas;
  const ctx = canvas.getContext('2d');
  // 绘制逻辑...
};

const animation = element.animate([
  { transform: 'translateX(0)' },
  { transform: 'translateX(300px)' }
], {
  duration: 300,
  easing: 'ease-out',
  fill: 'forwards'
});

animation.pause();
animation.play();
animation.reverse();

- 性能同 CSS 动画（浏览器优化路径）
- 可控性同 JS（暂停/反转/调速）
- 可查询状态（animation.currentTime）
- 可组合多个动画
# 未来：animation.timeline（滚动驱动、手势驱动）