1. ホーム
  2. ジャバスクリプト

[解決済み】JavaScriptでインターネットの速度を検出する方法?

2022-04-15 04:01:11

質問

ユーザーのインターネット速度を検知してページに表示するJavaScriptのページを作るにはどうしたらいいですか?以下のようなものです。 "あなたのインターネット速度は?Kb/s" .

解決方法は?

ある程度は可能ですが、正確ではありません。 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.12Mbpsの小さな差が出ました。

テストの整合性を確保するため、Chrome開発ツールのスロットリングを有効にした状態でコードを実行し、その結果が制限と一致するかどうかを確認することができます。 (クレジット表記は ユーザー284130 :))

大切なこと

  1. 使用される画像は適切に最適化され、圧縮されている必要があります。そうでない場合、ウェブサーバーによる接続時のデフォルトの圧縮では、実際の速度よりも大きく表示される可能性があります。また、圧縮できないファイル形式(例:jpg)を使用するのも一つの方法です。 <サブ (Rauli Rajande氏に感謝します。 ご指摘の通り とFluxineの リマインドミー )

  2. CDN サーバーによっては、クエリ文字列パラメータを無視するように設定できるため、上記のキャッシュバスター機構は機能しない場合があります。 <サブ (orcamanに感謝 ご指摘の通り ) )

  3. 画像サイズは大きければ大きいほどよい。5MBでも十分ですが、さらに大きな画像を使用できれば、より正確なテストができます。