如何用JavaScipt测网速


Posted in Javascript onMay 09, 2021

前言

事情是这样的,最近尝试写一个通过判断当前网速,从而在前端控制范围请求去分步请求一个大型文件的库。这个东东我现在一行代码都还没写,除了突然发现这个需求的思路有些不太实际之外,另一个原因是我突然问自己——前端要怎么判断网速啊?? ? !

前端判断网速的原理总结

(注:下面求的网速单位默认为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 相关文章推荐
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
layUI实现列表查询功能
Jul 27 Javascript
浅谈JS的二进制家族
如何使用vue3打造一个物料库
Ajax常用封装库——Axios的使用
May 08 #Javascript
微信小程序用户授权最佳实践指南
vue完美实现el-table列宽自适应
详解JS WebSocket断开原因和心跳机制
May 07 #Javascript
如何用threejs实现实时多边形折射
You might like
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
继续学习javascript闭包
2015/12/03 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
python获取android设备的GPS信息脚本分享
2015/03/06 Python
Python切图九宫格的实现方法
2019/10/10 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
常用的HTML5列表标签
2017/06/20 HTML / CSS
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
企业治理工作自我评价
2013/09/26 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
mysql如何配置白名单访问
2021/06/30 MySQL
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫