Navigator API

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

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

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

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

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

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

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

• 完全隨機的下載請求

獲取網(wǎng)絡(luò)帶寬的另一個方法是使用HTTP GET請求?；舅悸啡缦拢簞?chuàng)建一個完全隨機的URL，這樣應(yīng)該避免了瀏覽器緩存策略的影響，并立即將其下載。

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)內(nèi)容。該函數(shù)返回一個Promise，該Promise將在XHR 200返回后解析并包含以Mb表示的下載速度。請注意，服務(wù)器必須在響應(yīng)中包括自定義首部(X-Timer)，以便從JavaScript計算請求的多長時間并計算出定量結(jié)果。

獲取平均值

一旦我們測量出下載速度，我們需要對每次請求進行平均。這就需要調(diào)用testSpeed多次，并將結(jié)果添加到數(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);        // 打印結(jié)果

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

說明

需要注意的是上述方法僅提供了一個大致的網(wǎng)速估計。由于網(wǎng)絡(luò)狀況是相對不確定的因素（例如，即使用戶的wifi信號強度一定，網(wǎng)絡(luò)流量仍然可能有高峰）所以如果使用類似5次平均值的方法，則測量效果更好。

另外，測量過程使用了網(wǎng)絡(luò)資源，應(yīng)在用戶處于閑置狀態(tài)下、或者避免同時產(chǎn)生意想不到的影響。從性能和隱私的角度考慮，建議采用合理的方式使用這個功能或編寫類似的組件。

總的來說，通過利用Navigator API中的NetworkInformation接口來獲取downlink屬性，我們可以比較簡單地測量用戶的帶寬，便于我們在前端應(yīng)用程序中提高性能和用戶體驗。

以上就是networkInformation.downlink測用戶網(wǎng)速方法詳解的詳細(xì)內(nèi)容，更多關(guān)于networkInformation.downlink測網(wǎng)速的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論