网络测速

前端如何测试网络的速度？

B 站视频播放时有一个自动根据网络环境调整分辨率的功能，想了解如何测速

然后我找了下面的方法测速

ajax 请求

利用 XMLHttpRequest 请求返回的 Content-length，和请求所需时间求得下载速度

const getSpeed = (url) => {
  return new Promise((resolve) => {
    const start = window.performance.now()
    const xhr = new XMLHttpRequest()
    xhr.open("GET", url)
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        const time = (window.performance.now() - start) / 1000
        const size = xhr.getResponseHeader("Content-Length") / 1024
        console.log(time, size)
        resolve(size / time)
      }
    }
    xhr.send()
  })
}

getSpeed("./worker.js").then((speed) => console.log(speed))

请求我本地的文件测得速度：

Image 对象 onload

const getSpeed = (url, fileSize) => {
  return new Promise((resolve) => {
    const start = window.performance.now()
    const img = new Image()
    img.src = url
    img.onload = (e) => {
      const time = (window.performance.now() - start) / 1000
      resolve(fileSize / time)
    }
  })
}

但是要注意如果请求服务器的文件，建立请求也需要消耗时间，最好是多次请求取平均值。

还有一个 downlink

downlink 的单位是 mbps, 所以要转化成 kb/s