Wie erkennt man die Internetgeschwindigkeit in JavaScript?


Answers

Wie ich in dieser anderen Antwort hier auf StackOverflow umreiße , können Sie dies tun, indem Sie den Download von Dateien verschiedener Größen (starten klein, hochfahren, wenn die Verbindung es zu erlauben scheint), durch Cache-Header und so, dass die Datei wirklich ist vom Remote-Server gelesen und nicht aus dem Cache abgerufen werden. Dies erfordert nicht unbedingt, dass Sie einen eigenen Server haben (die Dateien könnten von S3 oder ähnlich stammen), aber Sie müssen irgendwo die Dateien abholen, um die Verbindungsgeschwindigkeit zu testen.

Allerdings sind Bandbreiten-Tests zu bestimmten Zeiten unzuverlässig, weil sie von anderen Elementen beeinflusst werden, die in anderen Fenstern heruntergeladen werden, der Geschwindigkeit Ihres Servers, Links unterwegs usw. Aber Sie können eine grobe Vorstellung davon bekommen mit dieser Art von Technik.

Question

Wie kann ich eine JavaScript-Seite erstellen, die die Internetgeschwindigkeit des Benutzers erkennt und auf der Seite anzeigt? Etwas wie "Ihre Internetgeschwindigkeit ist ?? / ?? Kb / s " .




Sie können die Seitenladezeit bestimmen. Verwenden Sie das folgende Skript, um die Zeit zu messen, die zum vollständigen Laden einer Seite benötigt wird:

<html>
<head>
<script type="text/javascript">

var start = new Date().getTime();
function onLoad() {
  var now = new Date().getTime();
  var latency = now - start;
  alert("page loading time: " + latency);
 }

</script>
</head>
<body onload="onLoad()">
<!- Main page body goes from here. -->
</body>
</html>

Siehe 3WC-Seite zum Navigations-Timing:
https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html




Der Bildtrick ist cool, aber in meinen Tests wurde er geladen, bevor einige Ajax-Aufrufe vollständig sein wollten.

Die richtige Lösung für 2017 ist die Verwendung eines Arbeiters ( http://caniuse.com/#feat=webworkers ).

Der Arbeiter wird wie folgt aussehen:

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

Die js-Datei, die den Worker aufruft:

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

Code aus einem Plone-Paket, das ich geschrieben habe:




Ich brauchte einen schnellen Weg, um festzustellen, ob die Geschwindigkeit der Benutzerverbindung schnell genug war, um einige Funktionen in einer Site zu aktivieren / deaktivieren. Ich machte dieses kleine Skript, das die Zeit zum Herunterladen eines einzelnen (kleinen) Bildes berechnet Wie oft es in meinen Tests ziemlich genau funktioniert, in der Lage zu sein, klar zwischen 3G oder Wi-Fi zu unterscheiden, vielleicht kann jemand eine elegantere Version oder sogar ein jQuery-Plugin machen.

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<timesToTest-1) {
        dummyImage.src = testImage + '?t=' + tStart;
        dummyImage.onload = function() {
            var tEnd = new Date().getTime();
            var tTimeTook = tEnd-tStart;
            arrTimes[i] = tTimeTook;
            testLatency(cb);
            i++;
        };
    } else {
        /** calculate average of array items then callback */
        var sum = arrTimes.reduce(function(a, b) { return a + b; });
        var avg = sum / arrTimes.length;
        cb(avg);
    }
}   





Links