关于javascript:探索浏览器端的网络速度测试

60次阅读

共计 1411 个字符，预计需要花费 4 分钟才能阅读完成。

在最近的工作中，有一项内容是须要晓得以后用户的网络状况以采取对应的展现策略。这块内容是我之前没有钻研过的，正好趁此机会理解一下。

那么咱们要怎么做能力获取到用户的网络速度呢？上面是调研到的几种办法。

一、通过 `window.navigator.connection` API 获取网速

在 Chrome 浏览器种，咱们能够应用 window.navigator.connection API 中的 downlink 属性来获取实时网速：

依据 MDN 文档的说法，该 downlink 属性是以每秒兆位为单位返回无效带宽估计值。比方当 downlink 的值是 5.0 的时候，实践下载速度可能是 5Mb/s。

遗憾的是，这个 API 依然处于试验阶段，局部性能在 iOS 或者 Safari 上都是不可用的，咱们须要找到另外一种形式去测试网速。

这也是一些测速网站罕用的做法，比方这个爱测速。

它申请了部署在其服务器上的几个接口

/cesu/index/garbage
/cesu/index/empty
/cesu/index/ip

来别离取得如下载速度、上传速度、网络提早和网络抖动等数据。

咱们能够通过浏览它的测速代码 speedtest_worker.min.js 来一探到底。简略地来说，就是通过结构不同的 XHR 对象对接口进行申请，记录开始和完结的工夫，最初换算成具体的数据。

这种部署服务的形式比拟支流，然而实现老本较高。另外还有一点须要留神，如果接口挂了，可能就会走到 error 的逻辑，会误判为用户的网络中断了。

这是一种老本较低，也是十分通用的做法。咱们能够让浏览器通过 GET 申请去获取一张既定大小的图片，剖析获取图片所需的工夫，即可换算成理论的下载速度。这种方法比第一大节的 window.navigator.connection.downlink 数据更精确，因为那个 API 的只是理论值，理论值还须要通过真正地去下载资源能力获取。

附上实现的代码，能够看出这种计划的确最为经济实惠：

function testDownloadSpeed ({url, size}) {return new Promise((resolve, reject) => {const img = new Image()
    img.src = `url?_t=${Math.random()}` // 加个工夫戳以防止浏览器只发动一次申请
    const startTime = new Date()

    img.onload = function () {
      const fileSize = size // 单位是 kb
      const endTime = new Date()
      const costTime = endTime - startTime
      const speed = fileSize / (endTime - startTime) * 1000 // 单位是 kb/s
      resolve({speed, costTime})
    }

    img.onerror = reject
  })
}

咱们在浏览器中拿这张大小为 146kb 的图片 https://raw.githubusercontent.com/jrainlau/imghost/master/29e9103b4a6801aa42f8f08ef65ad51c%20(1).ytuxq1kbb4f.png 试一下：

输入的耗时和 Network 面板的根本吻合，且计算出来的下载速度也和上一节在爱测速失去的数据基本一致，因而能够得出这种办法靠谱的论断。

（完）

正文完