Http request - IMG vs TEXT？

如下所示（使用IE的F12開發人員工具捕獲）的時間表說明了IE如何處理頁面其中一個<img>標籤一堆text的後位於：Http request - IMG vs TEXT？

第二行顯示的檢索圖像。由於圖像很小，因此所有圖像數據都與HTTP響應頭一起包含在同一個數據包中。

然而 - 接下來的時間線顯示，使其在通過IE瀏覽器接收數據的第一個數據包的時候<img>標籤位於文件的接近開始會發生什麼：

然而，在HTML的第一個數據包到達後不久，對圖像的請求就開始了。

結果，它需要更少的總時間來對頁面的底部檢索頁面和圖像

但（恕我直言）最好是把鏡像文件（包括定義尺寸）。（以便頁面加載速度更快）

但是 - 通過我的示例，它顯示了當img位於頂部時，頁面加載速度更快。

我錯過了什麼？

P.S.我的問題是一個簡短的摘要文本of this section

來源

2012-12-19 Royi Namir

「* ...但最佳實踐總是說把圖像（具有定義的尺寸）放在該頁面的底部...... *，」誰？需要參考 – Alexander

@Alexander（添加恕我直言），但尺寸應該在那裏（100％）。仍然，爲什麼總體時間在變化？請查看提供的鏈接。 –

瀏覽器只有擁有其網址才能開始下載圖片，因此越早提供網址越好。瀏覽器使用名爲Lookahead的策略來識別要下載的資源（http://blogs.msdn.com/b/ieinternals/archive/2010/04/01/ie8-lookahead-downloader-fixed.aspx）。爲什麼這篇文章用「Fiddler」標記？如果您正在運行Fiddler，則必須確保已啓用流式傳輸（http：//www.fiddler2。COM /小提琴手/幫助/ streaming.asp）。 – EricLaw

您錯過了幾點。首先，最佳實踐不僅是關於下載，而且關於渲染，因爲如果整個頁面下載3秒，但需要渲染另外2秒，則用戶等待5秒，而不是3秒。我不知道將圖像放在底部的最佳做法（對於腳本有這種做法），我知道的最佳做法是包含寬度和高度屬性，以便在下載圖像時不會阻止渲染。

您在測試中缺少的另一件事是並行下載，因爲瀏覽器限制了併發連接的數量，而您僅使用一個映像進行測試。爲了獲得可靠的結果，請使用更多的圖像進行測試，或使用真實的網頁進行測試。

來源

2012-12-19 08:54:49

你的部分是無關緊要的，因爲目前有6個併發連接限制，我的例子只討論了2.我沒有「缺少連接來處理所有請求「/ –

我的觀點是最佳實踐不是針對您的特定情況編寫的，但是對於一般情況下需要加載6個以上資源的情況 –

不過，爲什麼第二個示例的加載時間更短？ IMG文本與文本IMG有什麼區別？ –

我寧願打擾少數連接， - 一次加載整個頁面。分割界面和內容部分。一旦加載界面 - 它可以要求用戶等待並通知他有關連接速度。然後放置一個進度條並通知用戶事情進展情況。

來源

2012-12-19 09:29:12

Http request - IMG vs TEXT？

回答

相關問題