Network Information API：带宽类型与自适应加载

---

title: Network Information API：带宽类型与自适应加载

keywords:

• Network Information
• effectiveType
• downlink
• rtt
• saveData

description: 说明网络信息的读取与变更事件，根据带宽类型与用户省流偏好调整资源加载策略，并给出示例与验证。

categories:

• 应用软件
• 网络应用

---

概述

Network Information API 暴露连接类型与带宽估计（effectiveType/downlink/rtt）及省流偏好（saveData），用于在弱网场景采取降级策略。

示例

const conn = navigator.connection
if (conn) {
  console.log(conn.effectiveType, conn.downlink, conn.rtt, conn.saveData)
  conn.addEventListener('change', () => {
    // 根据网络变化调整资源策略（图片质量/视频码率/并发数）
  })
}

工程建议

• 协同省流：当 saveData=true 或 effectiveType 为 2g/3g 降低体积与并发。
• 观测与回退：记录网络变化与失败率；不支持的浏览器回退到经验策略。
• 与缓存：结合缓存与预加载避免弱网重复下载。

参考与验证

• MDN Network Information 文档：https://developer.mozilla.org/docs/Web/API/Network_Information_API
• web.dev 指南：https://web.dev/articles/optimizing-network-api
• Chrome 平台文档：https://developer.chrome.com/docs/web-platform/network-information/