networkInformation.downlink測用戶網速方法詳解

更新時間：2023年05月05日 10:08:19 作者：不裁_caiii

這篇文章主要為大家介紹了networkInformation.downlink測用戶網速方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

Navigator API

在現代的web應用程序中，網速已經成為一個非常重要的指標。在保證用戶體驗的前提下，最大限度地提升頁面加載速度和可靠性已經成為了每一個前端開發(fā)者必須考慮的問題。而測量用戶的網絡帶寬則是實現這些目標的關鍵之一。

Navigator API是Web API的一部分，提供了瀏覽器信息和瀏覽器設置的訪問方式。其中，包括Connection接口允許我們查詢設備當前連接的網絡類型(例如：wifi, 4G等)、NetworkInformation接口提供連通性下載速度等有用信息以及其他許多可用于網絡相關操作的API。本文主要使用NetworkInformation接口以及其中的downlink屬性，該屬性表示2秒內取得的傳輸位元（bps）的平均值。

測量用戶網速的方法

獲取用戶網絡信息

首先我們需要獲取用戶的網絡信息，在 Navigator 對象中可以訪問該接口，并且通過調用networkInformation.downlink方法來獲取網絡帶寬。

const networkInformation = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
let downloadSpeedMbps = (networkInformation.downlink / 1024).toFixed(2);

此代碼查詢設備進行網絡連接的連接類型，然后返回適當的連接速度（按兆字節(jié)/秒計算）。如果設備不支持Connection API，那么我們應該使用其他方法來估計網絡速度。

完全隨機的下載請求

獲取網絡帶寬的另一個方法是使用HTTP GET請求。基本思路如下：創(chuàng)建一個完全隨機的URL，這樣應該避免了瀏覽器緩存策略的影響，并立即將其下載。

function testSpeed(randomValueKB) {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', `data:text/plain;charset=utf-8,${Math.random()*parseFloat(randomValueKB)*1024}`, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function () { 
      if (xhr.readyState == XMLHttpRequest.DONE) {
        const sizeMB = randomValueKB / 1024;
        const timeInSeconds = parseFloat(xhr.getResponseHeader("X-Timer"));
        const speedMbps = (sizeMB / timeInSeconds).toFixed(2);
        resolve(speedMbps);
      }
    };
    xhr.send(null);
  })
}

上面的代碼將隨機文件大小作為參數傳遞給testSpeed函數，僅用于這種目的的生成靜態(tài)內容。該函數返回一個Promise，該Promise將在XHR 200返回后解析并包含以Mb表示的下載速度。請注意，服務器必須在響應中包括自定義首部(X-Timer)，以便從JavaScript計算請求的多長時間并計算出定量結果。

獲取平均值

一旦我們測量出下載速度，我們需要對每次請求進行平均。這就需要調用testSpeed多次，并將結果添加到數組中：

function average(results) {
  if (results.length === 0) return 0;
  const sum = results.reduce((acc, curr) => acc + curr);
  return (sum / results.length).toFixed(2);
}
const speeds = [];
for (let i=0; i < 5; i++) {  // 進行5個請求
   testSpeed(550).then(speedMbps => speeds.push(speedMbps));
}
const avgSpeed = average(speeds);
console.log(avgSpeed);        // 打印結果

在上述代碼中，我們使用一個循環(huán)來執(zhí)行5個測試。最終，我們將所有結果傳遞給average函數，并且該函數將返回多個結果的平均值。