[解決済み】JavaScriptでインターネットの速度を検出する方法?
質問
ユーザーのインターネット速度を検知してページに表示する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 :))
大切なこと
-
使用される画像は適切に最適化され、圧縮されている必要があります。そうでない場合、ウェブサーバーによる接続時のデフォルトの圧縮では、実際の速度よりも大きく表示される可能性があります。また、圧縮できないファイル形式(例:jpg)を使用するのも一つの方法です。 <サブ (Rauli Rajande氏に感謝します。 ご指摘の通り とFluxineの リマインドミー )
-
CDN サーバーによっては、クエリ文字列パラメータを無視するように設定できるため、上記のキャッシュバスター機構は機能しない場合があります。 <サブ (orcamanに感謝 ご指摘の通り ) )
-
画像サイズは大きければ大きいほどよい。5MBでも十分ですが、さらに大きな画像を使用できれば、より正確なテストができます。
関連
-
[解決済み】 Uncaught TypeError: data.push is not a function
-
[解決済み】JavaScriptのinnerHTMLで要素が更新されない
-
[解決済み】Javascript - ERR_CONTENT_LENGTH_MISMATCH
-
[解決済み】Uncaught SyntaxError: JSON の位置 0 に予期しないトークン u があります。
-
[解決済み】ES6マップオブジェクトをソートすることは可能ですか?
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] GUID / UUIDの作成方法
-
[解決済み] JavaScriptのオブジェクトをループスルーまたは列挙するにはどうすればよいですか?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Angular JS Uncaught Error。[インジェクター:モジュラー]。
-
[解決済み】「Uncaught TypeError: Chromeで "Illegal invocation "が発生する。
-
[解決済み】コンソールがUnterminated JSX contentsエラーを投げる【終了しました
-
[解決済み] テスト
-
[解決済み】Redux TypeError: 未定義のプロパティ 'apply' を読み取れない
-
[解決済み】TypeError: res.status は関数ではありません。
-
[解決済み】ETIMEDOUTエラーの対処方法は?
-
[解決済み】 \u003C とは何ですか?
-
[解決済み】Vueが定義されていない
-
[解決済み] 同じURLの画像を新しいものに更新する