2011-09-12 110 views
0

有誰知道圖像是如何加載每個瀏覽器?對於內聯圖像,對相同圖像執行兩次調用會觸發兩個服務器請求還是隻有一個?對下載的圖像的後續調用如何處理?雪碧優化?

對於CSS圖像,調用CSS文件時是在CSS中調用的所有圖像,還是在調用圖像的單獨類時使用?作爲一個極端的例子,如果我有一個調用200個獨立圖像的CSS文件,但在第一頁加載時只調用其中一個圖像,那麼所有的200個被調用還是隻有一個?如果加載的瀏覽器有不同的加載方式?

+0

更改了這個標題,因爲它演變成更多關於如何優化精靈的討論。 –

回答

1

圖片的URL應該引起只有一個服務器PER PAGE擊中。對於該頁面的點擊,瀏覽器可以假設圖像將保持不變,即使圖像在頁面上出現多次

對於下一頁,瀏覽器將傾向於執行「if-modified-since」請求圖像,並且只有在自昨晚以來修改了圖像的情況下才能獲得新圖像。但是,它只會每頁都做一次。

一旦圖像被下載並緩存,您很可能只會看到200個獲取請求和304個未修改的響應,直到圖像脫離緩存。

+0

因此,對於我的問題的第二部分,CSS文件中引用的所有圖像導致服務器命中或只是那些正在使用當前頁面? –

+0

據我所知,在CSS中的任何url()引用將導致該網址被擊中。也許有一個瀏覽器只通過獲取頁​​面中實際使用的瀏覽器來優化,但是誰知道。 –

+0

我問的原因是我想確定使用一個主精靈還是多個較小精靈更好。例如,如果我將10張圖像製作爲精靈圖像,其中5張圖像僅在我的網站的第三張圖像上使用,那麼最好是兩張精靈圖像?如果CSS文件中的所有圖像都在頁面加載時下載,那麼我會認爲不是,但如果只下載頁面調用的類中的圖像被下載,那麼我會認爲是。思考? –

1

你居然撥打電話每一個形象,這就是爲什麼它建議使用CSS sprites在適當的時候

+0

所以,即使圖像被一個沒有在頁面上使用的類調用,它仍然會被加載,因爲它在CSS文件中? –

+0

以後如何處理同一圖像?我調用同一個精靈20次還是應該將這些類串起來並只調用精靈一次? –

+0

瀏覽器不會調用精靈20次,1次就足夠了,因爲下次它已經加載了 –