JavaScript でネットワーク速度をテストする方法

序文

問題はこれです。最近、現在のネットワーク速度を判定し、フロントエンドでのリクエストの範囲を制御して、段階的に大きなファイルをリクエストするライブラリを作成しようとしました。私はまだこれについて 1 行もコードを書いていません。この要件のアイデアが少し非現実的であることに突然気付いただけでなく、フロントエンドはネットワーク速度をどのように決定すればよいのかと突然自問したからです。？？？！

ネットワーク速度のフロントエンド判定原理のまとめ

(注: 以下のネットワーク速度のデフォルトの単位は KB/S です) 関連情報を調べると、アイデアは主に次のカテゴリに分かれていることがわかりました。

1. img を読み込むか Ajax リクエストを開始してネットワーク速度を計算する

サーバーと同じドメインにある画像などのファイルを要求すると、要求の開始と応答の受信の 2 つの時点が Date.now でマークされます。これは、Date.now が 1970 年 1 月 1 日 (UTC) から現在の時刻までのミリ秒数であるためです。そのため、end - start を使用して時間差 (ms) を見つけ、次のように計算します。

ファイルサイズ (KB) * 1000 / (終了 - 開始)

ネットワーク速度（KB/S）を計算できます。

ファイルを要求するには、img 経由で読み込む方法と AJAX 経由で読み込む方法の 2 つがあります。

img オブジェクトを作成し、onload リスナーコールバックを設定して src を指定すると、src が指定されると画像リソースがロードされ、完了すると onload コールバックが呼び出されます。タイミングに応じて開始と終了を別々にマークできます。
AJAX 経由でリクエスト、つまり XHR オブジェクトを作成します。onreadystatechange コールバックで、readystate = 4 のときに読み込みが完了したと判断し、タイミングに応じてそれぞれ開始と終了をマークします。

2.window.navigator.connection.downlink ネットワーク速度クエリ

また、いくつかの高度な H5 API を通じてこれを実現することもできます。たとえば、ここでは window.navigator.connection.downlink を使用してクエリを実行できますが、ご存知のように、この種の API には独自の特性、つまり古い互換性の問題があるため、通常は予備手段として使用し、機能検出を通じて、使用できる場合は使用し、使用できない場合は他の方法を使用します。なお、ダウンリンクの単位はmbpsであり、これをKB/Sに変換する式は次のようになります。

ナビゲーター接続ダウンリンク * 1024 / 8

1024 を掛けるのはわかりますが、その後になぜ 8 で割る必要があるのでしょうか?これは、mbps の「b」がビットを表し、KB/s の「B」がバイトを表すためです。1 バイト (b) = 8 ビットなので、8 で割る必要があります。

3. 一般的に、ネットワーク速度はファイルのリクエストによって測定されます

1 回のリクエストではエラーが発生する可能性があるため、複数回リクエストして平均を計算することができます。

ネットワーク速度を判断するためのフロントエンド方式とその長所と短所

img 読み込み速度テスト: img オブジェクトの読み込みを使用してネットワーク速度を測定します。利点: クロスドメインの問題はありません。デメリット: (1) ファイルサイズを自分で測定し、fileSizeパラメータを提供する必要がある。(2) ファイルは画像でなければならない。(3) ファイルサイズを柔軟に制御できない。
Ajax 速度テスト: Ajax を介してネットワーク速度を測定します。メリット：(1)レスポンスヘッダーから取得できるため、ファイルサイズパラメータが不要。(2)テストファイルは画像である必要はなく、データ量を柔軟に制御できる。デメリット: クロスドメインの問題
ダウンリンク速度テスト: navigator.connection.downlink を通じてネットワーク速度を読み取ります。利点: パラメータは必要ありません。デメリット: 1. 互換性が非常に問題となる、2. 帯域幅のクエリはリアルタイムではなく、数分間隔で実行される
包括的な実装: 最初にダウンリンク速度テストを試し、そうでない場合は AJAX 速度テストを複数回使用して平均値を計算します。

画像読み込み速度テスト

関数 getSpeedWithImg(imgUrl, ファイルサイズ) {
    新しい Promise を返します ((resolve, reject) => {
        start = null とします。
        end = null とします。
        img = document.createElement('img'); とします。
        開始 = 新しい Date().getTime();
        img.onload = 関数 (e) {
            end = 新しい Date().getTime();
            定数速度 = ファイルサイズ * 1000 / (終了 - 開始)
            解決(速度);
        }
        テキストファイル img.src
    }).catch(err => { throw err });
}

Ajax スピードテスト

関数 getSpeedWithAjax(url) {
    新しい Promise を返します ((resolve, reject) => {
        start = null とします。
        end = null とします。
        開始 = 新しい Date().getTime();
        const xhr = 新しい XMLHttpRequest();
        xhr.onreadystatechange = 関数 () {
            xhr.readyState === 4の場合{
                end = 新しい Date().getTime();
                定数サイズ = xhr.getResponseHeader('コンテンツの長さ') / 1024;
                定数速度 = サイズ * 1000 / (終了 - 開始)
                解決(速度);
            }
        }
        xhr.open('GET', url);
        xhr.send();
    }).catch(err => { throw err });
}

ダウンリンク速度テスト

関数 getSpeedWithDnlink() {
    // ダウンリンクはネットワーク速度を計算します const connection = window.navigator.connection;
    if (接続 && connection.downlink) {
        connection.downlink * 1024 / 8 を返します。
    }
}

総合的な速度テスト

関数 getNetSpeed(url, times) {
    // ダウンリンクはネットワーク速度を計算します const connection = window.navigator.connection;
    if (接続 && connection.downlink) {
        connection.downlink * 1024 / 8 を返します。
    }
    //速度を複数回測定して平均値を求めます。const arr = [];
    (i = 0 とします; i < 回; i++) {
        arr.push(getSpeedWithAjax(url));
    }
    Promise.all(arr).then(speeds => { を返します。
        合計を 0 とします。
        速度.forEach(速度 => {
            合計 += 速度;
        });
        合計/回数を返します。
    })
}

上記のコードのnpmパッケージを公開しました。ダウンロードはこちらから。

npm i ネットワーク速度テスト

使い方

'network-speed-test' から * をインポートします。
getSpeedWithImg("upload/2022/web/mPJ2iq.jpg", 8.97) を実行してから(
    速度 => {
        console.log(速度);
    }
）

getSpeedWithAjax('./speed.jpg').then(speed => {
    console.log(速度);
});

getNetSpeed('./speed.jpg', 3).then(speed => {
    console.log(速度);
});

スピードリンクを取得します。