web-dev-qa-db-ja.com

JavaScriptでインターネット速度を検出する方法は？

ユーザーのインターネット速度を検出してページに表示するJavaScriptページを作成するにはどうすればよいですか？ 「インターネット速度は??/?? Kb/s」のようなものです。

javascriptdownload-speed
182
Sharon Haim Pour

ある程度可能ですが、実際には正確ではありません。アイデアは、既知のファイルサイズで画像をロードし、その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.12 Mbpsの小さな差が示されました。

テストの整合性を確保するには、Chrome devツールの調整を有効にしてコードを実行し、結果が制限に一致するかどうかを確認します。 （クレジットは ser2841 :)に移動します）

留意すべき重要事項：

  1. 使用する画像は適切に最適化および圧縮する必要があります。そうでない場合、Webサーバーによる接続のデフォルトの圧縮は、実際よりも大きな速度を示す可能性があります。別のオプションは、非圧縮ファイル形式の使用です。 jpg （ これを指摘している のRauli Rajandeに感謝します- リマインダ のFluxineに感謝します）

  2. 上記のキャッシュバスターメカニズムは、クエリ文字列パラメーターを無視するように構成できる一部のCDNサーバーでは機能しない可能性があります。したがって、イメージ自体にキャッシュ制御ヘッダーをより適切に設定できます。 （ これを指摘している ）のorcamanに感謝します）

262
Shadow Wizard

まあ、これは2017年ですので、何らかの情報を取得するためのネットワーク情報APIを持っています（現在のところブラウザ間でのサポートは制限されていますが）推定ダウンリンク速度情報：

navigator.connection.downlink

これは、有効な帯域幅の推定値であり、1秒あたりのビット数です。ブラウザは、最近アクティブになった接続で最近観測されたアプリケーション層のスループットからこの推定を行います。言うまでもなく、このアプローチの最大の利点は、帯域幅/速度の計算だけのためにコンテンツをダウンロードする必要がないことです。

これと他のいくつかの関連属性を見ることができます here

サポートが限定的であり、ブラウザ間で実装が異なるため（2017年11月現在）、 this 詳細を読むことを強くお勧めします。

47
Punit S

StackOverflowのこの他の回答 で概要を説明しているように、さまざまなサイズのファイルのダウンロードのタイミングをとることでこれを行うことができます（小さな開始、接続が許可しているようであればランプアップ）、キャッシュヘッダーを介して確認しますまた、ファイルは実際にはリモートサーバーから読み取られ、キャッシュから取得されません。これは必ずしも自分のサーバーを持っている必要はありません（ファイルは S ​​または同様のものから来る可能性があります）が、接続速度をテストするためにファイルを取得する場所が必要になります。

ただし、ポイントインタイム帯域幅テストは、他のウィンドウでダウンロードされる他のアイテム、サーバーの速度、途中のリンクなどの影響を受けるため、信頼性が低いことで有名です。しかし、大まかなアイデアを得ることができます。この種の手法を使用します。

19
T.J. Crowder

ユーザーの接続速度が、作業中のサイトの一部の機能を有効または無効にするのに十分な速さであるかどうかをすばやく判断する方法が必要でした。単一の（小さな）イメージをダウンロードするのにかかる平均時間多くの場合、私のテストではかなり正確に機能しており、たとえば3GとWi-Fiを明確に区別できるため、誰かがもっとエレガントなバージョンやjQueryプラグインを作成できる可能性があります。

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

画像のトリックはクールですが、私のテストでは、いくつかのajax呼び出しが完了する前にロードしていました。

2017年の適切な解決策は、ワーカーを使用することです（ http://caniuse.com/#feat=webworkers ）。

ワーカーは次のようになります。

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

ワーカーを呼び出すjsファイル：

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

私が書いたPloneパッケージから取ったコード：

7
alepisa

速度のテストには画像を使用することをお勧めします。ただし、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未満のファイルではうまく機能しません。複数のダウンロード試行で集計結果を実行する必要があります。

5
Akshar

同様のものが必要だったので、 https://github.com/beradrian/jsbandwidth と書きました。これは https://code.google.com/p/jsbandwidth/ の書き直しです。

アイデアは、Ajaxを介して2つの呼び出しを行うことです。1つはダウンロード用で、もう1つはPOST経由でアップロードします。

jQuery.ajaxまたはAngular $httpの両方で動作するはずです。

3
Adrian Ber

punit Sの回答のおかげで、動的な接続速度の変化を検出するために、次のコードを使用できます：

navigator.connection.onchange = function () {
 //do what you need to do ,on speed change event
 console.log('Connection Speed Changed');
}
1
Mehdi Maghrooni

ページの読み込み時間を決定できます。次のスクリプトを使用して、ページを完全にロードするのにかかる時間を測定してください。

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

ナビゲーションタイミングの3WCページを参照してください。
https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html

0
mintedsky