当我们尝试用javascript测网速
当我们尝试用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
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
为什么说java是只有值传递?
为什么说java是只有值传递?如果你学的第一门程序语言是java可能对这个传递方式没有那么敏感,如果学了c或c++,然后再学java,那么可能对这个问题会感到困惑。 1.值传递与引用传递的概念在将传递方式之前先理解一下形参与实参。 形式参数:是在定义函数名和函数体的时候使用的参数,目的是用来接收调用该函数时传入的参数。 实际参数:在调用有参函数时,主调函数和被调函数之间有数据传递关系。在主调函数中调用一个函数时,函数名后面括号中的参数称为“实际参数”。 可以这么理解:形参是实参的抽象,实参是调用时的参数,形参是定义函数的参数 值传递:方法调用时,实际参数把它的值传递给对应的形式参数,函数接收的是原始值的一个copy,此时内存中存在两个相等的基本类型,即实际参数和形式参数,后面方法中的操作都是对形参这个值的修改,不影响实际参数的值。 引用传递:是指在调用函数时将实际参数的地址直接传递到函数中,那么在函数中对参数所进行的修改,将影响到实际参数。 划重点:值传递和引用传递的主要区别 值传递 引用传递 创建副本,在函数体中不能改变原来的值 不创建副本,在在函数体中不能改变原来的值 创建副本的含...
- 下一篇
java中的各种锁详细介绍
java中的各种锁详细介绍转自:https://blog.csdn.net/axiaoboge/article/details/84335452 Java提供了种类丰富的锁,每种锁因其特性的不同,在适当的场景下能够展现出非常高的效率。本文旨在对锁相关源码(本文中的源码来自JDK 8)、使用场景进行举例,为读者介绍主流锁的知识点,以及不同的锁的适用场景。 Java中往往是按照是否含有某一特性来定义锁,我们通过特性将锁进行分组归类,再使用对比的方式进行介绍,帮助大家更快捷的理解相关知识。下面给出本文内容的总体分类目录: 乐观锁 VS 悲观锁#乐观锁与悲观锁是一种广义上的概念,体现了看待线程同步的不同角度。在Java和数据库中都有此概念对应的实际应用。 先说概念。对于同一个数据的并发操作,悲观锁认为自己在使用数据的时候一定有别的线程来修改数据,因此在获取数据的时候会先加锁,确保数据不会被别的线程修改。Java中,synchronized关键字和Lock的实现类都是悲观锁。 而乐观锁认为自己在使用数据时不会有别的线程修改数据,所以不会添加锁,只是在更新数据的时候去判断之前有没有别的线程更新了这...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- SpringBoot2整合Redis,开启缓存,提高访问速度
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- CentOS6,CentOS7官方镜像安装Oracle11G
- Linux系统CentOS6、CentOS7手动修改IP地址
- MySQL8.0.19开启GTID主从同步CentOS8
- Docker安装Oracle12C,快速搭建Oracle学习环境
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- CentOS8安装Docker,最新的服务器搭配容器使用