好的技術，每頁提供幾個圖像

我有一個Web應用程序，需要每頁提供大量的小圖片（最多100）。我可以使用緩存來減少對數據庫/後端的調用，但是由於必須爲圖像本身提出如此多的單獨請求，因此需要一些時間來請求和呈現圖像，尤其是在較慢的連接上時。好的技術，每頁提供幾個圖像

爲網頁上的多個圖片提供哪些好的做法？我知道使用CDN（例如S3 + Cloudfront）可以減少http請求的瓶頸，並提供距離更近的地理位置的內容，並且只有在瀏覽器訪問用戶的視圖時纔可能通過Ajax加載圖像/內容。是否有其他技術可以爲圖像沉重的頁面提供顯着的性能提升？它們是否與硬件，前端或其他相關並不重要。

謝謝。

來源

2013-02-16 Tom

什麼是圖像？他們有關係嗎？也就是說，當你展示一個人時，你是否總是展示其他人呢？ – Oded 2013-02-16 19:48:22

@Oded：這些圖像都是不同的，一般都是10〜20kb左右的小jpegs。 – Tom 2013-02-16 19:49:50

問題更多的是如果它們共同使用。 – Oded 2013-02-16 19:52:19

您可以將圖像總是合併成一個單一的形象和使用CSS在同一時間（通常稱爲CSS精靈）

谷歌也有相當深入的文章他們是如何實現「即時顯示的僅部分預覽」，涵蓋了一些優化：

http://googlecode.blogspot.com/2010/11/instant-previews-under-hood.html?m=1

來源

2013-02-16 19:48:39

謝謝，但在這種情況下，圖像通過數據庫請求並且通常在應用程序中是「動態的」。刺激不是一種選擇。 – Tom 2013-02-16 19:50:42

@Tom - 你可以動態地動態... – Oded 2013-02-16 19:52:45

@Oded - 當然。然而，在這種情況下，圖像本身鏈接到更多的內容，它們可以由用戶編輯，用戶可以操縱它們的服務順序。如果我沿着這條路線走下去，我想我會比第一次嘗試解決更多的頭痛。 – Tom 2013-02-16 19:55:20

您可以使用圖像的不同的領域 - 這些都會在不同的線程比當前域調用。

您還可以將您的圖像託管在優化的靜態內容服務器上 - 這將比動態服務器更快。

上面可以擴展到幾個這樣的域 - 如果瀏覽器設置爲每個域有4個線程，那麼您添加的每個域將並行化爲額外的4個（這也是使用CDN的好處之一）。

另一種常見的技術，可能應用是利用CSS sprites - 如果你有一些圖片，通常用於在一起，你可以把它們放在一個單圖像並使用CSS，只顯示位在需要的地方需要。

來源

2013-02-16 19:51:55 Oded

在一個頁面請求中加載100個圖像會增加頁面加載時間，因爲每個圖像都需要時間在瀏覽器中加載。

簡單的技術是隻加載一個默認圖像，意味着每個100圖像的來源應該是共同的默認圖像，只有一個圖像不會花費太多時間加載。

當頁面加載它的所有內容，然後嘗試加載每個幫助jQuery的單個圖像。

使用lazyload jQuery插件在頁面加載後加載所有圖像。

這樣

<img class="lazy" src="default.jpg" data-original="img1.jpg" > 
<img class="lazy" src="default.jpg" data-original="img2.jpg" > 
<img class="lazy" src="default.jpg" data-original="img3.jpg" > 
....... 
<img class="lazy" src="default.jpg" data-original="img100.jpg">

，並在腳本中使用下面的代碼

$(document).ready(function(){ 
    $("img.lazy").lazyload(); 
});

您可以添加Expires頭到每一種都允許瀏覽器緩存他們，而要求他們的下一個請求圖像。

希望它能幫助你。

來源

2013-02-20 13:25:23

好的技術，每頁提供幾個圖像

回答

相關問題