动画性能优化

/* ❌ 触发重排：改变元素尺寸 */
.element {
  width: 200px;        /* 触发 Layout */
  height: 100px;       /* 触发 Layout */
  padding: 20px;       /* 触发 Layout */
}
 
/* ❌ 触发重排：改变元素位置 */
.element {
  top: 50px;           /* 触发 Layout */
  left: 100px;         /* 触发 Layout */
  margin: 10px;        /* 触发 Layout */
}

图层内存 ≈ 宽度 × 高度 × 4 字节（RGBA）× 设备像素比²
 
示例：
- 1000px × 1000px 图层在 2x 屏幕上
- 内存 = 2000 × 2000 × 4 = 16MB

/* ✅ 正确：仅为动画元素创建合成层 */
.animated-card {
  will-change: transform;  /* 动画前创建 */
  animation: slideIn 0.5s ease-out;
}
 
.animated-card.animation-done {
  will-change: auto;  /* 动画后释放 */
}
 
/* ✅ 正确：使用 contain 限制影响范围 */
.card-container {
  contain: layout paint;  /* 内部变化不影响外部 */
}
 
/* ❌ 错误：全局创建合成层 */
* {
  transform: translateZ(0);  /* 创建过多图层，浪费内存 */
}
 
/* ❌ 错误：永久保留 will-change */
.sidebar {
  will-change: transform;  /* 永远不释放，浪费内存 */
}

/* ✅ 场景 A：合成线程动画 - 即使主线程繁忙也流畅 */
.smooth-animation {
  animation: slide 2s ease-in-out infinite alternate;
  /* transform 动画在合成线程运行 */
}
 
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(200px); }
}
 
/* ❌ 场景 B：主线程动画 - 主线程繁忙时会卡顿 */
.janky-animation {
  animation: move 2s ease-in-out infinite alternate;
  /* left 动画在主线程运行 */
}
 
@keyframes move {
  from { left: 0; }
  to { left: 200px; }
}

// 模拟主线程繁忙
function heavyComputation() {
  const start = performance.now();
  while (performance.now() - start < 100) {
    // 阻塞主线程 100ms
    Math.random();
  }
}
 
// 每 200ms 执行一次重计算
setInterval(heavyComputation, 200);
 
// 此时 .smooth-animation 仍然流畅（合成线程）
// 但 .janky-animation 会明显卡顿（主线程被阻塞）

/* FLIP 技术示例：用 transform 替代布局属性动画 */
.card {
  /* 初始位置 */
  transform: translateX(0) scale(1);
  transition: transform 0.3s ease-out;
}
 
.card.expanded {
  /* 用 transform 模拟 width/height 变化 */
  transform: scale(1.5);
}
 
/* 使用 contain 创建独立的合成上下文 */
.animation-container {
  contain: layout style paint;
  /* 内部动画不会影响外部布局 */
}

/* ✅ 策略 1：在交互前设置，交互后移除 */
.card {
  transition: transform 0.3s ease;
}
 
.card:hover {
  will-change: transform;  /* 悬停时提示 */
  transform: translateY(-5px);
}
 
.card:not(:hover) {
  will-change: auto;  /* 非悬停时释放 */
}
 
/* ✅ 策略 2：动画元素在动画期间使用 */
@keyframes slideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
 
.slide-in {
  will-change: transform, opacity;
  animation: slideIn 0.5s ease-out;
}
 
/* 动画结束后通过 JS 移除 will-change */

// ✅ 策略 3：JavaScript 精确控制
class AnimationOptimizer {
  constructor(element) {
    this.element = element;
  }
  
  prepare() {
    // 动画开始前：提前一帧设置 will-change
    requestAnimationFrame(() => {
      this.element.style.willChange = 'transform, opacity';
    });
  }
  
  cleanup() {
    // 动画结束后：延迟移除 will-change
    requestAnimationFrame(() => {
      this.element.style.willChange = 'auto';
    });
  }
  
  animate(keyframes, options) {
    this.prepare();
    const animation = this.element.animate(keyframes, options);
    animation.onfinish = () => this.cleanup();
    animation.oncancel = () => this.cleanup();
    return animation;
  }
}
 
// 使用示例
const card = document.querySelector('.card');
const optimizer = new AnimationOptimizer(card);
 
card.addEventListener('click', () => {
  optimizer.animate([
    { transform: 'scale(1)', opacity: 1 },
    { transform: 'scale(1.1)', opacity: 0.8 },
    { transform: 'scale(1)', opacity: 1 }
  ], { duration: 300, easing: 'ease-in-out' });
});

/* ❌ 错误 1：全局设置 will-change */
* {
  will-change: transform;  /* 为所有元素创建合成层，内存爆炸 */
}
 
/* ❌ 错误 2：永久保留 will-change */
.sidebar {
  will-change: transform;  /* 永远不释放，持续占用内存 */
}
 
/* ❌ 错误 3：设置过多属性 */
.element {
  will-change: transform, opacity, top, left, width, height;
  /* 提示过多属性变化，浏览器无法有效优化 */
}
 
/* ❌ 错误 4：在不需要动画的元素上使用 */
.static-text {
  will-change: transform;  /* 永远不会动画的元素 */
}

/* 移动元素 - 替代 top/left */
.movable {
  position: absolute;
  /* ❌ 避免 */
  /* left: 100px; */
  /* top: 50px; */
  
  /* ✅ 推荐 */
  transform: translate(100px, 50px);
}
 
/* 缩放元素 - 替代 width/height */
.scalable {
  width: 100px;
  height: 100px;
  
  /* ❌ 避免 */
  /* width: 150px; */
  /* height: 150px; */
  
  /* ✅ 推荐 */
  transform: scale(1.5);
  transform-origin: center center;
}
 
/* 旋转动画 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
 
.spinner {
  animation: rotate 1s linear infinite;
}
 
/* 组合变换 - 注意顺序（从右向左执行） */
.combined {
  /* 先缩放，再旋转，最后平移 */
  transform: translate(100px) rotate(45deg) scale(2);
}

/* 淡入淡出动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
.fade-element {
  animation: fadeIn 0.5s ease-out;
}
 
/* 结合 transform 创建复合动画 */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
 
.slide-in {
  animation: slideIn 0.5s ease-out;
}

// FLIP 动画示例
function flipAnimation(element, newStyles) {
  // 1. First - 记录初始位置
  const first = element.getBoundingClientRect();
  
  // 2. 应用新样式
  Object.assign(element.style, newStyles);
  
  // 3. Last - 记录最终位置
  const last = element.getBoundingClientRect();
  
  // 4. Invert - 计算差异并用 transform 反转
  const deltaX = first.left - last.left;
  const deltaY = first.top - last.top;
  const deltaW = first.width / last.width;
  const deltaH = first.height / last.height;
  
  // 先设置到初始位置（用 transform）
  element.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(${deltaW}, ${deltaH})`;
  element.style.transformOrigin = 'top left';
  
  // 5. Play - 动画到最终位置
  requestAnimationFrame(() => {
    element.style.transition = 'transform 0.3s ease-out';
    element.style.transform = '';
    
    element.addEventListener('transitionend', () => {
      element.style.transition = '';
      element.style.transformOrigin = '';
    }, { once: true });
  });
}

/* 方法一：3D 变换（最常用） */
.gpu-accelerated {
  transform: translateZ(0);
  /* 或 */
  transform: translate3d(0, 0, 0);
}
 
/* 方法二：will-change 属性（推荐） */
.will-change-element {
  will-change: transform;
}
 
/* 方法三：特定 CSS 属性（自动触发） */
.layer-element {
  /* 以下属性会自动创建新图层 */
  transform: translateZ(0);
  filter: blur(0);
  position: fixed;
  backface-visibility: hidden;
}

/* ❌ 错误：过度使用 will-change */
* {
  will-change: transform;  /* 消耗大量内存 */
}
 
/* ❌ 错误：全局应用 GPU 加速 */
* {
  transform: translateZ(0);  /* 创建过多图层 */
}
 
/* ✅ 正确：仅在需要时使用 */
.animate-on-hover:hover {
  will-change: transform;
}
 
/* ✅ 正确：动画元素 */
@keyframes slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
 
.slider {
  will-change: transform;
  animation: slide 0.5s ease-out;
}

/* GPU 图层会占用内存 */
.layer {
  /* 每个图层约占用：宽度 × 高度 × 4 字节 × 设备像素比² */
  /* 1000px × 1000px 图层在 2x 屏幕 ≈ 16MB 内存 */
  transform: translateZ(0);
}
 
/* 限制图层数量 */
.container {
  contain: strict;  /* 限制渲染范围 */
}
 
/* 移除不需要的图层 */
.inactive {
  will-change: auto;
  transform: none;
}

/* 完全隔离 */
.isolated {
  contain: strict;  /* 等同于 contain: size layout paint */
}
 
/* 内容隔离 */
.content-card {
  contain: content;  /* 等同于 contain: layout paint */
}
 
/* 布局隔离 */
.widget {
  contain: layout;
}
 
/* 绘制隔离 - 内容不会溢出 */
.overflow-hidden {
  contain: paint;
  overflow: hidden;
}
 
/* 实际应用：复杂组件 */
.data-grid {
  contain: strict;
  width: 100%;
  height: 500px;
  overflow: auto;
}
 
/* 实际应用：文章卡片 */
.article-card {
  contain: layout paint;
  /* 内部变化不会影响其他卡片的重排 */
}

/* 长列表优化 */
.list-item {
  /* 屏幕外元素不渲染 */
  content-visibility: auto;
  /* 必须指定高度，避免布局偏移 */
  contain-intrinsic-size: 0 200px;
}
 
/* 手动隐藏 */
.hidden-content {
  content-visibility: hidden;
  /* 占位但内容不渲染 */
}
 
/* 折叠面板 */
.collapsible-panel {
  content-visibility: hidden;
  contain-intrinsic-size: 0 50px;  /* 折叠时高度 */
}
 
.collapsible-panel.expanded {
  content-visibility: visible;
}
 
/* 分页内容 */
.page {
  content-visibility: auto;
  contain-intrinsic-size: 100vh;
}
 
.page.active {
  content-visibility: visible;
}

/* 最佳实践：组合使用 */
.card {
  contain: layout paint;
  content-visibility: auto;
  contain-intrinsic-size: 0 200px;
}
 
/* 动画容器使用 contain 隔离 */
.animation-container {
  contain: layout;
  position: relative;
}
 
.animation-container .animated-element {
  position: absolute;
  animation: slide 1s ease;
}
 
@keyframes slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

// 基础用法
function animate(timestamp) {
  // 更新动画状态
  element.style.transform = `translateX(${progress}px)`;
  
  // 请求下一帧
  requestAnimationFrame(animate);
}
 
requestAnimationFrame(animate);
 
// 时间控制动画
let startTime = null;
const duration = 1000;  // 1秒
 
function animate(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsed = timestamp - startTime;
  const progress = Math.min(elapsed / duration, 1);
  
  // 使用缓动函数
  const easedProgress = easeOutCubic(progress);
  element.style.transform = `translateX(${easedProgress * 500}px)`;
  
  if (progress < 1) {
    requestAnimationFrame(animate);
  }
}
 
requestAnimationFrame(animate);
 
// 常用缓动函数
function easeOutCubic(t) {
  return 1 - Math.pow(1 - t, 3);
}
 
function easeInOutQuad(t) {
  return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
}
 
function easeOutElastic(t) {
  const c4 = (2 * Math.PI) / 3;
  return t === 0 ? 0 : t === 1 ? 1 :
    Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
}

// ❌ 错误：强制同步布局（读写交替）
for (let i = 0; i < elements.length; i++) {
  const height = elements[i].offsetHeight;  // 读 - 触发重排
  elements[i].style.height = height * 2 + 'px';  // 写 - 使布局失效
  // 下一次循环的读取又触发重排...
}
 
// ✅ 正确：批量读取，批量写入
// 先读取所有值
const heights = elements.map(el => el.offsetHeight);
 
// 再写入所有值
elements.forEach((el, i) => {
  el.style.height = heights[i] * 2 + 'px';
});
 
// ✅ 更好：使用 FastDOM 模式
class FastDOM {
  constructor() {
    this.reads = [];
    this.writes = [];
    this.scheduled = false;
  }
  
  measure(fn) {
    this.reads.push(fn);
    this.scheduleFlush();
  }
  
  mutate(fn) {
    this.writes.push(fn);
    this.scheduleFlush();
  }
  
  scheduleFlush() {
    if (!this.scheduled) {
      this.scheduled = true;
      requestAnimationFrame(() => this.flush());
    }
  }
  
  flush() {
    // 先执行所有读取
    const reads = this.reads;
    this.reads = [];
    reads.forEach(fn => fn());
    
    // 再执行所有写入
    const writes = this.writes;
    this.writes = [];
    writes.forEach(fn => fn());
    
    this.scheduled = false;
    
    // 如果还有任务，继续调度
    if (this.reads.length || this.writes.length) {
      this.scheduleFlush();
    }
  }
}
 
const fastdom = new FastDOM();
 
// 使用
fastdom.measure(() => {
  return element.offsetHeight;
});
fastdom.mutate(() => {
  element.style.height = '200px';
});

// 基础动画
const animation = element.animate([
  { transform: 'translateX(0)', opacity: 1 },
  { transform: 'translateX(100px)', opacity: 0.5 }
], {
  duration: 1000,
  easing: 'ease-out',
  fill: 'forwards'
});
 
// 控制动画
animation.pause();
animation.play();
animation.reverse();
animation.finish();
animation.cancel();
 
// 动画事件
animation.onfinish = () => {
  console.log('动画完成');
};
 
animation.oncancel = () => {
  console.log('动画取消');
};
 
// 关键帧动画
element.animate([
  { offset: 0, transform: 'scale(1)' },
  { offset: 0.25, transform: 'scale(1.1)' },
  { offset: 0.5, transform: 'scale(0.9)' },
  { offset: 0.75, transform: 'scale(1.05)' },
  { offset: 1, transform: 'scale(1)' }
], {
  duration: 600,
  easing: 'ease-in-out'
});
 
// 链式动画
const animation1 = element.animate(
  [{ transform: 'translateY(0)' }, { transform: 'translateY(-50px)' }],
  { duration: 300, fill: 'forwards' }
);
 
animation1.finished.then(() => {
  return element.animate(
    [{ transform: 'translateY(-50px)' }, { transform: 'translateY(0)' }],
    { duration: 300, fill: 'forwards' }
  );
});

// FPS 监控
class FPSMonitor {
  constructor() {
    this.fps = 0;
    this.frames = 0;
    this.lastTime = performance.now();
  }
  
  tick() {
    this.frames++;
    const now = performance.now();
    
    if (now >= this.lastTime + 1000) {
      this.fps = this.frames;
      this.frames = 0;
      this.lastTime = now;
      console.log(`FPS: ${this.fps}`);
    }
    
    requestAnimationFrame(() => this.tick());
  }
  
  start() {
    requestAnimationFrame(() => this.tick());
  }
}
 
// 长任务检测
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('长任务:', entry.duration + 'ms');
  }
});
 
observer.observe({ entryTypes: ['longtask'] });
 
// 帧时间检测
function measureFrameTime() {
  const start = performance.now();
  
  requestAnimationFrame(() => {
    const frameTime = performance.now() - start;
    if (frameTime > 16.67) {  // 超过 60fps
      console.warn(`帧时间过长: ${frameTime.toFixed(2)}ms`);
    }
    measureFrameTime();
  });
}
 
measureFrameTime();

// 检测重排
const element = document.querySelector('.test');
console.time('layout');
const height = element.offsetHeight;  // 触发重排
console.timeEnd('layout');
 
// Performance API
performance.mark('animation-start');
 
// 执行动画代码...
 
performance.mark('animation-end');
performance.measure('animation', 'animation-start', 'animation-end');
 
const measure = performance.getEntriesByName('animation')[0];
console.log(`动画耗时: ${measure.duration}ms`);
 
// 检测内存
if (performance.memory) {
  console.log(`
    已用堆大小: ${(performance.memory.usedJSHeapSize / 1048576).toFixed(2)}MB
    总堆大小: ${(performance.memory.totalJSHeapSize / 1048576).toFixed(2)}MB
    堆限制: ${(performance.memory.jsHeapSizeLimit / 1048576).toFixed(2)}MB
  `);
}

/* 使用 @supports 检测属性支持 */
@supports (will-change: transform) {
  .optimized {
    will-change: transform;
  }
}
 
@supports (content-visibility: auto) {
  .lazy-content {
    content-visibility: auto;
    contain-intrinsic-size: 200px;
  }
}
 
/* 媒体查询检测性能模式 */
@media (prefers-reduced-data: reduce) {
  /* 减少数据使用 */
  .image-background {
    background-image: none;
  }
}

/* 方案一：使用高性能属性 */
.element {
  transform: translateX(100px);  /* 替代 left */
  opacity: 0.5;                  /* 替代 visibility */
}
 
/* 方案二：启用 GPU 加速 */
.element {
  transform: translateZ(0);
  will-change: transform;
}
 
/* 方案三：减少动画复杂度 */
@keyframes simple-animation {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

/* 强制创建独立图层 */
.element {
  backface-visibility: hidden;
  perspective: 1000px;
  transform: translateZ(0);
}
 
/* 固定 3D 上下文 */
.container {
  transform-style: preserve-3d;
}
 
/* 避免闪烁 */
.element {
  -webkit-font-smoothing: antialiased;
  -webkit-backface-visibility: hidden;
}

/* 减少移动端动画复杂度 */
@media (max-width: 768px) {
  .complex-animation {
    animation: none;
    transition: none;
  }
  
  /* 简化动画 */
  .simplified {
    animation-duration: 0.1s;
    animation-iteration-count: 1;
  }
}
 
/* 使用触摸优化 */
.touch-element {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
 
/* 减少重绘区域 */
.mobile-optimized {
  contain: strict;
  content-visibility: auto;
  contain-intrinsic-size: 300px;
}

/* 优化滚动容器 */
.scroll-container {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  contain: strict;
}
 
/* 固定元素优化 */
.fixed-header {
  position: fixed;
  top: 0;
  will-change: transform;
}
 
/* 懒加载内容 */
.lazy-section {
  content-visibility: auto;
  contain-intrinsic-size: 500px;
}

// 滚动事件节流
let ticking = false;
 
window.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      // 处理滚动逻辑
      ticking = false;
    });
    ticking = true;
  }
});
 
// Intersection Observer 替代滚动检测
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, {
  rootMargin: '50px'
});
 
document.querySelectorAll('.lazy-element').forEach(el => {
  observer.observe(el);
});

/* 预热 GPU */
.preload {
  transform: translateZ(0);
}
 
/* 预设 will-change */
.animated-element {
  will-change: transform, opacity;
}
 
/* 减少首帧计算 */
@keyframes optimized-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

transform, opacity > filter > color, background > width, height, margin
     (仅合成)        (部分合成)      (重绘)              (重排)

/* 尊重用户偏好 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
 
/* 渐进增强 */
.animated-element {
  animation: fadeIn 0.5s ease-out;
}
 
@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none;
    opacity: 1;
  }
}

// JavaScript 检测用户偏好
const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
);
 
if (prefersReducedMotion.matches) {
  document.documentElement.classList.add('reduce-motion');
}
 
prefersReducedMotion.addEventListener('change', (e) => {
  document.documentElement.classList.toggle('reduce-motion', e.matches);
});

/* 优化的动画元素模板 */
.animated-element {
  /* 基础样式 */
  position: relative;
  
  /* 性能优化 */
  will-change: transform, opacity;
  transform: translateZ(0);
  
  /* 过渡效果 */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
 
.animated-element:hover {
  transform: translateY(-5px);
  opacity: 0.9;
}
 
/* 动画结束后清理 */
.animated-element.animation-complete {
  will-change: auto;
}
 
/* 可访问性 */
@media (prefers-reduced-motion: reduce) {
  .animated-element {
    transition: none;
    transform: none;
  }
}