前言

事情是這樣的，最近嘗試寫(xiě)一個(gè)通過(guò)判斷當(dāng)前網(wǎng)速，從而在前端控制范圍請(qǐng)求去分步請(qǐng)求一個(gè)大型文件的庫(kù)。這個(gè)東東我現(xiàn)在一行代碼都還沒(méi)寫(xiě)，除了突然發(fā)現(xiàn)這個(gè)需求的思路有些不太實(shí)際之外，另一個(gè)原因是我突然問(wèn)自己——前端要怎么判斷網(wǎng)速啊？? ? ！

前端判斷網(wǎng)速的原理總結(jié)

(注：下面求的網(wǎng)速單位默認(rèn)為KB/S)通過(guò)查閱相關(guān)資料，我發(fā)現(xiàn)思路主要是分為以下幾種：

1.通過(guò)img加載或者發(fā)起Ajax請(qǐng)求計(jì)算網(wǎng)速

通過(guò)請(qǐng)求一個(gè)和服務(wù)端同域的文件，例如圖片等，在前端開(kāi)始請(qǐng)求和收到響應(yīng)兩個(gè)時(shí)間點(diǎn)分別通過(guò)Date.now標(biāo)記start和end，因?yàn)镈ate.now得出的是1970年1月1日(UTC)到當(dāng)前時(shí)間經(jīng)過(guò)的毫秒數(shù),所以我們通過(guò)end - start求出時(shí)間差（ms），然后通過(guò)計(jì)算：

文件大小（KB） * 1000 /( end -start )

就可以計(jì)算出網(wǎng)速了(KB/S）。

而請(qǐng)求文件又有兩種方法：通過(guò)img加載或者AJAX加載：

通過(guò)創(chuàng)建img對(duì)象，設(shè)置onload監(jiān)聽(tīng)回調(diào)，然后指定src, 一旦指定src,圖片資源就會(huì)加載，完成時(shí)onload回調(diào)就會(huì)調(diào)用，我們可以根據(jù)時(shí)機(jī)分別標(biāo)記start和end。 通過(guò)AJAX進(jìn)行請(qǐng)求，即創(chuàng)建XHR對(duì)象，在onreadystatechange回調(diào)里，判斷當(dāng)readystate = 4時(shí)候加載完成，根據(jù)時(shí)機(jī)分別標(biāo)記start和end。2.window.navigator.connection.downlink網(wǎng)速查詢

我們還可以通過(guò)一些H5的先進(jìn)API去實(shí)現(xiàn)，例如這里我們可以使用的是window.navigator.connection.downlink 去查詢，但是正如你所知道的是，這類(lèi)API都是一副德性，即老生常談的兼容性問(wèn)題，所以我們一般都是作為一種預(yù)備的手段，通過(guò)能力檢測(cè)，能用就用它，不能用就通過(guò)別的方法。而且需要注意downlink的單位是mbps,轉(zhuǎn)化成KB/S的公式是

navigator.connection.downlink * 1024 / 8

乘1024可以理解，為什么后面要除8呢？這是因?yàn)閙bps里的b指的是bit(比特)，KB/s里面的B指的是Byte（字節(jié)），1字節(jié)(b)=8比特(bit)，所以需要除個(gè)8

3. 一般來(lái)說(shuō)，通過(guò)請(qǐng)求文件測(cè)算網(wǎng)速

單次可能會(huì)有誤差，所以我們可以請(qǐng)求多次并計(jì)算均值。

前端判斷網(wǎng)速的方法及其優(yōu)缺點(diǎn) img加載測(cè)速：借助img對(duì)象加載測(cè)算網(wǎng)速。優(yōu)點(diǎn)：沒(méi)有跨域帶來(lái)的問(wèn)題。缺點(diǎn)：(1)要自己測(cè)文件大小并提供參數(shù)fileSize,（2）文件必須為圖片 （3）文件大小不能靈活控制 Ajax測(cè)速： 通過(guò)Ajax測(cè)算網(wǎng)速。 優(yōu)點(diǎn)： （1）不用提供文件大小參數(shù)，因?yàn)榭梢詮膔esponse首部獲得（2）測(cè)試的文件不一定要是圖片,且數(shù)據(jù)量能靈活控制。缺點(diǎn)：跨域問(wèn)題 downlink測(cè)速: 通過(guò)navigator.connection.downlink讀取網(wǎng)速。優(yōu)點(diǎn)：不需要任何參數(shù)。缺點(diǎn)：1.兼容性很有問(wèn)題，2.帶寬查詢不是實(shí)時(shí)的,具有分鐘級(jí)別的時(shí)間間隔 綜合實(shí)現(xiàn)：先嘗試采用downlink測(cè)速，否則多次AJAX測(cè)速并求平均值img加載測(cè)速

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測(cè)速

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測(cè)速

function getSpeedWithDnlink() { // downlink測(cè)算網(wǎng)速 const connection = window.navigator.connection; if (connection && connection.downlink) {return connection.downlink * 1024 / 8; }}

綜合測(cè)速

function getNetSpeed(url, times) { // downlink測(cè)算網(wǎng)速 const connection = window.navigator.connection; if (connection && connection.downlink) {return connection.downlink * 1024 / 8; } // 多次測(cè)速求平均值 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; })}

以上代碼我發(fā)了一個(gè)npm包，可以通過(guò)下載

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();npm包地址

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

Github地址

https://github.com/penghuwan/network-speed-test

以上就是如何用JavaScipt測(cè)網(wǎng)速的詳細(xì)內(nèi)容，更多關(guān)于用JavaScipt測(cè)網(wǎng)速的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！