JavaScript 浏览器 Network Information API 获取带宽怎么做-js教程-PHP中文网

network information api 不提供精确带宽值，而是通过 navigator.connection.downlink 返回估算的下行有效吞吐量（单位 mbps），需检测兼容性、仅限安全上下文、搭配 type 和 effectivetype 使用，并在不支持时降级处理。

javascript 浏览器 network information api 获取带宽怎么做

Network Information API 本身不直接提供“带宽”数值（如 Mbps），而是通过 navigator.connection 暴露网络连接的**类型**（如 '4g'、'wifi'）和**有效带宽估计值**（downlink，单位是 Mbps），这个 downlink 值是浏览器基于历史连接表现估算的**当前下行有效吞吐量**，可作为带宽的近似参考。

检查 API 是否可用并读取 downlink

该 API 是实验性特性，需先判断支持性，并注意它返回的是估算值，非实时精确测量：

仅在安全上下文（HTTPS 或 localhost）中可用；
downlink 返回数字（单位 Mbps），例如 10 表示约 10 Mbps 有效下行速率；
部分浏览器（如 Safari）暂不支持，需降级处理。

基础用法示例：

if ('connection' in navigator && navigator.connection) {
  const connection = navigator.connection;
  console.log('网络类型:', connection.type);        // 'wifi', '4g', 'ethernet' 等
  console.log('估算下行带宽:', connection.downlink, 'Mbps'); // 如 3.5、50、0.5
  console.log('有效带宽上限:', connection.downlinkMax, 'Mbps'); // 少数浏览器支持（如 Chrome）
}

监听网络变化动态更新

网络条件可能随时变化（如从 WiFi 切换到移动网络），可通过事件监听获取更新：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

监听 navigator.connection.onchange；
注意：事件触发不保证 downlink 一定变化，建议每次触发时重新读取；
避免高频日志或计算，合理节流。

示例：

const connection = navigator.connection;
function logNetwork() {
  console.log(`类型: ${connection.type}, 带宽: ${connection.downlink} Mbps`);
}
logNetwork();
connection.addEventListener('change', logNetwork);