如何使用 JavaScript 检测用户的网络状态 (Network Information API)？-JavaScript中文网-JavaScript教程资源分享门户

如何使用 JavaScript 检测用户的网络状态 (Network Information API)？

推荐答案

-- -------------------- ---- -------
-- --------- ------- ----------- ---
-- ------------- -- ---------- -
  ----- ---------- - ---------------------

  -- -----------
  -------- ---------------- -
    ------ ------------------------- -- -- ---------- ----- ----- ---- - ---------
  -

  -- -----------------
  -------- -------------------- -
      ------ -------------------- -- -- ---- - -----
  -
  
  -- ---------
  -------- ------------------ -
    ------ --------------- -- -------
  -

    -- --------
  -------- ------------------ -
      ------ -------------------- -- ------------
  -
    
    -- --------
  -------- --------------------- -
    ------ ----------------------- -- --------------
  -

    --  --------
   -------- ------------------------- -
       ------------------------------------- ----------
   -


  -- ----
  -------------------- ------- ------------------
  ----------------- ----- ---------- ----------------------
  ------------------ ---- ---- -------- --------------------
    --------------------- -------- --------------------
    ---------------- -------- -------- -----------------------
  ------------------ -- -
    -------------------- -------- ------- ------------------
  ---

- ---- -
  -------------------- ----------- --- --- --------- -- ---- -----------
-

本题详细解读

Network Information API 介绍

Network Information API 提供了一种方法来获取用户设备网络连接的相关信息，例如网络连接类型、是否启用数据节省模式、延迟以及下行速度。这对于优化 Web 应用的性能，特别是针对不同的网络环境做出适应调整非常有用。例如：

根据网络类型加载不同质量的图片或视频： 在低速网络下，可以加载较低分辨率的资源以节省带宽。
限制数据传输： 如果用户启用了数据节省模式，应用可以减少数据传输，例如延迟同步或加载更轻量级的内容。
提供更好的用户体验： 可以向用户显示网络状态信息，并根据当前网络状况提供合适的提示和操作。

核心属性和方法

navigator.connection: 这是 Network Information API 的入口，返回一个 NetworkInformation 对象，其中包含网络连接的相关信息。
connection.effectiveType: 返回网络连接的有效类型，可能的值为：
- 'slow-2g'
- '2g'
- '3g'
- '4g'
- 'unknown'
connection.saveData: 返回一个布尔值，指示用户是否启用了数据节省模式。true 表示启用，false 表示未启用。
connection.rtt: 返回一个数字，表示往返时间（Round Trip Time）的毫秒数，代表网络延迟。
connection.downlink: 返回一个数字，表示下行速度（Mbps）
**connection.downlinkMax:**返回一个数字，表示最大下行速度（Mbps）
connection.addEventListener('change', callback): 用于监听网络连接状态变化。当网络连接类型、数据节省模式等发生变化时，会触发回调函数。

代码解析

检查 API 支持: 代码首先检查浏览器是否支持 Network Information API ('connection' in navigator)。如果不支持，则输出错误消息。
获取 connection 对象: 如果支持，则获取 navigator.connection 对象，并将其赋值给 connection 变量。
定义辅助函数: 定义了 getNetworkType(), isDataSaverEnabled(), getRoundTripTime(),getDownlinkSpeed(), getMaxDownlinkSpeed() 和 onNetworkChange() 函数来封装 API 的使用。这些函数分别返回当前的网络连接类型，是否启用了数据节省模式，延迟，下行速度，最大下行速度以及监听网络状态变化的函数。
示例用法: 在示例用法中，代码演示了如何调用定义的辅助函数来获取网络信息，并监听网络状态变化。当网络状态改变时，控制台会输出新的网络类型。
错误处理: 当浏览器不支持 Network Information API 时，提供错误提示信息。

注意事项

API 支持度: Network Information API 不是所有浏览器都支持，因此在使用前需要进行特性检测。
隐私问题: 需要注意，过度依赖 Network Information API 并过度利用网络信息可能会引起用户的隐私担忧，因此需要谨慎使用。
网络信息变化: 用户的网络连接状态可能会随时改变，因此建议监听 change 事件，以便及时做出调整。
数值的精准性： 该API所返回的值并非都是精确的，例如rtt延迟的值可能存在误差。

纠错
反馈