如何在JavaScript中检测网速?

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

当前回答

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

2021-08-31 04:05:38

其他回答

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

2015-07-01 17:51:11

小片段:

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"

2021-02-19 21:01:24

尽管这是旧的和回答，我想分享的解决方案，我做出了它2020年的基础上的影子巫师说不再战争的解决方案

我只是将它合并到一个对象中，该对象具有随时运行的灵活性，并在指定的mbps高于或低于测量结果时运行回调。

可以在包含testConnectionSpeed对象后的任何位置启动测试

/**
* @param float    mbps               - Specify a limit of mbps.
* @param function more(float result) - Called if more mbps than specified limit.
* @param function less(float result) - Called if less mbps than specified limit.
*/
testConnectionSpeed.run(mbps, more, less)

例如:

我成功地使用它来加载低分辨率的媒体慢网络连接。你必须玩一点，因为一方面，图像越大，测试就越合理，另一方面，对于慢速连接，测试将花费更长的时间，在我的情况下，我特别不希望慢速连接的用户加载大量mb。

2020-07-27 08:05:51

我需要类似的东西，所以我写了https://github.com/beradrian/jsbandwidth。这是https://code.google.com/p/jsbandwidth/的重写。

其思想是通过Ajax进行两个调用，一个用于下载，另一个用于通过POST上传。

它应该与jQuery一起工作。ajax或Angular $http。

2015-07-10 09:52:30

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

2014-01-27 02:38:36

如何在JavaScript中检测网速?

推荐文章

最新文章

标签