networkInformation.downlink測用戶網(wǎng)速方法詳解

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

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

Navigator API

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

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

測量用戶網(wǎng)速的方法

獲取用戶網(wǎng)絡信息

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

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

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

完全隨機的下載請求

獲取網(wǎng)絡帶寬的另一個方法是使用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);
  })
}

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

獲取平均值

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

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函數(shù)，并且該函數(shù)將返回多個結果的平均值。