HTML5如何借助NetworkInformation取网络数据_HTML5网络取数法【汇整】

NetworkInformation API 是 navigator.connection 暴露的只读接口，用于获取网络类型、有效带宽估算等元信息，支持监听状态变化，但不能发起请求或传输业务数据。

NetworkInformation API 不能直接“取网络数据”，它只提供设备当前网络连接的元信息（比如是否在线、类型、有效带宽估算），不负责发起 http 请求或传输业务数据。

NetworkInformation 是什么，能做什么

它是 navigator.connection 暴露的一个只读接口，用于监听网络状态变化。典型字段包括：type（"wifi"、"4g"、"bluetooth" 等）、effectiveType（"2g"、"3g"、"4g"、"slow-2g"）、downlink（估算下行 Mbps）、rtt（估算往返延迟 ms）。

它本身不发送请求、不解析响应、不替代 fetch 或 XMLHttpRequest。

• 适合做「自适应加载」：比如弱网时只加载缩略图、跳过视频自动播放
• 适合做「离线兜底提示」：监听 onchange 事件，在 type === "none" 时展示离线 ui
• 不适合做「数据拉取」：它没有 get()、send()、fetch() 这类方法

如何安全访问 navigator.connection

该 API 不是所有浏览器都支持，且部分字段（如 downlink）在非 https 环境下会被禁用（chrome 要求 secure context）。

立即学习“前端免费学习笔记（深入）”；

• 必须先检查 "connection" in navigator，否则在 safari 或旧版 edge 中会报 TypeError: Cannot read Property 'onchange' of undefined
• HTTPS 是硬性前提：HTTP 页面中 navigator.connection 可能存在但 downlink 和 rtt 返回 0 或 undefined
• effectiveType 在 Chrome 61+、Edge 79+、firefox 93+ 支持；Safari 目前（截至 Safari 17）仍不支持

if ("connection" in navigator) {   const connection = navigator.connection;   console.log(connection.effectiveType); // e.g. "4g"   console.log(connection.downlink);      // e.g. 10 (Mbps)   connection.addEventListener("change", () => {     console.log("Network changed:", connection.effectiveType);   }); } else {   console.warn("NetworkInformation API not supported"); }

常见误用：把它当 fetch 替代品

有人试图用 navigator.connection 直接“获取服务器返回的 jsON”，这是根本性误解。它不建立连接、不构造请求头、不处理 CORS、不解析响应体。

• 错误写法：navigator.connection.fetch("/api/data") → 报错：Cannot read property ‘fetch’ of undefined
• 正确组合方式：用 connection.effectiveType 决定是否发请求、发哪个版本的请求
• 例如：弱网时改用轻量接口 /api/data?lite=1，或延迟非关键请求

if (navigator.connection?.effectiveType === "slow-2g") {   fetch("/api/data?lite=1")     .then(r => r.json())     .then(data => renderLiteUI(data)); } else {   fetch("/api/data")     .then(r => r.json())     .then(data => renderFullUI(data)); }

兼容性差 + 信息粗糙，别依赖它做精确判断

effectiveType 是浏览器基于历史 RTT 和吞吐量估算的粗粒度分类，不是实时测量值；downlink 是平均估算，可能滞后数秒甚至更久；android webview 和 ios WKWebView 行为也不一致。

• 不要用 downlink > 5 当作“可以加载高清图”的绝对条件——用户实际带宽可能瞬间跌穿
• 不要监听一次就缓存结果——网络类型可能几秒内从 wifi 切到 4g，而事件监听没挂上就错过
• 生产环境建议叠加使用：结合 fetch 的 signal.timeout、首字节时间（TTFB）、资源加载耗时等真实指标做二次判断

真正决定“能不能取到数据”的，永远是 fetch 或 XMLHttpRequest 的执行结果，而不是 navigator.connection 的快照值。