移动端性能优化策略

渲染性能优化

移动端渲染性能直接影响用户体验，核心在于减少重绘和回流。使用transform和opacity属性实现动画效果，这两个属性不会触发回流：

.box {
  transform: translate3d(0, 0, 0);
  opacity: 0.9;
  transition: transform 0.3s ease;
}

避免频繁操作DOM，批量处理样式修改。使用requestAnimationFrame替代setTimeout实现动画：

function animate() {
  element.style.transform = `translateX(${position}px)`;
  position += 1;
  if (position < 100) {
    requestAnimationFrame(animate);
  }
}
requestAnimationFrame(animate);

网络请求优化

移动网络环境复杂，减少HTTP请求是关键。合并CSS/JS文件，使用雪碧图减少图片请求：

<!-- 合并前 -->
<link href="style1.css" rel="stylesheet">
<link href="style2.css" rel="stylesheet">

<!-- 合并后 -->
<link href="combined.css" rel="stylesheet">

启用HTTP/2多路复用，使用资源预加载：

<link rel="preload" href="critical.css" as="style">
<link rel="prefetch" href="next-page.html">

内存管理

移动设备内存有限，需特别注意内存泄漏。及时解绑事件监听器：

// 错误示例
element.addEventListener('click', onClick);

// 正确做法
function addListener() {
  element.addEventListener('click', onClick);
}
function removeListener() {
  element.removeEventListener('click', onClick);
}

避免内存泄漏的常见场景：

// 闭包导致的内存泄漏
function createHeavyObject() {
  const largeObj = new Array(1000000).fill('*');
  return function() {
    console.log(largeObj.length);
  };
}

图片优化策略

移动端图片加载需平衡质量和性能。使用响应式图片：

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <img src="medium.jpg" alt="示例图片">
</picture>

实现懒加载：

const lazyImages = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

lazyImages.forEach(img => observer.observe(img));

JavaScript执行优化

避免长任务阻塞主线程。将耗时操作拆分为多个任务：

// 优化前
function processLargeArray(array) {
  for (let i = 0; i < array.length; i++) {
    // 耗时操作
  }
}

// 优化后
function processInChunks(array, chunkSize, callback) {
  let index = 0;
  function doChunk() {
    const chunkEnd = Math.min(index + chunkSize, array.length);
    while (index < chunkEnd) {
      // 处理当前块
      callback(array[index]);
      index++;
    }
    if (index < array.length) {
      setTimeout(doChunk, 0);
    }
  }
  doChunk();
}

使用Web Worker处理CPU密集型任务：

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ data: largeArray });
worker.onmessage = function(e) {
  console.log('Result:', e.data);
};

// worker.js
self.onmessage = function(e) {
  const result = processData(e.data);
  self.postMessage(result);
};

缓存策略应用

合理利用缓存减少网络请求。Service Worker实现离线缓存：

// service-worker.js
const CACHE_NAME = 'v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/scripts/app.js'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

本地存储优化：

// 使用IndexedDB存储大量结构化数据
const request = indexedDB.open('MyDatabase', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const store = db.createObjectStore('data', { keyPath: 'id' });
  store.createIndex('name', 'name', { unique: false });
};

request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction('data', 'readwrite');
  const store = transaction.objectStore('data');
  
  store.put({ id: 1, name: 'Example', value: 'Data' });
};

触摸事件优化

移动端触摸事件需要特殊处理。避免300ms点击延迟：

<meta name="viewport" content="width=device-width, initial-scale=1">

使用touch-actionCSS属性优化滚动：

.scroll-container {
  touch-action: pan-y;
}

实现高性能的触摸事件处理：

let startY;
const container = document.querySelector('.scroll-container');

container.addEventListener('touchstart', (e) => {
  startY = e.touches[0].clientY;
}, { passive: true });

container.addEventListener('touchmove', (e) => {
  const y = e.touches[0].clientY;
  const dy = y - startY;
  // 处理滚动逻辑
}, { passive: true });

设备适配策略

针对不同设备特性进行优化。检测网络状态：

const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

if (connection) {
  console.log('网络类型:', connection.type);
  console.log('有效网络类型:', connection.effectiveType);
  console.log('数据节省模式:', connection.saveData);
}

根据设备内存调整策略：

if (navigator.deviceMemory) {
  const memory = navigator.deviceMemory; // GB为单位
  if (memory < 1) {
    // 低内存设备优化
  }
}

代码分割与按需加载

现代前端框架的代码分割实践。React动态导入：

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

Vue中的异步组件：

const AsyncComp = () => ({
  component: import('./AsyncComponent.vue'),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 200,
  timeout: 3000
})

渲染关键路径优化

优化首屏渲染时间。内联关键CSS：

<style>
  /* 关键CSS内容 */
  .header { position: fixed; top: 0; }
  .main-content { margin-top: 60px; }
</style>

异步加载非关键资源：

<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

使用<link rel=preload>预加载字体：

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

动画性能专项优化

实现60fps流畅动画。使用will-change提示浏览器：

.animated-element {
  will-change: transform, opacity;
}

避免动画期间触发布局抖动：

// 错误示例 - 触发强制同步布局
function animate() {
  element.style.left = element.offsetLeft + 1 + 'px';
  requestAnimationFrame(animate);
}

// 正确示例 - 使用transform
function animate() {
  element.style.transform = `translateX(${position}px)`;
  position += 1;
  requestAnimationFrame(animate);
}

构建工具优化

现代构建工具的移动端优化配置。Webpack代码分割：

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 244000,
    }
  }
};

Babel按需polyfill：

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',
      corejs: 3,
      targets: {
        ios: '10',
        android: '5'
      }
    }]
  ]
};