我如何创建一个JavaScript页面,将检测用户的互联网速度,并显示在页面上?比如“你的网速是??/??”Kb / s”。


当前回答

最好使用图像来测试速度。但是如果你必须处理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的文件,这将不能很好地工作。您必须在多次下载尝试中运行聚合结果。

其他回答

最好使用图像来测试速度。但是如果你必须处理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的文件,这将不能很好地工作。您必须在多次下载尝试中运行聚合结果。

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.

也就是说,时间点带宽测试是出了名的不可靠,因为它们会受到其他窗口中正在下载的其他项目、服务器的速度、路由中的链接等的影响。但是你可以用这种方法得到一个大致的概念。

小片段:

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"

我需要一个快速的方法来确定用户连接速度是否足够快,以启用/禁用我正在工作的网站中的某些功能,我做了这个小脚本,平均下载单个(小)图像所需的时间多次,它在我的测试中工作得相当准确,能够清楚地区分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。