JavaScript无法直接获取网络类型或实时带宽，但可通过fetch请求小资源、统计响应时间与成功率（如3次采样平均RTT≤800ms且成功率100%为强网）结合navigator.onLine验证，实现强弱网检测。
JavaScript 无法直接获取设备的网络类型（如 4G、Wi-Fi）或实时带宽，但可以通过发起 HTTP 请求并分析请求表现（如响应时间、是否超时、是否失败）来间接推断当前网络质量，实现“强弱网检测”。核心思路是：用可控的小资源（如空图片、轻量 JSON）发起多个请求，结合耗时、成功率、重试行为等指标判断网络状态。
1. 基于 fetch + 耗时阈值的简易检测
最常用方式：请求一个稳定、小体积、跨域友好的资源（如 https://www.php.cn/link/4d2fe2e8601f7a8018594d98f28706f2 或自己部署的 `/ping` 接口），设置合理超时，并统计响应时间。
- 响应时间
- 响应时间 500ms–2000ms → “中等网络”（如弱 4G 或拥挤 Wi-Fi）
- 超时（如 >3000ms）或请求失败 → “弱网/离线”
注意：需手动实现超时（fetch 本身不支持 timeout 参数），可用 Promises.race() 包裹：
function detectNetworkSpeed(timeout = 3000) {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), timeout);
<p>return Promise.race([
fetch('<a href="https://www.php.cn/link/4d2fe2e8601f7a8018594d98f28706f2">https://www.php.cn/link/4d2fe2e8601f7a8018594d98f28706f2</a>', { signal: controller })
.then(res => {
clearTimeout(timeoutId);
return res.json();
})
.then(() => 'strong') // 实际可记录 response time 后再分类
.catch(() => 'weak'),
new Promise(resolve => setTimeout(() => resolve('weak'), timeout))
]);
}2. 多次采样 + 统计稳定性（更可靠）
单次请求易受服务端抖动、DNS 延迟等干扰。建议连续发起 3–5 次轻量请求（间隔 100–300ms），丢弃异常值，计算平均 RTT 和成功率：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 成功率 100% 且平均耗时 ≤ 800ms → 强网
- 成功率 ≥ 60% 且平均耗时 ≤ 2500ms → 中网
- 成功率
可封装为：
async function probeNetwork(times = 3, interval = 200) {
const results = [];
for (let i = 0; i < times; i++) {
const start = Date.now();
try {
await fetch('https://www.php.cn/link/4d2fe2e8601f7a8018594d98f28706f2', {
method: 'HEAD', // 更轻，不传 body
cache: 'no-store'
});
results.push(Date.now() - start);
} catch (e) {
results.push(Infinity); // 标记失败
}
if (i < times - 1) await new Promise(r => setTimeout(r, interval));
}
const successRate = results.filter(t => t !== Infinity).length / times;
const avgRtt = results.filter(t => t !== Infinity).reduce((a, b) => a + b, 0) / Math.max(1, results.filter(t => t !== Infinity).length);
return { successRate, avgRtt };
}3. 结合 navigator.onLine 与请求验证
navigator.onLine 仅反映浏览器是否认为联网（如断网时返回 false），但 Wi-Fi 连上却无外网时仍返回 true —— 容易误判。正确做法是：
- 先查
navigator.onLine === false→ 直接标记“离线” - 若为 true，再执行上述 HTTP 探测 → 验证真实连通性与质量
同时监听网络变化：
window.addEventListener('online', () => console.log('network back'));
window.addEventListener('offline', () => console.log('network lost'));4. 实际使用建议
- 避免高频探测：首次进入页面或网络状态变更时触发，非持续轮询
- 资源选型：优先用
HEAD方法、静态小文件（如 1×1 gif）、CDN 托管的 ping 接口，减少负载 - 降级策略：弱网下可自动关闭图片懒加载、降低视频清晰度、启用骨架屏、禁用非关键 API
- 服务端配合：后端接口可返回
X-Response-Time或自定义 header 辅助判断
不复杂但容易忽略细节：超时控制、请求方法选择、结果缓存时效、以及和业务逻辑的联动设计。
