當我們嘗試用javascript測網速
目錄
npm包地址
Github地址
前端判斷網速的原理總結
前端判斷網速的方法及其優缺點
img加載測速
Ajax測速
downlink測速
綜合測速
Github地址
參考文章
知乎賬號
正文
回到頂部
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
- 一般來說，通過請求文件測算網速，單次可能會有誤差，所以我們可以請求多次並計算均值。
回到頂部
前端判斷網速的方法及其優缺點
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://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://juejin.im/post/5b4de6b7e51d45190d55340b
回到頂部
知乎賬號
https://www.zhihu.com/people/peng-hu-wan-56/activities