【JavaScript】當咱們嘗試用JavaScipt測網速

時間 2019-11-06

標籤 JavaScript 咱們嘗試 javascipt 欄目 JavaScript 简体版

原文原文鏈接

npm包地址

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

Github地址

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

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

使用方式node

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