優化圖像

在製作網頁時，我注意到在向表中添加更多行時性能（客戶端）性能大幅下降。我表格中的每一行由相同的4-5個不同的32x32圖標（操作鏈接）和大約100個字符組成。當有10行時，網頁流暢運行 - 滾動和jQuery動畫流暢。現在我的桌子有100多行（分頁不是一個選項），動畫真的很慢，很粗糙。
有沒有辦法優化圖像本身，但代碼，以提高性能？優化圖像

現在我有標籤中的圖像。如果我將它們改爲背景圖像，它會有什麼區別嗎？瀏覽器會減少加載嗎？

來源

2011-10-27 Sergey Telshevsky

如果圖像出現問題，很可能是因爲客戶端試圖爲每一行重新下載圖像，即使圖像很小，效率也非常低。您可以使用諸如Fiddler之類的工具，通過檢查每次重新加載頁面時是否收到大量相同的請求來測試這種情況是否屬實。

如果這是問題，請查看CSS sprites。使用這種方法，您可以將1個圖像傳送到客戶端，並且這個圖像將用於渲染所有行上的所有圖標。

來源

2011-10-27 17:51:18 Briguy37

謝謝你的回覆，我很擔心這個問題，但這對我來說沒有多大意義，因爲問題在於系統的後端。更讓我困擾的是，如果將相同的圖像分別存儲在RAM中，我只需要對瀏覽器使用的方法進行一些解釋。怎麼樣的精靈 - 如果圖像下載一次，客戶端存儲一次或多次，因爲我們在標記/ CSS中引用它？謝謝你的提琴手工具，將研究它。 –

@Vlakarados：只要你用於加載/檢索圖像的URL是固定的，客戶端瀏覽器應該足夠聰明，可以將圖像存儲一次，並在將元素繪製到窗口中時根據需要重用。 – Briguy37

回答

相關問題