低性能设备适配策略

低性能设备（旧手机、低端电脑）处理复杂动画可能卡顿，需要适配降级策略。

性能检测方法

硬件并发检测

// 检测CPU核心数
const cores = navigator.hardwareConcurrency || 4;

if (cores < 4) {
  // 低性能设备
  applyLowPerformanceMode();
}

内存检测

// 检测设备内存（实验性API）
if (navigator.deviceMemory) {
  const memory = navigator.deviceMemory;  // GB单位

  if (memory < 4) {
    // 低内存设备
    reduceAnimations();
  }
}

运行时性能检测

function detectPerformance() {
  const start = performance.now();

  // 执行测试任务
  for (let i = 0; i < 100000; i++) {
    Math.sqrt(i);
  }

  const duration = performance.now() - start;

  // 根据耗时判断性能等级
  if (duration > 100) {
    return 'low';
  } else if (duration > 50) {
    return 'medium';
  }
  return 'high';
}

const performanceLevel = detectPerformance();

FPS实时检测

function measureFPS(duration = 2000) {
  return new Promise(resolve => {
    let frames = 0;
    let lastTime = performance.now();

    function count() {
      frames++;
      const now = performance.now();

      if (now - lastTime < duration) {
        requestAnimationFrame(count);
      } else {
        resolve(Math.round(frames * 1000 / duration));
      }
    }

    requestAnimationFrame(count);
  });
}

// 使用
measureFPS().then(fps => {
  if (fps < 30) {
    enableSimpleAnimations();
  }
});

动画降级策略

简化动画属性

/* 高性能设备：复杂动画 */
.complex-animation {
  transition: transform 0.5s, opacity 0.3s, box-shadow 0.3s;
}

/* 低性能设备：简化动画 */
.simple-animation {
  transition: opacity 0.3s;  /* 只保留opacity */
}

减少动画元素

/* 高性能：多元素动画 */
.list-item {
  transition: transform 0.3s, opacity 0.3s;
}

/* 低性能：减少动画元素 */
.list-item:nth-child(-n+5) {
  transition: opacity 0.3s;
}

.list-item:nth-child(n+6) {
  /* 无动画 */
}

去除非必要动画

/* 基础样式（低性能设备） */
.card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 增强动画（高性能设备） */
@supports (transform: translateZ(0)) and (will-change: transform) {
  .card {
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }
}

CSS降级方案

使用@media prefers-reduced-motion

/* 默认动画 */
.animated {
  transition: transform 0.5s ease;
}

.animated:hover {
  transform: scale(1.05);
}

/* 用户偏好减少动画 */
@media (prefers-reduced-motion: reduce) {
  .animated {
    transition: none;
  }

  .animated:hover {
    transform: none;
  }
}

禁用复杂动画

/* 低性能标记 */
.low-performance .particle-effect {
  display: none;
}

.low-performance .parallax-bg {
  background-attachment: scroll;  /* 禁用视差 */
}

.low-performance .floating-element {
  animation: none;  /* 禁用悬浮动画 */
}

简化阴影和滤镜

/* 高性能：复杂效果 */
.card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* 低性能：简化效果 */
.low-performance .card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  filter: none;
}

JavaScript适配

动态降级

// 检测后应用降级
function applyPerformanceMode() {
  const level = detectPerformance();

  if (level === 'low') {
    document.body.classList.add('low-performance');
    disableComplexAnimations();
  } else if (level === 'medium') {
    document.body.classList.add('medium-performance');
    simplifyAnimations();
  }
}

// 页面加载时执行
document.addEventListener('DOMContentLoaded', applyPerformanceMode);

动画队列限制

// 高性能：并行动画
function animateAll() {
  elements.forEach(el => {
    el.animate(/* ... */);
  });
}

// 低性能：限制并发
const MAX_CONCURRENT = 3;
let current = 0;

function animateLimited() {
  elements.slice(0, MAX_CONCURRENT).forEach(el => {
    el.animate(/* ... */, {
      onfinish: () => {
        current++;
        if (current < elements.length) {
          animateNext(current);
        }
      }
    });
  });
}

减少重绘触发

// 低性能设备减少DOM操作频率
const updateInterval = isLowPerformance ? 100 : 16;

function throttleUpdates() {
  let lastUpdate = 0;

  return function update(timestamp) {
    if (timestamp - lastUpdate >= updateInterval) {
      // 执行更新
      lastUpdate = timestamp;
    }
    requestAnimationFrame(update);
  };
}

资源优化

图片优化

/* 低性能设备使用小图 */
.background {
  background-image: url('large-bg.webp');
}

@media (max-width: 768px) {
  .background {
    background-image: url('small-bg.webp');
  }
}

.low-performance .background {
  background-image: url('optimized-bg.jpg');
}

减少GPU负担

/* 避免大尺寸合成层 */
.low-performance .hero-image {
  will-change: auto;  /* 移除GPU加速 */
  transform: none;
}

/* 使用静态图片替代动画 */
.low-performance .animated-bg {
  animation: none;
}

交互优化

简化悬停效果

/* 高性能 */
.card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transition: all 0.3s;
}

/* 低性能 */
.low-performance .card:hover {
  background-color: #f5f5f5;
  transition: background-color 0.1s;
}

减少滚动触发

// 高性能：滚动动画
let ticking = false;

window.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      updateParallax();
      ticking = false;
    });
    ticking = true;
  }
});

// 低性能：禁用滚动动画
if (isLowPerformance) {
  // 不绑定滚动事件
}

渐进增强策略

基础功能优先

/* 基础样式：所有设备 */
.button {
  background: #007bff;
  color: white;
  border-radius: 4px;
}

/* 增强动画：高性能设备 */
@supports (will-change: transform) {
  .button {
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
  }
}

功能检测增强

// 检测能力后增强
const supportsAnimation = CSS.supports('animation', 'test 1s');
const supportsTransform3d = CSS.supports('transform', 'translateZ(0)');

if (supportsAnimation && supportsTransform3d) {
  enableAdvancedAnimations();
}

监控与调整

运行时监控

function monitorPerformance() {
  let fpsHistory = [];
  let lastTime = performance.now();

  requestAnimationFrame(function check(timestamp) {
    const fps = 1000 / (timestamp - lastTime);
    lastTime = timestamp;

    fpsHistory.push(fps);

    // 最近10帧平均FPS
    if (fpsHistory.length >= 10) {
      const avgFPS = fpsHistory.reduce((a, b) => a + b) / fpsHistory.length;

      if (avgFPS < 30) {
        // 动态降级
        enableLowPerformanceMode();
      }

      fpsHistory = [];
    }

    requestAnimationFrame(check);
  });
}

monitorPerformance();

要点总结

1. 使用navigator.hardwareConcurrency和deviceMemory检测设备性能
2. 运行时FPS检测动态调整动画复杂度
3. prefers-reduced-motion响应用户动画偏好
4. 渐进增强：基础功能优先，动画可选增强
5. 低性能设备禁用复杂滤镜、阴影、视差效果
6. 动态监控FPS，低于阈值时自动降级