緩慢加載 - 如何正確加載頁面以防止阻塞圖像（排隊）

Question

頁面加載速度比預期慢。我查了時間表與螢火蟲，我看到了很多像堵：

http://i.imgur.com/tenTNVH.png

我想我做錯了什麼。 （我知道我在這裏有雙jQuery，可以消除這個錯誤），但是在全球範圍內，有什麼方法可以加載與js平行的圖像？

Answer 1

發生這種情況的原因不是因爲圖像被js阻止，而是因爲瀏覽器並行連接數量受限於同一服務器（某些註釋大約是6-7） 如果您仔細查看時間表，看到有這樣的限制 - 同時下載的文件不超過7個，下一個文件在當前文件下載完成時啓動。 過去有一些討厭的技巧來避免這種限制，比如將圖像放在子域上，並像其他服務器那樣並行加載它們，但是有更好的方法來提高加載性能。在努力/結果方面最有效的是：

• 使用js級聯/最小化工具鏈。讓所有的JS在一兩個文件中留下您的連接池用於其他下載。在你的情況 - 你有jQuery UI的版本的jQuery和。你真的需要所有這些嗎？擁有兩個文件而不是5個文件會顯着減少阻塞，特別是考慮到文件無法識別和龐大的事實。
• 將CDN用於第三方庫。有公共免費的，如谷歌CDN。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>。這也有很大的可能，它已經在瀏覽器的緩存中的優勢
• 將您的圖像拼接成精靈。如果你有很多小圖片，這不是很滿意，但與用戶界面相關。有很多技巧可以實現它
• 如果服務器可用，請在服務器上啓用SPDY。這可以提高下載速度，而不是通過刪除阻止，但通過刪除連接開銷。

Answer 2

阻塞通常發生在對同一主機有超過X個並行請求時（其16位，每個瀏覽器不同）。

爲了改善這種情況，你有幾種選擇：

1. 對於圖像 - 分手了你的媒體內容到不同的主機（子域，從中可以提供相同的內容）
2. 對於js和CSS-儘量縮小和連接服務器上的文件，以便它們需要更少的請求來檢索。
3. 對於圖標等，如果可能的話，嘗試將它們組合成精靈。

即使世界一個很好的文章關於它在這裏：http://gtmetrix.com/parallelize-downloads-across-hostnames.html