我如何创建一个JavaScript页面,将检测用户的互联网速度,并显示在页面上?比如“你的网速是??/??”Kb / s”。
当前回答
好吧,现在是2017年,所以你现在有网络信息API(尽管目前跨浏览器的支持有限)来获得某种估计的下行速度信息:
navigator.connection.downlink
这是以Mbits / sec为单位的有效带宽估计。浏览器根据最近观察到的应用程序层在最近活动连接上的吞吐量进行估计。不用说,这种方法的最大优点是,您不需要下载任何内容,只是为了带宽/速度计算。
你可以看看这个和其他一些相关的属性
由于它的支持有限,并且跨浏览器的实现不同(截至2017年11月),强烈建议详细阅读这篇文章
其他回答
As I outline in this other answer here on StackOverflow, you can do this by timing the download of files of various sizes (start small, ramp up if the connection seems to allow it), ensuring through cache headers and such that the file is really being read from the remote server and not being retrieved from cache. This doesn't necessarily require that you have a server of your own (the files could be coming from S3 or similar), but you will need somewhere to get the files from in order to test connection speed.
也就是说,时间点带宽测试是出了名的不可靠,因为它们会受到其他窗口中正在下载的其他项目、服务器的速度、路由中的链接等的影响。但是你可以用这种方法得到一个大致的概念。
改进了John Smith的答案,一个漂亮而干净的解决方案,返回一个Promise,因此可以与async/await一起使用。返回以Mbps为单位的值。
const imageAddr = 'https://upload.wikimedia.org/wikipedia/commons/a/a6/Brandenburger_Tor_abends.jpg';
const downloadSize = 2707459; // this must match with the image above
let startTime, endTime;
async function measureConnectionSpeed() {
startTime = (new Date()).getTime();
const cacheBuster = '?nnn=' + startTime;
const download = new Image();
download.src = imageAddr + cacheBuster;
// this returns when the image is finished downloading
await download.decode();
endTime = (new Date()).getTime();
const duration = (endTime - startTime) / 1000;
const bitsLoaded = downloadSize * 8;
const speedBps = (bitsLoaded / duration).toFixed(2);
const speedKbps = (speedBps / 1024).toFixed(2);
const speedMbps = (speedKbps / 1024).toFixed(2);
return Math.round(Number(speedMbps));
}
最好使用图像来测试速度。但是如果你必须处理zip文件,下面的代码可以工作。
var fileURL = "your/url/here/testfile.zip";
var request = new XMLHttpRequest();
var avoidCache = "?avoidcache=" + (new Date()).getTime();;
request.open('GET', fileURL + avoidCache, true);
request.responseType = "application/zip";
var startTime = (new Date()).getTime();
var endTime = startTime;
request.onreadystatechange = function () {
if (request.readyState == 2)
{
//ready state 2 is when the request is sent
startTime = (new Date().getTime());
}
if (request.readyState == 4)
{
endTime = (new Date()).getTime();
var downloadSize = request.responseText.length;
var time = (endTime - startTime) / 1000;
var sizeInBits = downloadSize * 8;
var speed = ((sizeInBits / time) / (1024 * 1024)).toFixed(2);
console.log(downloadSize, time, speed);
}
}
request.send();
对于小于10MB的文件,这将不能很好地工作。您必须在多次下载尝试中运行聚合结果。
我需要类似的东西,所以我写了https://github.com/beradrian/jsbandwidth。这是https://code.google.com/p/jsbandwidth/的重写。
其思想是通过Ajax进行两个调用,一个用于下载,另一个用于通过POST上传。
它应该与jQuery一起工作。ajax或Angular $http。
由于Punit S的回答,为了检测动态连接速度的变化,你可以使用以下代码:
navigator.connection.onchange = function () {
//do what you need to do ,on speed change event
console.log('Connection Speed Changed');
}
推荐文章
- 检测用户何时离开网页的最佳方法?
- 当“模糊”事件发生时,我如何才能找到哪个元素的焦点去了*到*?
- React不会加载本地图像
- 如何将Blob转换为JavaScript文件
- 在另一个js文件中调用JavaScript函数
- 如何在svg元素中使用z索引?
- 如何求一个数的长度?
- 跨源请求头(CORS)与PHP头
- 如何用Express/Node以编程方式发送404响应?
- parseInt(null, 24) === 23…等等,什么?
- JavaScript变量声明在循环外还是循环内?
- 元素在“for(…in…)”循环中排序
- 在哪里放置JavaScript在HTML文件?
- 什么时候.then(success, fail)被认为是承诺的反模式?
- 从浏览器下载JSON对象作为文件