當我們嘗試用javascript測網速

當我們嘗試用javascript測網速

目錄

npm包位址

Github位址

前端判斷網速的原理總結

前端判斷網速的方法及其優缺點

img加載測速

Ajax測速

downlink測速

綜合測速

參考文章

知乎賬号

正文

回到頂部

https://www.npmjs.com/package/network-speed-test https://github.com/penghuwan/network-speed-test

事情是這樣的，最近嘗試寫一個通過判斷目前網速，進而在前端控制範圍請求去分步請求一個大型檔案的庫。這個東東我現在一行代碼都還沒寫，除了突然發現這個需求的思路有些不太實際之外，另一個原因是我突然問自己——

前端尼瑪要怎麼判斷網速啊？? ? ！

(注：下面求的網速機關預設為KB/S)

通過查閱相關資料，我發現思路主要是分為以下幾種：

1.通過img加載或者發起Ajax請求計算網速

通過請求一個和服務端同域的檔案，例如圖檔等，在前端開始請求和收到響應兩個時間點分别通過Date.now标記start和end，因為Date.now得出的是1970年1月1日(UTC)到目前時間經過的毫秒數,是以我們通過end - start求出時間差（ms），然後通過計算：

檔案大小（KB） * 1000 /( end -start )

就可以計算出網速了(KB/S）。

而請求檔案又有兩種方法：通過img加載或者AJAX加載：

通過建立img對象，設定onload監聽回調，然後指定src, 一旦指定src,圖檔資源就會加載，完成時onload回調就會調用，我們可以根據時機分别标記start和end。

通過AJAX進行請求，即建立XHR對象，在onreadystatechange回調裡，判斷當readystate = 4時候加載完成，根據時機分别标記start和end。

2.window.navigator.connection.downlink 網速查詢

我們還可以通過一些H5的先進API去實作，例如這裡我們可以使用的是window.navigator.connection.downlink 去查詢，但是正如你所知道的是，這類API都是一副德性，即老生常談的相容性問題，是以我們一般都是作為一種預備的手段，通過能力檢測，能用就用它，不能用就通過别的方法。而且需要注意downlink的機關是mbps,轉化成KB/S的公式是

navigator.connection.downlink * 1024 / 8

乘1024可以了解，為什麼後面要除8呢？這是因為mbps裡的b指的是bit(比特)，KB/s裡面的B指的是Byte（位元組），1位元組(b)=8比特(bit)，是以需要除個8

1. 一般來說，通過請求檔案測算網速，單次可能會有誤差，是以我們可以請求多次并計算均值。

img加載測速：借助img對象加載測算網速。優點：沒有跨域帶來的問題。缺點：(1)要自己測檔案大小并提供參數fileSize,（2）檔案必須為圖檔 （3）檔案大小不能靈活控制

Ajax測速： 通過Ajax測算網速。 優點： （1）不用提供檔案大小參數，因為可以從response首部獲得（2）測試的檔案不一定要是圖檔,且資料量能靈活控制。缺點：跨域問題

downlink測速: 通過navigator.connection.downlink讀取網速。優點：不需要任何參數。缺點：1.相容性很有問題，2.帶寬查詢不是實時的,具有分鐘級别的時間間隔

綜合實作：先嘗試采用downlink測速，否則多次AJAX測速并求平均值

function getSpeedWithImg(imgUrl, fileSize) {

return new Promise((resolve, reject) => {
    let start = null;
    let end = null;
    let img = document.createElement('img');
    start = new Date().getTime();
    img.onload = function (e) {
        end = new Date().getTime();
        const speed = fileSize * 1000 / (end - start)
        resolve(speed);
    }
    img.src = imgUrl;
}).catch(err => { throw err });           

}

function getSpeedWithAjax(url) {

return new Promise((resolve, reject) => {
    let start = null;
    let end = null;
    start = new Date().getTime();
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            end = new Date().getTime();
            const size = xhr.getResponseHeader('Content-Length') / 1024;
            const speed = size * 1000 / (end - start)
            resolve(speed);
        }
    }
    xhr.open('GET', url);
    xhr.send();
}).catch(err => { throw err });           

function getSpeedWithDnlink() {

// downlink測算網速
const connection = window.navigator.connection;
if (connection && connection.downlink) {
    return connection.downlink * 1024 / 8;
}           

function getNetSpeed(url, times) {

// downlink測算網速
const connection = window.navigator.connection;
if (connection && connection.downlink) {
    return connection.downlink * 1024 / 8;
}
// 多次測速求平均值
const arr = [];
for (let i = 0; i < times; i++) {
    arr.push(getSpeedWithAjax(url));
}
return Promise.all(arr).then(speeds => {
    let sum = 0;
    speeds.forEach(speed => {
        sum += speed;
    });
    return sum / times;
})           

以上代碼我發了一個npm包，可以通過下載下傳

npm i network-speed-test

使用方式

import * from 'network-speed-test';

getSpeedWithImg("https://s2.ax1x.com/2019/08/13/mPJ2iq.jpg", 8.97).then(

speed => {
    console.log(speed);
}           

)

getSpeedWithAjax('./speed.jpg').then(speed => {

console.log(speed);           

});

getNetSpeed('./speed.jpg', 3).then(speed => {

console.log(speed);           

getSpeedWithDnlink();

https://juejin.im/post/5b4de6b7e51d45190d55340b https://www.zhihu.com/people/peng-hu-wan-56/activities

原文位址

https://www.cnblogs.com/penghuwan/p/11366446.html