瀏覽器文件緩存和304的區別？

02-06

1. 網頁重複載入了相同的js或css，只有第一次的載入會發送請求，後面的根本不會發送任何請求，是嗎？
2. css重複使用了背景圖片，那麼，瀏覽器是先遍歷整個css然後只請求一次圖片，還是第一張圖片發送請求，其他相同的圖片在發送請求前發現已經有緩存，而直接使用了緩存？
3. 瀏覽器對文件的緩存和304有什麼區別？

問題1

不一定，讀取過的文件在http header設置了expire(http 1.0) / max-age(http 1.1)，在正常瀏覽時，如未超時，並且瀏覽器也有緩存時，會直接從瀏覽器緩存取出，但如果你在當前頁面按刷新按鈕（F5）時，有的瀏覽器會再次向伺服器發出請求，有些瀏覽器不會。

問題2

CSS是一次渲染全部後再接著做其它工作，重複的圖片URL，在沒緩存的情況下，只會發出一次請求，如果相同的圖片URL已在頁面或內存中，不會再次請求。

問題3

瀏覽器緩存是存在瀏覽器本地的文件，304是HTTP狀態碼，伺服器用來標識這個文件沒修改，不返回內容，瀏覽器在接收到個狀態碼後，會使用瀏覽器已緩存的文件

一般情況下，

瀏覽器在發請求前，感覺自己可能緩存了某個文件，就先把自己緩存的文件信息放在請求頭裡。

伺服器在發送響應前，對比一下這個文件信息，發現瀏覽器緩存的文件就是它，於是決定不發送整個文件內容，直接告訴瀏覽器 304 。

瀏覽器接收到 304 時，就知道原來我緩存的就是跟伺服器端一樣的文件，於是就直接拿本地緩存來用了。

如果伺服器發現瀏覽器的緩存文件信息已經是舊的了，伺服器就直接正常的發送文件內容，瀏覽器正常的接收文件內容了。

正在看圖解http，給個簡要的答案先。首先瀏覽器查看你資源緩存的過期時間，如果未過期則使用緩存，如果過期了，則瀏覽器會再次請求伺服器來驗證資源的有效性及拉取更新的資源（並不是永遠走緩存）。其次304表示你這次帶條件的請求我伺服器接收到了，但是無法根據你要的條件給出相應的響應，則返回304，比方說，你要請求一個資源的部分位元組，而伺服器不支持斷點傳輸，則會返回304。當然瀏覽器在判斷到緩存過期後，請求中頭部附帶If-Modified-Since欄位去拉取某一個文件，伺服器會根據這個指定的時間去判斷，如果這個時間點之後沒有修改，也會返回304。