使用JavaScipt怎么測網速

這篇文章給大家介紹使用JavaScipt怎么測網速，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

JavaScript是什么

JavaScript是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，JavaScript是被廣泛用于客戶端的腳本語言，最早是在HTML網頁上使用，用來給HTML網頁增加動態功能。

前端判斷網速的原理總結

(注：下面求的網速單位默認為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

3. 一般來說，通過請求文件測算網速

單次可能會有誤差，所以我們可以請求多次并計算均值。

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

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

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

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

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

img加載測速

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 });
}

Ajax測速

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 });
}

downlink測速

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://cache.yisu.com/upload/information/20210508/112/1386.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();

關于使用JavaScipt怎么測網速就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。