檢查某人的帶寬並根據它加載內容

我看到了一些問題，不回答這個問題，是否有可能使用java腳本檢查某些帶寬並基於它加載特定的內容？檢查某人的帶寬並根據它加載內容

英國廣播公司似乎給我低質量的圖像，當使用我的手機，並在中途茫然。

由這看起來這個很酷的服務做到這一點，它的CDN，所以它可能是服務器端。

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

有誰知道他們是如何做到的呢？或者我怎麼可以做到這一點使用asp.net或javascript，或社區開源插件。

我認爲這可能與https://github.com/yahoo/boomerang/但不知道這是它的真正目的。

來源

2012-12-21 Paul

而當你使用你的手機，你處於文明的中間會發生什麼？你知道用戶代理的用途嗎？ –

是啊，它加載更好質量的圖像，這在黑莓上。 – Paul

通過瀏覽器或應用程序？如果您使用的是應用程序...它將訪問用於連接網絡的硬件信息，信號強度和技術（2G，3G，LTE，WiFi），因此在這種情況下，應用程序可以決定要消耗多少帶寬。順便說一句，瀏覽器也是一個應用程序，所以，呃...你最好用你的筆記本電腦，USB調制解調器和瀏覽器來測試它，並說它是否仍然有效。 –

基本上，你這樣做是這樣的：

啓動一個定時器
負載通過一個固定大小的文件，如圖片一個Ajax調用
停止計時器
取一些樣品，並計算平均badwidth

Somethign LIK 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();將無法在所有的瀏覽器，你應該檢查用戶代理，並使用正確的

，當然還有它只是一個估計值。

繼承人JSBin例如

來源

2012-12-21 10:47:34 C5H8NNaO4

這個解決方案比我的更準確！ – Greg

@ c5h8nnao4 ..味精L-穀氨酸鈉:)） – agpt

試用前禁用緩存。或者根據示例，第一個請求將從遠程服務器下載，其餘請求將從緩存中提供。 –

啓動計時器。
發送一個AJAX請求到你的服務器，請求一個已知大小的文件。
當AJAX請求完成加載時，停止計時器，並根據傳遞的時間和文件大小計算帶寬。

JavaScript的問題是用戶可以禁用它。（這是手機上較爲常見，這恰好是更好與更小的圖像）

來源

2012-12-21 10:13:04 Cerbrus

這將工作，但可以基於此一個Ajax請求在一個時間點是有風險的，您的服務器可能正在加載或客戶端網絡可能正忙。我認爲不止一次這樣做並且將內容基於平均帶寬是很好的。 – Paul

@保羅：這是一個公平點。但是，在客戶端，您不希望在擁有「穩定」帶寬數據後等待映像使用。我建議使用JavaScript加載圖像，向這些圖像添加一個「load」事件監聽器，計算帶寬並在本地存儲帶寬。這樣您就可以開始加載一些小圖像，獲得平均帶寬，並動態修改加載的圖像。 – Cerbrus

你認爲這會起作用嗎？在服務器端使用您自己的HTTP處理程序來處理特殊的「小型」文件。在服務器端啓動計時器，打開測試文件（例如您的主站點的徽標）並通過寫入輸出流發送它。一旦達到EOF（客戶端完成加載內容），然後停止你的計時器。 –

我基於時序圖像下載（參考：http://www.ehow.com/how_5804819_detect-connection-speed-javascript.html）撞倒this up

字警告，雖然：

它說我的速度是1.81Mbps，

但根據SpeedTest。淨我的速度是這樣的：

enter image description here

定時下載的邏輯似乎是正確的，但不知道這是否是準確的？

來源

2012-12-21 10:51:31 Greg

這是因爲服務器的地區speedtest.net總是擊中您當地的區域，而aws.amazon.com可能在不同的地區。 –

嗯，就像我在我的評論說，你可以選擇2種方法：

1）你是一個移動應用程序的情況下，那麼你就可以查詢所用的設備直接，所以你可以通知技術服務器直接提供哪些類型（和大小）的內容。我認爲手機差距可以幫助您使用JavaScript訪問一些原生移動API。

2）服務器計時器的事情。您可以自己「提供」某些文件，可以說您的着陸頁中有一個神奇的文件，只要客戶端請求文件，就可以用自定義處理程序抓取這個HTTP請求。您通過寫入輸出流來「手動」提供文件，然後測量發送的字節數和到達EOF所用的時間，然後可以以某種方式測量帶寬。將此與會話cookie結合使用，每個連接的瀏覽器都有這些信息。

來源

2012-12-21 11:11:35

雖然這不是一個答案，但重要的是要注意測量帶寬並不總是可靠的。

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

套用上面：

...下載通過它採取下載它們的時間劃分的位數......是真的，當你下載一個大文件通過單一預熱的TCP連接。情況很少。典型的頁面加載場景：

初始HTML頁面使用慢啓動機制下載，所以測量將顯著低估可用帶寬

CSS和JavaScript的外部資源加載 - 新的TCP連接的集合，全部處於其慢啓動階段，並且它們不一定都是相同的目標服務器

圖像加載 - 多個連接，每個連接下載一個資源。問題在於這些連接並不總是處於其生命週期的同一階段。有些可能處於啓動緩慢階段;有些可能遭受了數據包丟失，從而減少了它們試圖填充的窗口和帶寬;有些可能是預熱的TCP連接，已準備好填充帶寬。這些TCP連接不一定都是同一個目標服務器，並且朝向各個目標服務器的帶寬可能彼此不同。

因此，估計帶寬是可能的，但這遠非簡單，而且它可能只適用於頁面加載過程的某些階段。而且由於有多個到各種目標服務器的TCP連接是常見的（例如，CDN可以託管網頁的圖像資源），所以我們無法確切知道我們要測量的帶寬是多少。

由於這是一個老問題，在文章末尾的替代建議是考慮到最近srcset attribute爲響應圖像，它可以讓瀏覽器決定要加載基於什麼它知道哪些資產（應比我們多）。這聽起來像it's weighted more towards just determining resolution，但也許隨着支持的提升，它會變得更加智能。

來源

2014-11-04 15:10:58 drzaus

我已經發布BwCh這是一個開源的JavaScript API來檢測帶寬的基於Web的環境

它是建立與ES2015。它使用了一些最新的JavaScript創新（截至2016年4月，目前支持Chrome 48+ for Android的window.navigator.connection），以便爲移動設備和桌面設備提供靈活的方法來檢測帶寬。它是圖像預加載的後備/補充，以檢測那些最新的API不可用的帶寬。

來源

2016-04-07 11:04:26

檢查某人的帶寬並根據它加載內容

回答

相關問題