如何在JavaScript中检测互联网速度？

如何创建一个JavaScript页面来检测用户的互联网速度并将其显示在页面上？诸如“您的互联网速度为?? / ??”之类的信息 Kb / s”。

可能在某种程度上但不是很准确，其想法是加载具有已知文件大小的图像，然后在其onload事件中测量触发该事件之前经过的时间，然后将此时间除以图像文件大小。

可以在这里找到示例：使用javascript计算速度

应用了建议的修复的测试用例：

//JUST AN EXAMPLE, PLEASE USE YOUR OWN PICTURE!
var imageAddr = "http://www.kenrockwell.com/contax/images/g2/examples/31120037-5mb.jpg"; 
var downloadSize = 4995374; //bytes

function ShowProgressMessage(msg) {
    if (console) {
        if (typeof msg == "string") {
            console.log(msg);
        } else {
            for (var i = 0; i < msg.length; i++) {
                console.log(msg[i]);
            }
        }
    }
    
    var oProgress = document.getElementById("progress");
    if (oProgress) {
        var actualHTML = (typeof msg == "string") ? msg : msg.join("<br />");
        oProgress.innerHTML = actualHTML;
    }
}

function InitiateSpeedDetection() {
    ShowProgressMessage("Loading the image, please wait...");
    window.setTimeout(MeasureConnectionSpeed, 1);
};    

if (window.addEventListener) {
    window.addEventListener('load', InitiateSpeedDetection, false);
} else if (window.attachEvent) {
    window.attachEvent('onload', InitiateSpeedDetection);
}

function MeasureConnectionSpeed() {
    var startTime, endTime;
    var download = new Image();
    download.onload = function () {
        endTime = (new Date()).getTime();
        showResults();
    }
    
    download.onerror = function (err, msg) {
        ShowProgressMessage("Invalid image, or error downloading");
    }
    
    startTime = (new Date()).getTime();
    var cacheBuster = "?nnn=" + startTime;
    download.src = imageAddr + cacheBuster;
    
    function showResults() {
        var duration = (endTime - startTime) / 1000;
        var bitsLoaded = downloadSize * 8;
        var speedBps = (bitsLoaded / duration).toFixed(2);
        var speedKbps = (speedBps / 1024).toFixed(2);
        var speedMbps = (speedKbps / 1024).toFixed(2);
        ShowProgressMessage([
            "Your connection speed is:", 
            speedBps + " bps", 
            speedKbps + " kbps", 
            speedMbps + " Mbps"
        ]);
    }
}

<h1 id="progress">JavaScript is turned off, or your browser is realllllly slow</h1>

与“真实”速度测试服务的快速比较显示，使用大尺寸图像时，相差0.12 Mbps。

为了确保测试的完整性，您可以在启用Chrome开发者工具限制的情况下运行代码，然后查看结果是否符合限制。（贷记到user284130 :)

要记住的重要事项：

1. 使用的图像应适当优化和压缩。如果不是这样，则Web服务器对连接的默认压缩可能会显示比实际更大的速度。另一种选择是使用不可压缩的文件格式，例如jpg。_{（感谢Rauli Rajande 指出这一点，并感谢Fluxine 提醒我}）

2. 上述缓存无效化机制可能不适用于某些CDN服务器，可以将其配置为忽略查询字符串参数，从而更好地在映像本身上设置缓存控制标头。_{（感谢orcaman 指出这一点）}）

好吧，这是2017年，因此您现在拥有Network Information API（尽管到目前为止，对浏览器的支持有限）以获取某种估计的下行链路速度信息：

navigator.connection.downlink

这是有效带宽估计，单位为Mbit /秒。浏览器根据最近观察到的跨活动连接的应用程序层吞吐量进行此估算。不用说，此方法的最大优点是您无需下载任何内容即可仅用于带宽/速度计算。

您可以在此处查看此以及其他几个相关属性

由于支持有限，并且跨浏览器的实现方式不同（截至2017年11月），强烈建议详细阅读此内容

正如我在StackOverflow上的另一个答案中所概述的那样，您可以通过定时下载各种大小的文件（从小尺寸开始，如果连接允许的话，增加连接），确保通过高速缓存头确保文件确实是从远程服务器读取而不是从缓存中检索。这不一定要求您拥有自己的服务器（文件可能来自S3或类似服务器），但是为了测试连接速度，您将需要在某处获取文件。

就是说，众所周知，时间点带宽测试不可靠，因为它们会受到在其他窗口中下载的其他项目，服务器的速度，途中的链接等的影响。使用这种技术。

我需要一种快速的方法来确定用户连接速度是否足够快以启用/禁用我正在工作的站点中的某些功能，我制作了这个小脚本来平均下载单个（小）图像所需的时间。多次，它在我的测试中工作得非常准确，例如能够清晰地区分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);
  }
}

图像技巧很酷，但是在我的测试中，它是在我想完成的一些ajax调用之前加载的。

2017年的正确解决方案是使用工作程序（http://caniuse.com/#feat=webworkers）。

该工作人员将如下所示：

/**
 * This function performs a synchronous request
 * and returns an object contain informations about the download
 * time and size
 */
function measure(filename) {
  var xhr = new XMLHttpRequest();
  var measure = {};
  xhr.open("GET", filename + '?' + (new Date()).getTime(), false);
  measure.start = (new Date()).getTime();
  xhr.send(null);
  measure.end = (new Date()).getTime();
  measure.len = parseInt(xhr.getResponseHeader('Content-Length') || 0);
  measure.delta = measure.end - measure.start;
  return measure;
}

/**
 * Requires that we pass a base url to the worker
 * The worker will measure the download time needed to get
 * a ~0KB and a 100KB.
 * It will return a string that serializes this informations as
 * pipe separated values
 */
onmessage = function(e) {
  measure0 = measure(e.data.base_url + '/test/0.bz2');
  measure100 = measure(e.data.base_url + '/test/100K.bz2');
  postMessage(
    measure0.delta + '|' +
    measure0.len + '|' +
    measure100.delta + '|' +
    measure100.len
  );
};

将会调用Worker的js文件：

var base_url = PORTAL_URL + '/++plone++experimental.bwtools';
if (typeof(Worker) === 'undefined') {
  return; // unsupported
}
w = new Worker(base_url + "/scripts/worker.js");
w.postMessage({
  base_url: base_url
});
w.onmessage = function(event) {
  if (event.data) {
    set_cookie(event.data);
  }
};

我写的Plone包中的代码：

• https://github.com/collective/experimental.bwtools/blob/master/src/experimental/bwtools/browser/static/scripts/

最好使用图像来测试速度。但是，如果您必须处理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.ajaxAngular一起使用$http。

由于Punit S的回答，要检测动态连接速度变化，可以使用以下代码：

navigator.connection.onchange = function () {
 //do what you need to do ,on speed change event
 console.log('Connection Speed Changed');
}