ユーザーのインターネット速度を検出し、それをページに表示する JavaScript ページを作成するにはどうすればよいですか? 「インターネット速度は ??/?? Kb/s です」のような表示。
ベストアンサー1
ある程度は可能ですが、正確ではありません。アイデアとしては、ファイル サイズがわかっている画像を読み込み、そのonloadイベントでそのイベントがトリガーされるまでに経過した時間を測定し、この時間を画像ファイル サイズで割ります。
例はここにあります:JavaScriptを使用して速度を計算する
そこで提案された修正を適用するテストケース:
//JUST AN EXAMPLE, PLEASE USE YOUR OWN PICTURE!
var imageAddr = "https://upload.wikimedia.org/wikipedia/commons/3/3a/Bloemen_van_adderwortel_%28Persicaria_bistorta%2C_synoniem%2C_Polygonum_bistorta%29_06-06-2021._%28d.j.b%29.jpg";
var downloadSize = 7300000; //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" style="font-family:sans-serif">JavaScript is turned off, or your browser is realllllly slow</h1>簡単な比較「本物の」スピードテストサービス大きな画像を使用した場合、0.12 Mbps の小さな差が見られました。
テストの整合性を確保するには、Chrome開発ツールのスロットリングを有効にしてコードを実行し、結果が制限に一致するかどうかを確認します。（クレジットはユーザー284130:))
留意すべき重要な点:
使用する画像は適切に最適化され、圧縮されている必要があります。そうでない場合、Webサーバーによる接続のデフォルトの圧縮により、実際よりも速度が大きくなる可能性があります。別のオプションとして、圧縮できないファイル形式（例：jpg）を使用する方法があります。（Rauli Rajandeに感謝します。これを指摘するそしてFluxine私に思い出させる）
上記のキャッシュバスターメカニズムは、クエリ文字列パラメータを無視するように設定できる一部のCDNサーバーでは機能しない可能性があります。そのため、画像自体にキャッシュ制御ヘッダーを設定することをお勧めします。（orcamanに感謝します。これを指摘する））
画像サイズは大きいほど良いです。画像が大きいほどテストの精度が上がります。5 MB が適切ですが、さらに大きいサイズを使用できる場合はさらに良いでしょう。
まずデバイスの画面サイズを確認し、それに応じて画像サイズを選択することを検討してください。画面が小さいと接続速度が遅くなることが多いため、小さい画像でも読み取りが良好になります。
最後に、他のものが並行してダウンロードされる可能性があることに注意してください。したがって、正確な読み取りが必要な場合は、すべてのダウンロードが完了した後に実行してください。