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

如何创建一个JavaScript页面来检测用户的网速并在页面上显示？类似于“您的internet速度是？？？/？Kb/s”。

正如我在中概述的，您可以通过定时下载各种大小的文件（开始时很小，如果连接允许的话，则增加速度），确保通过缓存头，这样文件才是真正从远程服务器读取的，而不是从缓存中检索的。这并不一定要求您拥有自己的服务器（文件可能来自或类似），但您需要从某个地方获取文件以测试连接速度

---

也就是说，时间点带宽测试是出了名的不可靠，因为它们会受到其他窗口中下载的其他项目、服务器速度、途中链接等的影响。但使用这种技术，您可以大致了解情况。

在某种程度上，这是可能的，但不会真正准确，想法是加载具有已知文件大小的图像，然后在其

onload

事件中测量触发该事件之前经过的时间，并将该时间除以图像文件大小

可在此处找到示例：

应用此处建议的修复程序的测试用例：

//仅举一个例子，请使用您自己的图片！
var imageAddr=”http://www.kenrockwell.com/contax/images/g2/examples/31120037-5mb.jpg"; 
var downloadSize=4995374//字节
函数ShowProgressMessage（msg）{
if（控制台）{
如果（消息类型==“字符串”）{
控制台日志（msg）；
}否则{
对于（变量i=0；i）；
oProgress.innerHTML=actualHTML；
}
}
函数InitiateSpeedDetection（）{
ShowProgressMessage（“正在加载图像，请稍候…”）；
setTimeout（MeasureConnectionSpeed，1）；
};    
if（window.addEventListener）{
window.addEventListener（'load'，InitiateSpeedDetection，false）；
}else if（窗口附件）{
window.attachEvent（'onload'，启动种子检测）；
}
函数MeasureConnectionSpeed（）{
var startTime，endTime；
var download=newimage（）；
download.onload=函数（）{
endTime=（新日期（））.getTime（）；
showResults（）；
}
download.onerror=函数（err，msg）{
ShowProgressMessage（“无效图像或下载错误”）；
}
startTime=（新日期（））.getTime（）；
var cacheBuster=“？nnn=“+startTime；
download.src=imageAddr+cacheBuster；
函数showResults（）{
风险值持续时间=（结束时间-开始时间）/1000；
var bitsLoaded=下载大小*8；
var speedBps=（比特数/持续时间）.toFixed（2）；
var speedKbps=（speedBps/1024）.toFixed（2）；
var speedMbps=（speedKbps/1024）.toFixed（2）；
ShowProgressMessage([
“您的连接速度是：”，
速度bps+“bps”，
speedKbps+“kbps”，
speedMbps+“Mbps”
]);
}
}

---

JavaScript被关闭，或者你的浏览器真的很慢

我需要一种快速的方法来确定用户连接速度是否足够快，以启用/禁用我正在使用的站点中的某些功能，我制作了这个小脚本，平均下载单个（小）图像所需的时间数次，在我的测试中，它工作得相当准确，能够清楚地区分3G和Wi-Fi，例如，也许有人可以制作一个更优雅的版本，甚至是一个jQuery插件

var arrTimes=[]；
变量i=0；//开始
var-timesToTest=5；
var tThreshold=150//太太
var testImage=”http://www.google.com/images/phd/px.gif"; // 服务器中的小映像
var dummyImage=新图像（）；
var isConnectedFast=false；
testLatency（函数平均值）{
isConnectedFast=（avg最好使用图像来测试速度

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进行两个调用，一个用于下载，另一个用于通过POST上传

它应该同时适用于
jQuery.ajax
或Angular
$http
图像技巧很酷，但在我的测试中，它是在我想要完成的一些ajax调用之前加载的

2017年的正确解决方案是使用工人（）

工人将看起来像：

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

将调用工作程序的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软件包：



好的，现在是2017年，因此您现在有了网络信息API（尽管目前跨浏览器的支持有限），可以获得某种估计值下行链路速度信息：

navigator.connection.downlink

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

您可以查看此属性和其他几个相关属性

由于它的支持有限，且不同浏览器的实现方式也不同（截至2017年11月），因此强烈建议您仔细阅读，感谢Punit的回答，为了检测动态连接速度变化，您可以使用以下代码：

navigator.connection.onchange=函数（）{
//在变速事件中，做您需要做的事情
console.log（“连接速度改变”）；
}
尽管这是一个老生常谈的问题，但我还是想与大家分享我在2020年提出的解决方案

它与th一起提供
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"