⚡ 移动端性能优化

移动端设备性能有限，网络不稳定，性能优化直接影响用户体验和转化率。

渲染性能优化

优化方向具体措施效果
减少重排重绘用 transform/opacity 做动画，避免修改 width/height/left/top⭐⭐⭐⭐⭐
使用 will-change提前告知浏览器哪些属性会变化⭐⭐⭐⭐
避免 layout thrashing批量读取和写入 DOM，不要交叉⭐⭐⭐⭐
使用 requestAnimationFrame动画统一用 rAF，避免 setInterval⭐⭐⭐⭐⭐
GPU 加速transform: translateZ(0) 创建独立图层⭐⭐⭐

动画性能最佳实践

/* ===== 高性能动画 CSS ===== */

/* ✅ 推荐：只触发 Composite 的动画属性 */
.good-animation {
  transform: translateX(100px);  /* GPU 加速，不触发重排 */
  opacity: 0.5;                  /* 不触发重排 */
}

/* ❌ 避免：触发 Layout 的属性 */
.bad-animation {
  width: 200px;    /* 触发重排 */
  left: 100px;     /* 触发重排 */
  margin: 20px;    /* 触发重排 */
}

/* ===== 使用 will-change 优化 ===== */
.smooth-scroll {
  will-change: transform;  /* 提前创建独立图层 */
}
/* ⚠️ 不要滥用，用完记得移除 */
.smooth-scroll.animation-done {
  will-change: auto;
}

资源加载优化

/* ===== 移动端资源加载策略 ===== */

/* ① 图片懒加载 */
<img src="placeholder.jpg" data-src="real.jpg" class="lazy">

// IntersectionObserver 实现
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      observer.unobserve(img);
    }
  });
});
document.querySelectorAll('.lazy').forEach(img => observer.observe(img));

/* ② 响应式图片 */
<img srcset="small.jpg 375w, medium.jpg 768w, large.jpg 1200w"
     sizes="(max-width: 768px) 100vw, 50vw"
     src="fallback.jpg" alt="">

/* ③ 字体优化 */
@font-face {
  font-family: 'Custom';
  src: url('font.woff2') format('woff2');  /* 优先 woff2 */
  font-display: swap;  /* 先显示系统字体，加载后替换 */
}

网络请求优化

📶 移动端网络优化清单
  • 减少请求数量：合并 CSS/JS，使用雪碧图或 SVG Sprite
  • 减小资源体积：Gzip/Brotli 压缩，代码 minify，图片 WebP
  • 利用缓存：合理设置 Cache-Control，使用 Service Worker
  • 预加载关键资源：<link rel="preload"> 关键 CSS/字体
  • 延迟加载非关键资源：JS 加 defer/async，非首屏图片懒加载
  • CDN 加速：静态资源上 CDN，减少延迟