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

2022-08-30 00:22:02

如何创建一个JavaScript页面来检测用户的互联网速度并将其显示在页面上?比如“你的互联网速度是??/??Kb/s”。


答案 1

在某种程度上是可能的,但并不真正准确,这个想法是加载具有已知文件大小的图像,然后在其事件中测量触发该事件之前经过的时间,并将此时间除以图像文件大小。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 开发工具限制的情况下运行代码,然后查看结果是否与限制匹配。(信用归用户284130:))

要记住的重要事项:

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

  2. 上述缓存破坏程序机制可能不适用于某些 CDN 服务器,这些服务器可以配置为忽略查询字符串参数,因此可以更好地在映像本身上设置缓存控制标头。(感谢逆戟鲸指出这一点

  3. 图像大小越大越好。较大的图像将使测试更准确,5 mb是体面的,但如果您可以使用更大的图像,那就更好了。


答案 2

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

navigator.connection.downlink

这是以每秒兆位为单位的有效带宽估计值。浏览器根据最近观察到的最近活动连接的应用程序层吞吐量进行此估计。毋庸置疑,这种方法的最大优点是您无需下载任何内容即可进行带宽/速度计算。

您可以在此处查看此属性和其他一些相关属性

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