html5检查网络

HTML5网络状态检测核心方法

Navigator.onLine属性

• 作用：检测设备当前网络连接状态
• 返回值：布尔值（true表示在线,false表示离线）
• 特点：
  • 只判断设备是否连接到网络
  • 无法区分WiFi/移动数据等具体连接类型
  • 部分浏览器存在延迟更新问题

Online/Offline事件

• 触发条件：
  • online事件：设备从离线切换到在线
  • offline事件：设备从在线切换到离线
• 典型应用场景：
  • 自动保存未提交的表单数据
  • 暂停视频播放
  • 显示离线提示界面

Network Information API（实验性）

网络状态检测方案对比表

常见问题与解决方案

Q1：如何实时监控网络质量变化？

A：结合online事件和Network Information API,可构建多维度监控：

const updateNetworkStatus = () => {
  if (navigator.onLine) {
    const connection = navigator.connection || { type: 'unknown' };
    console.log(`连接类型：${connection.type}`);
    console.log(`下行速度：${connection.downlink} Mbps`);
  } else {
    console.log('设备已离线');
  }
};
window.addEventListener('online', updateNetworkStatus);
window.addEventListener('offline', updateNetworkStatus);
window.addEventListener('resize', updateNetworkStatus); // 部分浏览器需触发更新

Q2：如何处理网络不稳定导致的请求失败？

A：采用指数退避算法重试机制：

function requestWithRetry(url, options = {}, retries = 3) {
  return fetch(url, options)
    .catch(err => {
      if (retries > 0 && navigator.onLine) {
        const delay = Math.pow(2, 3 retries)  1000; // 1s, 2s, 4s
        return new Promise(resolve => 
          setTimeout(() => requestWithRetry(url, options, retries 1).then(resolve), delay)
        );
      } else {
        throw err;
      }