我如何创建一个JavaScript页面,将检测用户的互联网速度,并显示在页面上?比如“你的网速是??/??”Kb / s”。
当前回答
我需要一个快速的方法来确定用户连接速度是否足够快,以启用/禁用我正在工作的网站中的某些功能,我做了这个小脚本,平均下载单个(小)图像所需的时间多次,它在我的测试中工作得相当准确,能够清楚地区分3G或Wi-Fi,例如,也许有人可以做一个更优雅的版本,甚至是jQuery插件。
var arrTimes = []; var i = 0; // start var timesToTest = 5; var tThreshold = 150; //ms var testImage = "http://www.google.com/images/phd/px.gif"; // small image in your server var dummyImage = new Image(); var isConnectedFast = false; testLatency(function(avg){ isConnectedFast = (avg <= tThreshold); /** output */ document.body.appendChild( document.createTextNode("Time: " + (avg.toFixed(2)) + "ms - isConnectedFast? " + isConnectedFast) ); }); /** test and average time took to download image from server, called recursively timesToTest times */ function testLatency(cb) { var tStart = new Date().getTime(); if (i<timesToTest-1) { dummyImage.src = testImage + '?t=' + tStart; dummyImage.onload = function() { var tEnd = new Date().getTime(); var tTimeTook = tEnd-tStart; arrTimes[i] = tTimeTook; testLatency(cb); i++; }; } else { /** calculate average of array items then callback */ var sum = arrTimes.reduce(function(a, b) { return a + b; }); var avg = sum / arrTimes.length; cb(avg); } }
其他回答
我需要类似的东西,所以我写了https://github.com/beradrian/jsbandwidth。这是https://code.google.com/p/jsbandwidth/的重写。
其思想是通过Ajax进行两个调用,一个用于下载,另一个用于通过POST上传。
它应该与jQuery一起工作。ajax或Angular $http。
好吧,现在是2017年,所以你现在有网络信息API(尽管目前跨浏览器的支持有限)来获得某种估计的下行速度信息:
navigator.connection.downlink
这是以Mbits / sec为单位的有效带宽估计。浏览器根据最近观察到的应用程序层在最近活动连接上的吞吐量进行估计。不用说,这种方法的最大优点是,您不需要下载任何内容,只是为了带宽/速度计算。
你可以看看这个和其他一些相关的属性
由于它的支持有限,并且跨浏览器的实现不同(截至2017年11月),强烈建议详细阅读这篇文章
小片段:
var speedtest = {};
function speedTest_start(name) { speedtest[name]= +new Date(); }
function speedTest_stop(name) { return +new Date() - speedtest[name] + (delete
speedtest[name]?0:0); }
使用:
speedTest_start("test1");
// ... some code
speedTest_stop("test1");
// returns the time duration in ms
还可以进行更多的测试:
speedTest_start("whole");
// ... some code
speedTest_start("part");
// ... some code
speedTest_stop("part");
// returns the time duration in ms of "part"
// ... some code
speedTest_stop("whole");
// returns the time duration in ms of "whole"
最好使用图像来测试速度。但是如果你必须处理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的文件,这将不能很好地工作。您必须在多次下载尝试中运行聚合结果。
我需要一个快速的方法来确定用户连接速度是否足够快,以启用/禁用我正在工作的网站中的某些功能,我做了这个小脚本,平均下载单个(小)图像所需的时间多次,它在我的测试中工作得相当准确,能够清楚地区分3G或Wi-Fi,例如,也许有人可以做一个更优雅的版本,甚至是jQuery插件。
var arrTimes = []; var i = 0; // start var timesToTest = 5; var tThreshold = 150; //ms var testImage = "http://www.google.com/images/phd/px.gif"; // small image in your server var dummyImage = new Image(); var isConnectedFast = false; testLatency(function(avg){ isConnectedFast = (avg <= tThreshold); /** output */ document.body.appendChild( document.createTextNode("Time: " + (avg.toFixed(2)) + "ms - isConnectedFast? " + isConnectedFast) ); }); /** test and average time took to download image from server, called recursively timesToTest times */ function testLatency(cb) { var tStart = new Date().getTime(); if (i<timesToTest-1) { dummyImage.src = testImage + '?t=' + tStart; dummyImage.onload = function() { var tEnd = new Date().getTime(); var tTimeTook = tEnd-tStart; arrTimes[i] = tTimeTook; testLatency(cb); i++; }; } else { /** calculate average of array items then callback */ var sum = arrTimes.reduce(function(a, b) { return a + b; }); var avg = sum / arrTimes.length; cb(avg); } }
推荐文章
- 检测用户何时离开网页的最佳方法?
- 当“模糊”事件发生时,我如何才能找到哪个元素的焦点去了*到*?
- 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对象作为文件