H5网络信息API用于自适应加载

H5的Network Information API可通过判断网络类型优化加载策略。①使用navigator.connection可获取网络类型及在线状态；②根据effectiveType值（如slow-2g、4g、5g）决定加载高清资源或轻量内容；③通过监听change事件动态调整加载策略；④需注意兼容性、iOS支持有限及隐私模式限制等问题。

有时候加载网页慢，不是网络差，也不是服务器慢，而是没根据当前网络情况做优化。H5 的 Network Information API 就是为了解决这个问题而生的，它能让你知道用户当前用的是 Wi-Fi、4G 还是 5G，甚至能判断是否在线，从而决定加载策略。

获取当前网络状态

使用 navigator.connection 可以拿到当前设备的网络信息。比如：

if (navigator.connection) {
  console.log('网络类型:', navigator.connection.effectiveType);
  console.log('是否在线:', navigator.onLine ? '是' : '否');
}

这样就能知道用户是连着 Wi-Fi 还是用流量，甚至能判断网速大致处于什么水平。比如 effectiveType 返回 4g 或 slow-2g，你就可以据此调整资源加载方式。

根据网络类型调整加载策略

不同的网络状况，适合不同的加载策略。比如：

• Wi-Fi 或 5G 环境：可以放心加载高清图片、视频预览或完整版 JS/CSS。
• 4G 或中等速度：适当压缩图片质量，延迟加载非关键内容。
• 低速网络（如 slow-2g）：优先加载文本内容，延迟加载图片和脚本，甚至使用占位图。

举个例子，你可以这样写：

const preloadStrategy = () => {
  const type = navigator.connection.effectiveType;

  if (type === 'slow-2g') {
    // 加载轻量级资源
    loadTextOnly();
  } else if (type === '4g' || type === '5g') {
    // 加载高清图片和视频
    loadFullContent();
  } else {
    // 默认加载中等质量资源
    loadDefaultContent();
  }
};

这在移动端尤其有用，避免用户因为加载太慢而离开。

监听网络变化，动态调整

网络状态不是一成不变的，比如从地铁进到办公室，可能从 4G 切到了 Wi-Fi。这时候可以通过监听变化来动态调整页面内容：

navigator.connection.addEventListener('change', () => {
  console.log('网络状态改变，重新评估加载策略');
  preloadStrategy();
});

不过要注意，这个监听器并不是所有浏览器都支持，目前主要在 Chrome 和基于 Chromium 的浏览器里可用。所以建议加上兼容性判断：

if ('connection' in navigator && 'effectiveType' in navigator.connection) {
  // 支持 Network Info API
  preloadStrategy();
  navigator.connection.addEventListener('change', preloadStrategy);
} else {
  // 不支持，走默认加载逻辑
  loadDefaultContent();
}

常见问题与注意事项

实际使用中需要注意几个细节：

• 并非所有设备都能提供完整的网络信息，尤其是 iOS 上的支持有限。
• effectiveType 是估算值，不一定完全准确，但足够用于决策。
• 在隐私模式下，部分浏览器可能会限制访问 network information。
• 不要依赖这个 API 来做安全相关判断，它只是用来优化体验的。

总的来说，H5 的 Network Information API 提供了一个实用的工具，帮助我们更智能地处理资源加载。虽然不能覆盖所有场景，但在大多数现代移动浏览器上已经可用。基本上就这些。

以上是H5网络信息API用于自适应加载的详细内容。更多信息请关注PHP中文网其他相关文章！