如何用JavaScipt測(cè)網(wǎng)速
前言
事情是這樣的,最近嘗試寫一個(gè)通過判斷當(dāng)前網(wǎng)速,從而在前端控制范圍請(qǐng)求去分步請(qǐng)求一個(gè)大型文件的庫。這個(gè)東東我現(xiàn)在一行代碼都還沒寫,除了突然發(fā)現(xiàn)這個(gè)需求的思路有些不太實(shí)際之外,另一個(gè)原因是我突然問自己——前端要怎么判斷網(wǎng)速???? ? !
前端判斷網(wǎng)速的原理總結(jié)
(注:下面求的網(wǎng)速單位默認(rèn)為KB/S)通過查閱相關(guān)資料,我發(fā)現(xiàn)思路主要是分為以下幾種:
1.通過img加載或者發(fā)起Ajax請(qǐng)求計(jì)算網(wǎng)速
通過請(qǐng)求一個(gè)和服務(wù)端同域的文件,例如圖片等,在前端開始請(qǐng)求和收到響應(yīng)兩個(gè)時(shí)間點(diǎn)分別通過Date.now標(biāo)記start和end,因?yàn)镈ate.now得出的是1970年1月1日(UTC)到當(dāng)前時(shí)間經(jīng)過的毫秒數(shù),所以我們通過end - start求出時(shí)間差(ms),然后通過計(jì)算:
文件大小(KB) * 1000 /( end -start )
就可以計(jì)算出網(wǎng)速了(KB/S)。
而請(qǐng)求文件又有兩種方法:通過img加載或者AJAX加載:
- 通過創(chuàng)建img對(duì)象,設(shè)置onload監(jiān)聽回調(diào),然后指定src, 一旦指定src,圖片資源就會(huì)加載,完成時(shí)onload回調(diào)就會(huì)調(diào)用,我們可以根據(jù)時(shí)機(jī)分別標(biāo)記start和end。
- 通過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)速查詢
我們還可以通過一些H5的先進(jìn)API去實(shí)現(xiàn),例如這里我們可以使用的是window.navigator.connection.downlink 去查詢,但是正如你所知道的是,這類API都是一副德性,即老生常談的兼容性問題,所以我們一般都是作為一種預(yù)備的手段,通過能力檢測(cè),能用就用它,不能用就通過別的方法。而且需要注意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. 一般來說,通過請(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):沒有跨域帶來的問題。缺點(diǎn):(1)要自己測(cè)文件大小并提供參數(shù)fileSize,(2)文件必須為圖片 (3)文件大小不能靈活控制
- Ajax測(cè)速: 通過Ajax測(cè)算網(wǎng)速。 優(yōu)點(diǎn): (1)不用提供文件大小參數(shù),因?yàn)榭梢詮膔esponse首部獲得(2)測(cè)試的文件不一定要是圖片,且數(shù)據(jù)量能靈活控制。缺點(diǎn):跨域問題
- downlink測(cè)速: 通過navigator.connection.downlink讀取網(wǎng)速。優(yōu)點(diǎn):不需要任何參數(shù)。缺點(diǎn):1.兼容性很有問題,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包,可以通過下載
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)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript talbe表中指定位置插入一行的實(shí)現(xiàn)代碼 腳本之家修正版
用js實(shí)現(xiàn)的在table中指定的位置插入一行,先點(diǎn)一下表中你想插入的位置,點(diǎn)擊即可。2009-06-06js實(shí)現(xiàn)AI五子棋人機(jī)大戰(zhàn)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)AI五子棋人機(jī)大戰(zhàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12獲得Javascript對(duì)象屬性個(gè)數(shù)的示例代碼
這篇文章主要是對(duì)獲得Javascript對(duì)象屬性個(gè)數(shù)的示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-11-11JavaScript實(shí)現(xiàn)滾動(dòng)加載更多
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)滾動(dòng)加載更多,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12Next.js項(xiàng)目實(shí)戰(zhàn)踩坑指南(筆記)
這篇文章主要介紹了Next.js項(xiàng)目實(shí)戰(zhàn)踩坑指南(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11用javascript實(shí)現(xiàn)jquery的document.ready功能的實(shí)現(xiàn)代碼
實(shí)現(xiàn)jQuery的document.ready功能js代碼2009-11-11