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

--- title: Network Information API：带宽类型与自适应加载 keywords: - Network Information - effectiveType - downlink - rtt - saveData description: 说明网络信息的读取与变更事件，根据带宽类型与用户省流偏好调整资源加载策略，并给出示例与验证。 categories: - 应用软件 - 网络应用 --- 概述 Network Information API 暴露连接类型与带宽估计（`effectiveType/downlink/rtt`）及省流偏好（`saveData`），用于在弱网场景采取降级策略。 示例 ```js 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/