Back to Details

performance-optimization

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Performance Optimization

性能优化

Diagnose and fix slow or janky animations using Disney's 12 principles.
利用迪士尼动画12原则诊断并修复缓慢或卡顿的动画问题。

Problem Indicators

问题表现

  • Frame rate drops below 60fps
  • Stuttering or choppy motion
  • UI feels sluggish
  • Battery drain on mobile
  • Layout thrashing
  • 帧率降至60fps以下
  • 动画出现卡顿或断续
  • UI界面反应迟缓
  • 移动设备电量消耗过快
  • 布局颠簸

Diagnosis by Principle

基于动画原则的诊断方案

Straight Ahead vs Pose-to-Pose

逐帧动画与关键帧动画

Issue: Calculating every frame in real-time Fix: Use pose-to-pose (keyframe) animation. Let the browser interpolate between states using CSS transitions or 
will-change
.
问题：实时计算每一帧 修复方案：使用关键帧动画（Pose-to-Pose）。通过CSS transitions或
will-change
让浏览器在状态间进行插值计算。

Timing

时序

Issue: Too many simultaneous animations Fix: Stagger animations. Offset start times by 50-100ms to reduce concurrent calculations.
问题：同时运行的动画过多 修复方案：错开动画启动时间。将动画开始时间偏移50-100毫秒，以减少并发计算量。

Secondary Action

次要动作

Issue: Too many secondary effects Fix: Remove non-essential secondary animations on low-power devices. Use 
prefers-reduced-motion
query.
问题：次要动画效果过多 修复方案：在低功耗设备上移除非必要的次要动画。使用
prefers-reduced-motion
媒体查询。

Solid Drawing

扎实绘制

Issue: Animating expensive properties (width, height, top, left) Fix: Only animate 
transform
and 
opacity
. These are GPU-accelerated and skip layout/paint.
问题：对性能开销大的属性（width、height、top、left）执行动画 修复方案：仅对
transform
和
opacity
执行动画。这些属性由GPU加速，且无需经过布局/绘制阶段。

Staging

舞台呈现

Issue: Animating off-screen elements Fix: Only animate what's visible. Use Intersection Observer to pause off-screen animations.
问题：对屏幕外元素执行动画 修复方案：仅对可见元素执行动画。使用Intersection Observer暂停屏幕外的动画。

Quick Fixes

快速修复方案

  1. Replace JS animations with CSS - Browser-optimized
  2. Use 
    transform
    instead of position properties     - GPU layer
  3. Add 
    will-change
    sparingly     - Hints to browser
  4. Reduce simultaneous animations - Stagger or sequence
  5. Lower animation complexity on mobile - Detect device capability
  1. 用CSS动画替代JS动画 - 浏览器原生优化
  2. 使用
    transform
    替代位置属性     - 启用GPU图层
  3. 谨慎使用
    will-change
     - 向浏览器提供性能优化提示
  4. 减少同时运行的动画数量 - 错开或按顺序执行
  5. 降低移动端动画复杂度 - 检测设备性能

Troubleshooting Checklist

故障排查清单

  • Check DevTools Performance tab for long frames
  • Verify animations use transform/opacity only
  • Count simultaneous animations (keep under 3-4)
  • Test on lowest-spec target device
  • Check for layout thrashing (forced reflows)
  • Verify 
    will-change
    isn't overused
  • Test with CPU throttling enabled
  • Check if animations pause when tab is hidden
  • 检查DevTools性能面板中的长帧
  • 确认动画仅使用transform/opacity属性
  • 统计同时运行的动画数量（保持在3-4个以内）
  • 在最低配置的目标设备上测试
  • 检查是否存在布局颠簸（强制重排）
  • 确认
    will-change
    未被过度使用
  • 开启CPU节流进行测试
  • 检查标签页隐藏时动画是否暂停

Code Pattern

代码示例

css
/* Fast */
.element {
  will-change: transform;
  transition: transform 200ms ease-out;
}
.element:hover {
  transform: translateY(-4px);
}

/* Slow - avoid */
.element:hover {
  top: -4px; /* Triggers layout */
}
css
/* Fast */
.element {
  will-change: transform;
  transition: transform 200ms ease-out;
}
.element:hover {
  transform: translateY(-4px);
}

/* Slow - avoid */
.element:hover {
  top: -4px; /* Triggers layout */
}