好吧，现在是2017年，所以你现在有网络信息API(尽管目前跨浏览器的支持有限)来获得某种估计的下行速度信息:

navigator.connection.downlink

这是以Mbits / sec为单位的有效带宽估计。浏览器根据最近观察到的应用程序层在最近活动连接上的吞吐量进行估计。不用说，这种方法的最大优点是，您不需要下载任何内容，只是为了带宽/速度计算。

你可以看看这个和其他一些相关的属性

由于它的支持有限，并且跨浏览器的实现不同(截至2017年11月)，强烈建议详细阅读这篇文章

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

图像技巧很酷，但在我的测试中，它是在我想完成的一些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/

//JUST AN EXAMPLE, PLEASE USE YOUR OWN PICTURE! var imageAddr = "https://i.ibb.co/sPbbkkZ/pexels-lisa-1540258.jpg"; var downloadSize = 10500000; //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>

小片段:

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); } }