探索瀏覽器端的網絡速度測試

在最近的工做中，有一項內容是須要知道當前用戶的網絡狀況以採起對應的展現策略。這塊內容是我以前沒有研究過的，正好趁此機會了解一下。

那麼咱們要怎樣作才能獲取到用戶的網絡速度呢？下面是調研到的幾種方法。

1、經過 window.navigator.connection API 獲取網速

在 Chrome 瀏覽器種，咱們可使用 window.navigator.connection API 中的 downlink 屬性來獲取實時網速：

根據 MDN 文檔的說法，該 downlink 屬性是以每秒兆位爲單位返回有效帶寬估計值。好比當 downlink 的值是 5.0 的時候，理論下載速度多是 5Mb/s。

遺憾的是，這個 API 仍然處於實驗階段，部分功能在 iOS 或者 Safari 上都是不可用的，咱們須要找到另一種方式去測試網速。

2、部署服務，經過請求接口來獲取網速

這也是一些測速網站經常使用的作法，好比這個愛測速。

它請求了部署在其服務器上的幾個接口

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

來分別得到以下載速度、上傳速度、網絡延遲和網絡抖動等數據。

咱們能夠經過閱讀它的測速代碼 speedtest_worker.min.js 來一探究竟。簡單地來講，就是經過構造不一樣的 XHR 對象對接口進行請求，記錄開始和結束的時間，最後換算成具體的數據。

這種部署服務的方式比較主流，可是實現成本較高。另外還有一點須要注意，若是接口掛了，可能就會走到 error 的邏輯，會誤判爲用戶的網絡中斷了。

3、獲取靜態圖片資源

這是一種成本較低，也是很是通用的作法。咱們可讓瀏覽器經過 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 面板的基本吻合，且計算出來的下載速度也和上一節在 愛測速 獲得的數據基本一致，所以能夠得出這種方法靠譜的結論。

（完）