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

Question

如何创建一个JavaScript页面来检测用户的互联网速度并将其显示在页面上？诸如 “您的互联网速度为?? / ??”之类的信息 Kb / s”。

Answer 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开发者工具限制的情况下运行代码，然后查看结果是否符合限制。 （贷记给user284130）

要记住的重要事项：

1. 使用的图像应适当优化和压缩。如果不是，则Web服务器对连接的默认压缩可能会显示比实际更大的速度。另一种选择是使用不可压缩的文件格式，例如jpg。

2. 上述缓存无效化机制可能不适用于某些CDN服务器，可以将其配置为忽略查询字符串参数，从而更好地在映像本身上设置缓存控制标头。