?2016-2026 Matools All rights reserved,
粵ICP備17059708號
npm包地址
https://www.npmjs.com/package/network-speed-test
<https://www.npmjs.com/package/network-speed-test>
Github地址
https://github.com/penghuwan/network-speed-test
<https://github.com/penghuwan/network-speed-test> ?
事情是這樣的，最近嘗試寫一個通過判斷當前網(wǎng)速，從而在前端控制范圍請求去分步請求一個大型文件的庫。這個東東我現(xiàn)在一行代碼都還沒寫，除了突然發(fā)現(xiàn)這個需求的思路有些不太實際之外，另一個原因是我突然問自己——
前端尼瑪要怎么判斷網(wǎng)速??？? ? ！ ?
前端判斷網(wǎng)速的原理總結
(注：下面求的網(wǎng)速單位默認為KB/S) 通過查閱相關資料，我發(fā)現(xiàn)思路主要是分為以下幾種： ?
1.通過img加載或者發(fā)起Ajax請求計算網(wǎng)速
通過請求一個和服務端同域的文件，例如圖片等，在前端開始請求和收到響應兩個時間點分別通過Date.now標記start和end，因為Date.now得出的是1970年1月1日(UTC)到當前時間經(jīng)過的毫秒數(shù),所以我們通過end
- start求出時間差（ms），然后通過計算： 文件大小（KB） * 1000 /( end -start )
就可以計算出網(wǎng)速了(KB/S）。
而請求文件又有兩種方法：通過img加載或者AJAX加載：
* 通過創(chuàng)建img對象，設置onload監(jiān)聽回調(diào)，然后指定src,
一旦指定src,圖片資源就會加載，完成時onload回調(diào)就會調(diào)用，我們可以根據(jù)時機分別標記start和end。
* 通過AJAX進行請求，即創(chuàng)建XHR對象，在onreadystatechange回調(diào)里，判斷當readystate =
4時候加載完成，根據(jù)時機分別標記start和end。
2.window.navigator.connection.downlink?網(wǎng)速查詢
我們還可以通過一些H5的先進API去實現(xiàn)，例如這里我們可以使用的是window.navigator.connection.downlink
去查詢，但是正如你所知道的是，這類API都是一副德性，即老生常談的兼容性問題，所以我們一般都是作為一種預備的手段，
通過能力檢測，能用就用它，不能用就通過別的方法。而且需要注意downlink的單位是mbps,轉(zhuǎn)化成KB/S的公式是
navigator.connection.downlink * 1024 / 8
乘1024可以理解，為什么后面要除8呢？這是因為mbps里的b指的是bit(比特)，KB/s里面的B指的是Byte（字節(jié)），1字節(jié)(b)=8比特(bit)
，所以需要除個8 ?
3. 一般來說，通過請求文件測算網(wǎng)速，單次可能會有誤差，所以我們可以請求多次并計算均值。
?
前端判斷網(wǎng)速的方法及其優(yōu)缺點
* img加載測速：借助img對象加載測算網(wǎng)速。優(yōu)點：沒有跨域帶來的問題。缺點：(1)要自己測文件大小并提供參數(shù)fileSize,（2）文件必須為圖片
（3）文件大小不能靈活控制
* Ajax測速： 通過Ajax測算網(wǎng)速。 優(yōu)點：
（1）不用提供文件大小參數(shù)，因為可以從response首部獲得（2）測試的文件不一定要是圖片,且數(shù)據(jù)量能靈活控制。缺點：跨域問題
* downlink測速:
通過navigator.connection.downlink讀取網(wǎng)速。優(yōu)點：不需要任何參數(shù)。缺點：1.兼容性很有問題，2.帶寬查詢不是實時的,具有分鐘級別的時間間隔
* 綜合實現(xiàn)：先嘗試采用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測算網(wǎng)速 const connection =
window.navigator.connection;if (connection && connection.downlink) { return
connection.downlink * 1024 / 8; } }
?
綜合測速
function getNetSpeed(url, times) { // downlink測算網(wǎng)速 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; }) }
?
? 以上代碼我發(fā)了一個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();
?
Github地址
https://github.com/penghuwan/network-speed-test
<https://github.com/penghuwan/network-speed-test>
?
參考文章
https://juejin.im/post/5b4de6b7e51d45190d55340b
<https://juejin.im/post/5b4de6b7e51d45190d55340b>
?
?
知乎賬號
https://www.zhihu.com/people/peng-hu-wan-56/activities
<https://www.zhihu.com/people/peng-hu-wan-56/activities> ? ?
熱門工具 換一換