如何用JavaScipt测网速
前言
事情是这样的，最近尝试写一个通过判断当前网速，从而在前端控制范围请求去分步请求一个大型文件的库。这个东东我现在一行代码都还没写，除了突然发现这个需求的思路有些不太实际之外，另一个原因是我突然问自己——前端要怎么判断网速啊？? ? ！
前端判断网速的原理总结
(注：下面求的网速单位默认为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();
npm包地址
https://www.npmjs.com/package/network-speed-test
Github地址
https://github.com/penghuwan/network-speed-test
以上就是如何用JavaScipt测网速的详细内容，更多关于用JavaScipt测网速的资料请关注脚本之家其它相关文章！
相关文章
在本篇文章里小编给大家总结了关于JavaScript中concat复制数组方法知识点，有需要的朋友们可以学习下。2019-01-01
首先请下载JScript.chm这本手册，无论新手老手，有一本手册是免不了的，特别是对于新手，如果你没有空翻犀牛书，那么这本手册将是你了解这门语言的首选。下面所讲的大多数，手册上可以没有提及，或提及很少的内容。2008-07-07
在微信小程序的文档中，使用scroll-view标签，然后给它设置一个scroll-x就可以实现元素，横向排列，可以左右滑动，但是在实际开发中会遇到各种问题，下面小编给大家带来了微信小程序scroll-x失效的完美解决方法,需要的朋友可以参考下2018-07-07
这篇文章主要为大家详细介绍了js实现图片加载淡入淡出效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
JavaScript使用cookie...2007-02-02
这篇文章主要为大家详细介绍了纯js实现动态时间显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
今天小编就为大家分享一篇layui.use模块外部使用其内部定义的js封装函数方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
详解bootstrap-fileinput文件上传控件的亲身实践
这篇文章主要介绍了详解bootstrap-fileinput文件上传控件的亲身实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要给大家介绍了关于js与vue如何实现自动全屏显示效果的相关资料,在vue项目中做一个可以控制页面全屏展示的效果,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
JS截取字符串 subStr()、substring()、slice() 方法示例详解
这篇文章主要介绍了JS截取字符串 subStr()、substring()、slice() 方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
最新评论