弱网环境下的体验优化

弱网环境的特点与挑战

弱网环境通常指网络延迟高、带宽低、连接不稳定的场景，比如移动网络、偏远地区或拥挤的公共WiFi。在这种环境下，用户会遇到页面加载缓慢、交互延迟、内容加载失败等问题。HTTP请求成功率可能低于90%，RTT（往返时间）超过500ms，带宽可能不足1Mbps。这些条件对前端性能提出了严峻挑战。

关键性能指标监控

建立完善的监控体系是优化的第一步。需要关注的核心指标包括：

// 使用Performance API获取关键指标
const [pageNav] = performance.getEntriesByType('navigation');
console.log({
  dnsTime: pageNav.domainLookupEnd - pageNav.domainLookupStart,
  tcpTime: pageNav.connectEnd - pageNav.connectStart,
  ttfb: pageNav.responseStart - pageNav.requestStart,
  downloadTime: pageNav.responseEnd - pageNav.responseStart,
  domReady: pageNav.domContentLoadedEventStart - pageNav.startTime,
  totalLoad: pageNav.loadEventStart - pageNav.startTime
});

// 监听离线事件
window.addEventListener('offline', () => {
  analytics.track('network_status', { online: false });
});

资源加载优化策略

资源压缩与精简

1. 图片优化：使用WebP格式，设置合适的压缩比

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback">
</picture>

2. 代码拆分：按需加载JavaScript

// 动态导入非关键模块
document.getElementById('btn').addEventListener('click', () => {
  import('./heavy-module.js')
    .then(module => module.init());
});

3. 字体子集化：仅包含使用的字符集

@font-face {
  font-family: 'SubsetFont';
  src: url('font.woff2') format('woff2');
  unicode-range: U+0020-007F; /* 仅包含ASCII字符 */
}

缓存策略优化

# Nginx配置示例
location /static/ {
  expires 1y;
  add_header Cache-Control "public, immutable";
  access_log off;
}

数据请求优化方案

请求合并与批处理

// 将多个API请求合并为一个
async function batchRequests(requests) {
  const response = await fetch('/batch', {
    method: 'POST',
    body: JSON.stringify(requests)
  });
  return response.json();
}

// 使用示例
batchRequests([
  {url: '/api/user', params: {id: 123}},
  {url: '/api/products', params: {page: 1}}
]).then(([user, products]) => {
  // 处理响应
});

数据分片与渐进加载

// 分片加载长列表
async function loadListChunk(start, size) {
  const res = await fetch(`/api/items?start=${start}&limit=${size}`);
  return res.json();
}

// 虚拟滚动中使用
window.addEventListener('scroll', () => {
  if (nearBottom()) {
    loadListChunk(currentPosition, 20)
      .then(items => appendToList(items));
  }
});

离线体验增强

Service Worker缓存策略

// service-worker.js
const CACHE_NAME = 'v1';
const OFFLINE_URL = '/offline.html';

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll([
        '/',
        OFFLINE_URL,
        '/styles/main.css',
        '/scripts/app.js'
      ]))
  );
});

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

本地数据持久化

// 使用IndexedDB存储关键数据
const dbPromise = idb.open('app-store', 1, upgradeDB => {
  upgradeDB.createObjectStore('keyval');
});

function setData(key, val) {
  return dbPromise.then(db => {
    const tx = db.transaction('keyval', 'readwrite');
    tx.objectStore('keyval').put(val, key);
    return tx.complete;
  });
}

用户界面适应性设计

骨架屏与占位符

<!-- 内容加载前的骨架屏 -->
<div class="skeleton">
  <div class="skeleton-header"></div>
  <div class="skeleton-line"></div>
  <div class="skeleton-line"></div>
</div>

<style>
.skeleton {
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.3; }
}
</style>

渐进式图像加载

// 使用IntersectionObserver实现懒加载
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

网络状态感知与适配

自适应质量切换

// 根据网络状况调整资源质量
function getNetworkQuality() {
  return navigator.connection.effectiveType || '4g';
}

function loadAdaptiveResource() {
  const quality = getNetworkQuality();
  const suffix = quality === 'slow-2g' ? '-low' : '';
  loadImage(`background${suffix}.jpg`);
}

请求优先级管理

<!-- 使用preload加载关键资源 -->
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="main.js" as="script">

<!-- 非关键资源使用低优先级 -->
<img src="decoration.jpg" loading="lazy" importance="low">

错误处理与重试机制

智能重试策略

// 指数退避重试
async function fetchWithRetry(url, options = {}, retries = 3) {
  try {
    const response = await fetch(url, options);
    if (!response.ok) throw new Error(response.statusText);
    return response;
  } catch (error) {
    if (retries <= 0) throw error;
    const delay = Math.pow(2, 4 - retries) * 1000;
    await new Promise(resolve => setTimeout(resolve, delay));
    return fetchWithRetry(url, options, retries - 1);
  }
}

优雅降级方案

// 检查功能可用性
function isFeatureSupported() {
  try {
    return 'someFeature' in window && 
           typeof window.someFeature === 'function';
  } catch {
    return false;
  }
}

// 使用降级方案
if (isFeatureSupported()) {
  useAdvancedFeature();
} else {
  useFallbackSolution();
}

性能测试与持续优化

真实网络条件测试

// Chrome DevTools模拟弱网
// 1. 打开开发者工具
// 2. 进入Network面板
// 3. 选择Throttling > Add...
// 4. 配置自定义网络条件：
//    - Latency: 500ms
//    - Download: 1Mbps
//    - Upload: 0.5Mbps
//    - Packet loss: 1%

性能预算监控

// 使用webpack性能预算
module.exports = {
  performance: {
    maxEntrypointSize: 102400, // 100KB
    maxAssetSize: 102400,
    hints: 'error'
  }
};