So testen Sie die Netzwerkgeschwindigkeit mit JavaScript

Vorwort

Hier ist die Sache. Ich habe kürzlich versucht, eine Bibliothek zu schreiben, die die aktuelle Netzwerkgeschwindigkeit ermittelt und den Bereich der Anfragen am Frontend steuert, um schrittweise eine große Datei anzufordern. Ich habe für dieses Ding bisher noch keine einzige Codezeile geschrieben, nicht nur, weil mir plötzlich klar wurde, dass die Idee dieser Anforderung etwas unpraktisch ist, sondern auch, weil ich mich plötzlich fragte: Wie soll das Front-End die Netzwerkgeschwindigkeit bestimmen? ? ?!

Zusammenfassung des Prinzips der Front-End-Beurteilung der Netzwerkgeschwindigkeit

(Hinweis: Die Standardeinheit der Netzwerkgeschwindigkeit unten ist KB/S.) Durch Konsultation relevanter Informationen habe ich festgestellt, dass die Ideen hauptsächlich in die folgenden Kategorien unterteilt sind:

1. Berechnen Sie die Netzwerkgeschwindigkeit, indem Sie img laden oder eine Ajax-Anfrage starten

Wenn Sie eine Datei in derselben Domäne wie der Server anfordern, z. B. ein Bild, werden die beiden Zeitpunkte des Startens der Anforderung und des Empfangens der Antwort durch Date.now gekennzeichnet, da Date.now die Anzahl der Millisekunden vom 1. Januar 1970 (UTC) bis zur aktuellen Zeit ist. Daher verwenden wir end - start, um die Zeitdifferenz (ms) zu ermitteln, und berechnen dann:

Dateigröße (KB) * 1000 / (Ende – Anfang)

Sie können die Netzwerkgeschwindigkeit (KB/S) berechnen.

Es gibt zwei Möglichkeiten, Dateien anzufordern: Laden über img oder Laden über AJAX:

• Indem wir ein img-Objekt erstellen, den Onload-Listener-Rückruf festlegen und dann die Quelle angeben, wird die Bildressource geladen, sobald die Quelle angegeben ist, und der Onload-Rückruf wird aufgerufen, wenn er abgeschlossen ist. Wir können den Anfang und das Ende je nach Zeitpunkt separat markieren.
• Stellen Sie eine Anfrage über AJAX, d. h. erstellen Sie ein XHR-Objekt. Bestimmen Sie im Rückruf onreadystatechange, dass der Ladevorgang abgeschlossen ist, wenn readystate = 4 ist, und markieren Sie Start und Ende entsprechend dem Zeitpunkt.

2.window.navigator.connection.downlink Netzwerkgeschwindigkeitsabfrage

Wir können dies auch über einige erweiterte H5-APIs erreichen. Hier können wir beispielsweise window.navigator.connection.downlink zur Abfrage verwenden. Wie Sie jedoch wissen, weist diese Art von API ihre eigenen Merkmale auf, nämlich alte Kompatibilitätsprobleme. Daher verwenden wir sie normalerweise als Reservemittel. Durch Funktionserkennung können wir feststellen, ob sie verwendet werden kann, und wenn nicht, verwenden wir andere Methoden. Und es ist zu beachten, dass die Einheit des Downlinks Mbit/s ist und die Formel zur Umrechnung in KB/S lautet

navigator.verbindung.downlink * 1024 / 8

Die Multiplikation mit 1024 ist verständlich, aber warum muss anschließend durch 8 dividiert werden? Dies liegt daran, dass sich das „b“ in Mbit/s auf Bit bezieht und das „B“ in KB/s auf Byte. 1 Byte (b) = 8 Bit, also müssen wir durch 8 teilen.

3. Im Allgemeinen wird die Netzwerkgeschwindigkeit durch die Anforderung von Dateien gemessen

Eine einzelne Anfrage kann Fehler enthalten, daher können wir mehrere Anfragen stellen und den Durchschnitt berechnen.

Front-End-Methode zur Beurteilung der Netzwerkgeschwindigkeit und ihrer Vor- und Nachteile

• Test der Bildladegeschwindigkeit: Verwenden Sie das Laden von Bildobjekten, um die Netzwerkgeschwindigkeit zu messen. Vorteile: Keine domänenübergreifenden Probleme. Nachteile: (1) Sie müssen die Dateigröße selbst messen und den Parameter fileSize angeben; (2) Die Datei muss ein Bild sein; (3) Die Dateigröße kann nicht flexibel gesteuert werden
• Ajax-Geschwindigkeitstest: Messen Sie die Netzwerkgeschwindigkeit über Ajax. Vorteile: (1) Es ist kein Dateigrößenparameter erforderlich, da dieser aus dem Antwortheader abgerufen werden kann. (2) Die Testdatei muss kein Bild sein und die Datenmenge kann flexibel gesteuert werden. Nachteile: Domänenübergreifende Probleme
• Downlink-Geschwindigkeitstest: Lesen Sie die Netzwerkgeschwindigkeit über navigator.connection.downlink. Vorteile: Es sind keine Parameter erforderlich. Nachteile: 1. Die Kompatibilität ist sehr problematisch, 2. Die Bandbreitenabfrage erfolgt nicht in Echtzeit, mit einem Zeitintervall von Minuten
• Umfassende Implementierung: Versuchen Sie zuerst, den Downlink-Geschwindigkeitstest zu verwenden, andernfalls verwenden Sie den AJAX-Geschwindigkeitstest mehrmals und berechnen Sie den Durchschnittswert

Test der Bildladegeschwindigkeit

Funktion getSpeedWithImg(imgUrl, Dateigröße) {
    returniere neues Promise((lösen, ablehnen) => {
        lass start = null;
        lass ende = null;
        let img = document.createElement('img');
        start = neues Date().getTime();
        img.onload = Funktion (e) {
            Ende = neues Date().getTime();
            const Geschwindigkeit = Dateigröße * 1000 / (Ende - Start)
            Entschlossenheit (Geschwindigkeit);
        }
        img.src = Bild-Url;
    }).catch(err => { throw err });
}

Ajax-Geschwindigkeitstest

Funktion getSpeedWithAjax(url) {
    returniere neues Promise((lösen, ablehnen) => {
        lass start = null;
        lass ende = null;
        start = neues Date().getTime();
        const xhr = neue XMLHttpRequest();
        xhr.onreadystatechange = Funktion () {
            wenn (xhr.readyState === 4) {
                Ende = neues Date().getTime();
                const Größe = xhr.getResponseHeader('Content-Length') / 1024;
                const Geschwindigkeit = Größe * 1000 / (Ende - Start)
                Entschlossenheit (Geschwindigkeit);
            }
        }
        xhr.open('GET', URL);
        xhr.senden();
    }).catch(err => { throw err });
}

Downlink-Geschwindigkeitstest

Funktion getSpeedWithDnlink() {
    // Downlink berechnet die Netzwerkgeschwindigkeit const connection = window.navigator.connection;
    if (Verbindung && Verbindung.Downlink) {
        Rückverbindung.Downlink * 1024 / 8;
    }
}

Umfassender Geschwindigkeitstest

Funktion getNetSpeed(URL, Zeiten) {
    // Downlink berechnet die Netzwerkgeschwindigkeit const connection = window.navigator.connection;
    if (Verbindung && Verbindung.Downlink) {
        Rückverbindung.Downlink * 1024 / 8;
    }
    //Geschwindigkeit mehrmals messen, um den Durchschnittswert zu ermitteln const arr = [];
    für (sei i = 0; i < mal; i++) {
        arr.push(getSpeedWithAjax(url));
    }
    returniere Promise.all(arr).then(Geschwindigkeiten => {
        sei Summe = 0;
        Geschwindigkeiten.fürJedes(Geschwindigkeit => {
            Summe += Geschwindigkeit;
        });
        Rückgabewert: Summe/Zeit;
    })
}

Ich habe ein npm-Paket für den obigen Code veröffentlicht, das heruntergeladen werden kann über

npm ich Netzwerk-Geschwindigkeitstest

Anwendung

importiere * von „Netzwerkgeschwindigkeitstest“;
getSpeedWithImg("upload/2022/web/mPJ2iq.jpg", 8.97).dann(
    Geschwindigkeit => {
        console.log(Geschwindigkeit);
    }
)

getSpeedWithAjax('./geschwindigkeit.jpg').then(Geschwindigkeit => {
    console.log(Geschwindigkeit);
});

getNetSpeed('./geschwindigkeit.jpg', 3).then(Geschwindigkeit => {
    console.log(Geschwindigkeit);
});

getSpeedWithDnlink();

npm-Paketadresse

https://www.npmjs.com/package/network-speed-test

Github-Adresse

https://github.com/penghuwan/network-speed-test

Oben finden Sie Einzelheiten zur Verwendung von JavaScript zum Messen der Netzwerkgeschwindigkeit. Weitere Informationen zur Verwendung von JavaScript zum Messen der Netzwerkgeschwindigkeit finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!