前端仔：让我看看你联网没

navigator.onLine 可以查看当前是否联网

 const logOnLine = () => console.log(navigator.onLine);
 //监听联网事件
 window.addEventListener("online", logOnLine);
 //监听断网事件
 window.addEventListener("'offline", logOnLine);`

我没要是想看当前网络的具体情况 navigator.connection的属性：

• downlink：整数，表示当前设备的带宽（以Mbit/s 为单位）舍入到最接近的25kbit/s。
• effectiveType：字符串枚举值，表示连接速度和质量。
  • slow-2g
    • 往返时间＞ 2000ms
    • 下行带宽＜ 50kbit/s
  • 2g
    • 2000ms ＞往返时间≥ 1400ms
    • 70kbit/s ＞下行带宽≥ 50kbit/s
  • 3g
    • 1400ms ＞往返时间≥ 270ms
    • 700kbit/s ＞下行带宽≥ 70kbit/s
  • 4g
    • 270ms ＞往返时间≥ 0ms
    • 下行带宽≥ 700kbit/s
• rtt：毫秒，表示当前网络实际的往返时间，舍入为最接近的25毫秒。
• saveData：布尔值，表示用户设备是否启用了“节流”（reduced data）模式。

  以下仅在 Chrome 操作系统中和移动端受支持，

• type：字符串枚举值，表示网络连接技术。
  • bluetooth：蓝牙。
  • cellular：蜂窝。
  • ethernet：以太网。
  • none：无网络连接。相当于navigator.onLine === false。
  • mixed：多种网络混合。
  • other：其他。
  • unknown：不确定。
  • wifi：Wi-Fi。
  • wimax：WiMAX。
• downlinkMax：整数，表示当前设备最大的下行带宽（以Mbit/s为单位），根据网络的第一跳来确定。因为第一跳不一定反映端到端的网络速度，所以这个值只能用作粗略的上限值。

按照下面的步骤可以 查看不同downlink的值

监听网络变化

    const changeHandler = ()=>{
      console.log(navigator.connection);//对象
      console.log(navigator.connection.downlink);// 
      console.log(navigator.connection.effectiveType);
      console.log(navigator.connection.rtt);
      console.log(navigator.connection.saveData);
    // console.log(navigator.connection.type);// 仅在 Chrome 操作系统中受支持
    //    console.log(navigator.connection.downlinkMax);//  仅在 Chrome 操作系统中受支持
}
 
    navigator.connection.addEventListener('change',changeHandler)

想要触发监听最简单就是：

还是修改这个使得“网络”进行波动

浏览器检测硬件的能力相当有限。不过，navigator 对象还是通过一些属性提供了基本信息。

1. 处理器核心数
   navigator.hardwareConcurrency 属性返回浏览器支持的处理器核心数量，包含表示核心数的一个整数值（如果核心数无法确定，这个值就是1）。关键在于，这个值表示浏览器可以并行执行的 最大工作线程数量，不一定是实际的CPU 核心数。就感觉十分没用
2. 设备内存大小
   navigator.deviceMemory 属性返回设备大致的系统内存大小，单位为 GB。
3. 最大触点数
   navigator.maxTouchPoints 属性返回触摸屏支持的最大关联触点数量，包含一个整数值。