当我们尝试用JavaScipt测网速 - 好文

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>
事情是这样的，最近尝试写一个通过判断当前网速，从而在前端控制范围请求去分步请求一个大型文件的库。这个东东我现在一行代码都还没写，除了突然发现这个需求的思路有些不太实际之外，另一个原因是我突然问自己——
前端尼玛要怎么判断网速啊？? ? ！
前端判断网速的原理总结
(注：下面求的网速单位默认为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
使用方式
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>

热门工具换一换