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

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

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

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

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

//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>

改进了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));
}