帯域幅を確認してそれに基づいてコンテンツをロードする

Question

私はこれに答えることのできない質問を見ました。それは、Javaスクリプトを使用して帯域幅をチェックし、

BBCは、携帯電話を使用しているときやどこにいても低画質の画像を表示するようです。

このクールなサービスは、これとCDNをサーバー側にすることができます。

http://www.resrc.it/docs/

誰もが、彼らはそれを行う方法を知っていますか？どのように私はasp.netやjavascript、またはコミュニティのオープンソースプラグインを使用してそれを行うことができますか？

https://github.com/yahoo/boomerang/と考えられるかもしれませんが、これが本当の目的かどうかは分かりません。

Answer 1

基本的にはこのようにこれを行う：を通じて例えば画像を固定サイズのファイルをロードし

• スタートタイマー
• AJAX呼び出し
• ストップタイマー
• いくつかのサンプルを取り、平均badwidth

Somethignリクを計算Eこれは仕事ができる：

//http://upload.wikimedia.org/wikipedia/commons/5/51/Google.png 
//Size = 238 KB 
function measureBW(cnt, cb) { 
    var start = new Date().getTime(); 
    var bandwidth; 
    var i = 0; 
    (function rec() { 
     var xmlHttp = new XMLHttpRequest(); 
     xmlHttp.open('GET', 'http://upload.wikimedia.org/wikipedia/commons/5/51/Google.png', true); 

     xmlHttp.onreadystatechange = function() { 
      if (xmlHttp.readyState == 4) { 
       var x = new Date().getTime() - start; 
       bw = Number(((238/(x/1000)))); 
       bandwidth = ((bandwidth || bw) + bw)/2; 
       i++; 
       if (i < cnt) { 
       start = new Date().getTime();rec(); 
       } 
       else cb(bandwidth.toFixed(0)); 
      } 
     }; 
     xmlHttp.send(null); 
    })(); 

} 

measureBW(10, function (e) { 
    console.log(e); 
}); 

をvar xmlHttp = new XMLHttpRequest();は、すべてのブラウザで動作していないわけではありませんことを、あなたは、ユーザーエージェントをチェックし、右の1

そしてもちろん、そのわずか推定値を使用する必要があります。

相続人JSBin例

Answer 2

1. タイマーを開始します。
2. サーバにAJAXリクエストを送信し、既知のサイズのファイルをリクエストします。
3. AJAXリクエストが完了したら、タイマーを停止し、渡された時間とファイルサイズから帯域幅を計算します。

JavaScriptの問題は、ユーザーが無効にできることです。 （携帯電話でより一般的なされており、それは小さな画像をオフに優れていることが起こる）

Answer 3

私は、イメージのダウンロード（参照：http://www.ehow.com/how_5804819_detect-connection-speed-javascript.html）タイミングに基づいてthis upをノックしました：それは私の速度は1.81Mbpsであると言う

をものの、警告の言葉を,

しかし、SpeedTestによると、ネット私の速度は、このです：

ダウンロードタイミングのロジックは、それが正確だかどうかわから権利はありませんが？

Answer 4

まあ、私は私のコメントで言ったように、あなたは2つのアプローチを選択することができます。

1）あなたは、モバイルアプリのコンテキストであるあなたが知らせることができますので、あなたは、直接デバイスによって使用される技術を照会することができますあなたがレンダリングすることができるコンテンツのタイプ（およびサイズ）をサーバーが直接的に決定します。私は、携帯電話のギャップが、JavaScriptを使用しているネイティブモバイルAPIにアクセスするのに役立つと思います。

2）サーバータイマーのこと。いくつかのファイルを自分自身で "提供"することができます。ランディングページにマジックファイルがあり、クライアントがファイルをリクエストするとすぐに、このHTTPリクエストをカスタムハンドラで取得できます。あなたは "手動で"出力ストリームに書き込むことによってファイルを提供し、送信バイト数とEOFに到達するまでの時間を測定すると、どうにかして帯域幅を測定できます。これをセッションCookieと組み合わせると、接続されたブラウザごとにこの情報が得られます。

Answer 5

これは答えではありませんが、帯域幅の測定が必ずしも信頼できるとは限りません。

http://www.smashingmagazine.com/2013/01/09/bandwidth-media-queries-we-dont-need-em/

上記の言い換えするには：あなたは以上の大きなファイルをダウンロードするとき

...それはそれらをダウンロードするために要した時間で割っダウンロードしたビット数が...本当です単一のウォームアップアップTCP接続。それはまれです。 典型的なページのロードのシナリオ：

1. 初期HTMLページは、測定値が大幅に
2. CSSやJavaScriptの外部リソースがロードされ、利用可能な帯域幅を過小評価しますので、スロースタートメカニズムを使用してダウンロードされる - 新しいTCP接続のコレクションを、すべてがスロースタートフェーズであり、必ずしもすべてが同じ宛先サーバーにあるわけではありません。
3. イメージがロードされます。複数の接続があり、それぞれがリソースをダウンロードします。問題は、これらの接続が常にライフサイクルの同じ段階にあるとは限らないことです。一部はスロースタート段階にあるかもしれません。パケットロスを起こした可能性があり、そのためにウィンドウと帯域幅を減らしている可能性があります。いくつかはウォームアップされたTCP接続であり、帯域幅を満たす準備ができています。これらのTCP接続は、必ずしもすべてが同じ宛先サーバーにあるとは限らず、さまざまな宛先サーバーに向かう帯域幅が互いに異なる場合があります。

したがって、帯域幅を見積もることは可能ですが、単純ではありません。ページローディングプロセスの特定のフェーズでのみ可能です。また、さまざまな宛先サーバへの複数のTCP接続を持つことが一般的です（たとえば、CDNがWebページのイメージリソースをホストできるなど）ため、測定したい帯域幅が実際に何であるかはわかりません。

これは古い質問ですので、記事の最後に代替案は、ブラウザがそれが（そのはず知っているものは何でもに基づいてロードする資産を決めることができます応答のイメージのために、より最近のsrcset attributeを考慮することです私たち以上になります）。 it's weighted more towards just determining resolutionのように聞こえますが、サポートが上がるにつれてスマートになるかもしれません。

Answer 6

私は、Webベースの環境

それはES2015を使用して構築されるため、帯域幅を検出するためのオープンソースのJavaScript APIがあるBwChをリリースしています。モバイルデバイスとデスクトップデバイスの両方の帯域幅を検出するための柔軟な方法を提供するため、最新のJavaScript技術革新（2014年4月現在、Chrome用のChrome 48以降でサポートされているwindow.navigator.connection）が使用されています。これらの最新のAPIが利用できない帯域幅を検出するために、画像のプリローディングを補完/補完します。