JavaScript 中 BOM 怎么获取网络连接的类型与速度-js教程-PHP中文网

bom 本身不提供网络类型和速度获取能力，但现代浏览器通过 network information api（navigator.connection）支持 type、downlink 和 effectivetype 属性，仅限 https 环境，精度低且兼容性有限；准确测速需应用层自行实现。

javascript 中 bom 怎么获取网络连接的类型与速度

JavaScript 的 BOM（Browser Object Model）本身没有直接提供获取网络连接类型（如 Wi-Fi、4G）或精确速度（如 Mbps）的 API。但现代浏览器通过 Network Information API（属于 BOM 的扩展）提供了部分能力，仅限于连接类型（type）和粗略的连接有效带宽估计（downlink），且支持度有限、精度不高。

Network Information API：获取连接类型和下行带宽估算

该 API 通过 navigator.connection 对象暴露，可用于判断大致网络环境：

connection.type：返回字符串，如 "wifi"、"4g"、"3g"、"2g"、"ethernet"、"bluetooth" 或 "unknown"。注意："wifi" 不代表一定是高速，"4g" 也不保证低延迟；部分桌面浏览器（如 Safari）不支持此属性。
connection.downlink：返回以 Mbps 为单位的**估算下行带宽**（如 10 表示约 10 Mbps），实际值是浏览器基于历史连接表现的粗略推测，并非实时测速结果，误差较大，且最小值通常为 0.5 Mbps。
connection.effectiveType：返回更抽象的连接质量等级，如 "slow-2g"、"2g"、"3g"、"4g"，由浏览器根据 rtt（往返时延）和 downlink 综合判定，用于响应式资源加载（如 lazy-load 图片）。

使用前提与注意事项

该 API 受严格限制：

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

仅在 HTTPS 环境下可用（本地 http://localhost 也允许）；HTTP 页面中 navigator.connection 为 undefined。
部分浏览器（如 Safari 桌面版、旧版 Edge）完全不支持；Android Chrome 和 Firefox Android 支持较好。
不能获取上传速度、信号强度、运营商名称等信息；也无法主动发起测速请求。
值可能随网络切换延迟更新，建议监听 connection.onchange 事件响应变化。

简单示例代码

可这样安全读取当前连接信息：

if ('connection' in navigator && navigator.connection) {
  const { type, downlink, effectiveType } = navigator.connection;
  console.log('连接类型:', type);           // "wifi"
  console.log('估算下行带宽:', downlink);   // 12.5 (Mbps)
  console.log('有效连接类型:', effectiveType); // "4g"
  
  navigator.connection.addEventListener('change', () => {
    console.log('网络状态已变更');
  });
}