如何高效地交付大量資產（圖片）？

Question

我有一個網頁，負責將超過500張圖片發送到瀏覽器。大小在50kb到80kb之間。

正在使用的服務器是nginx的並有一個清漆代理也被使用。

現在，我怎樣才能使這個過程中，最有效的它都不可能？

我只有兩個想法，因此想從這裏經驗的人一些開關輸入。

我唯一的想法是：

1. 設置多個子域，併爲來自這些批次。我相信使用的最佳子域數是12.

2. 使用ajax在用戶向下滾動時僅在需要時纔將批次加載到瀏覽器。

我認爲這裏的選項2並不能真正解決問題;只是解決它。所以我想專注於實際使這個過程最有效率和最快速度。

Answer 1

你加載1頁與500 * 50KB〜數據25MB，這是一個完全瘋狂的頁面大小！

不管你做什麼，這總是會覺得慢相比，average pagesisze of around 1 MB currently。在需要時通過AJAX動態加載大部分內容更有意義。或者你可以將它分成多個plages。

如果你真的是一個巨大的非動態頁面然後設置：

• 確保您有緩存頭設置爲允許緩存（不會與第一負載HEP）
• 主問題（除了總​​體規模外）是你有很多資源要求。有3種方式來限制的後果：
  • 使用分片（即不同的子域）。這是有效的，因爲瀏覽器每個主機最多隻能打開4個連接，所以通過使用多個域，您可以並行請求/加載更多資源。
  • 把你的圖像放在一個精靈（即一個大圖像，並使用CSS來顯示你想要的位）
  • 設置你的服務器使用谷歌的SPDY。這幾乎消除了 大量資源的問題。缺點是，它仍然是實驗（即你需要用補丁 重新編譯nginx的），而不是所有的browers尚不支持