如何在JavaScript中检测网速？

Question

如何创建一个JavaScript页面来检测用户的网速并将其显示在页面上？像这样的东西

“你的网速是??/?？Kb/s“

..。

Answer 1

现在是2017年了，所以你现在有了Network Information API (尽管目前对浏览器的支持有限)，以获得某种形式的预估

下行速度信息：

navigator.connection.downlink

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

您可以查看此属性和其他一些相关属性这里由于它的有限支持和不同浏览器的不同实现(截至2017年11月)，强烈建议阅读这个详细地说

Answer 2

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

​

​

Answer 3

正如我在另一个答案在StackOverflow上，您可以通过定时下载各种大小的文件来实现这一点(从小开始，如果连接似乎允许，则逐步增加)，确保通过缓存头，这样文件实际上是从远程服务器读取的，而不是从缓存中检索的。这并不一定要求您有自己的服务器(文件可能来自S3或类似)，但您需要从某个地方获取文件，以便测试连接速度。

也就是说，时间点带宽测试是出了名的不可靠，因为它们会受到其他窗口中正在下载的其他项目、服务器的速度、途中的链接等的影响。