關於瀏覽器快取

2021-10-12 19:57:30 字數 2409 閱讀 2269

瀏覽器快取分類

瀏覽器快取分為強快取和協商快取,瀏覽器載入乙個頁面的簡單流程如下:

1.瀏覽器先根據這個資源的http頭資訊來判斷是否命中強快取。如果命中則直接加在快取中的資源,並不會將請求傳送到伺服器。(強快取)

2.如果未命中強快取,則瀏覽器會將資源載入請求傳送到伺服器、伺服器來判斷瀏覽器本地快取是否失效。若可以使用,則伺服器並不會返回資源資訊,瀏覽器繼續從快取載入資源(協商快取)

3.如果未命中協商快取,則伺服器將完整的資源返回給瀏覽器,瀏覽器載入新資源,並更新快取。(新的請求)

強快取

命中強快取時,瀏覽器並不會將請求傳送給伺服器。在開發者工具可以看到http的返回碼是200,但是在size列會顯示為(from cache)

強快取是利用http的返回頭中的expires或者cach-control倆個欄位來控制的,用來表示資源的快取時間。

expires

快取過期時間,用來指定資源到期的時間,是伺服器端的具體的時間點。也就是說,expires=max-age+請求時間,需要和last-modified結合使用。但在上面我們提高過,cache-control的優先順序更高。expires是web伺服器響應訊息頭欄位,在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器快取訪問資料,而無需再次請求。

該字段會返回乙個時間,比如expires:thu.31 dec 2037 23:12:51 gmt。這個時間代表著這個資源的失效時間,也就是說在2023年12月31日23點12分51秒前都是有效的。這種方式有乙個明顯的缺點,由於失效時間是乙個絕對時間,所以當客戶端本地時間被修改了以後,伺服器與客戶端時間偏差變大以後,就會導致快取混亂。於是發展出了 cache-control。

cache-control

cache-control是乙個相對時間,例如cahe-control:3600,代表著資源的有效期是3600秒。由於是相對時間,並且都是與客戶端時間比較,所以伺服器與客戶端時間偏差也不會導致問題。

cache-control與expires可以在服務端配置同時啟用或者啟用任意乙個,同時啟用時cache-control優先順序更高。

cache-control可以由多個字段組合而成,主要以下幾個取值:

1.max-age 指定乙個時間長度,在這個時間段內快取是有效的,單位是s。例如設定cache-control:max-age=31536000。

協商快取

若未命中強快取,則瀏覽器會將請求傳送至伺服器。伺服器根 據http頭資訊中的last-modify/if-modify-since或etag/if-none-match來判斷是否命中協商快取。如果命中,則http返回碼未304,瀏覽器從快取中載入資源。

last-modified 和 if-modified-since

瀏覽器第一次請求乙個資源的時候,伺服器返回的header中會加入last-modify,指的是乙個時間標識該資源的最後修改時間

當瀏覽器再次請求該資源時,傳送的請求頭會包含if-modify-since,該值為快取之前返回的last-modify。伺服器收到if-modify-since後,根據資源的最後修改時間判斷是否命中快取。

如果命中快取,則返回http304,並且不會返回資源內容,並且不會返回last-modify。

缺點:精度在1s,沒法更加精確

etage/if-none-match

與last-modify/if-modify-since不同的是,etag/if-none-match返回的乙個校驗碼。etag可以保證每乙個資源是唯一的,資源變化都會導致etag變化。etag值得變更則說明資源狀態已將被修改。伺服器根據瀏覽器上傳送得if-none-match值來判斷是否命中快取。

http快取能夠幫助伺服器提高併發性,很多資源不需要重複請求直接從瀏覽器快取中拿。

htttp 快取分類: 強快取 協商快取

強快取通過 expires 和 cache-control控制 協商快取 通過 last-modify 和 e-tag控制

​ 1.為什麼有expires 還需要cache-control呢?

​ 因為expires 有個伺服器和瀏覽器時間不同步得問題

​ expires 是絕對時間 cache-control是相對時間

2. last-modify和etag

1. last-modify 他有精度問題只能到秒

2. e-tag 沒有精度問題 只要檔案改變 e-tag值就改變

關於瀏覽器快取策略 ?

先思考乙個問題,我們知道,前端和後端通過 ajax 傳送請求來進行資料的互動。那麼是不是每次通過請求 url 獲取資源都要發請求,在伺服器端返回對應的新資料呢 答案是不會,為了提高頁面效能,瀏覽器提供了快取策略。瀏覽器每次發起請求時,先在本地快取中查詢結果已經快取標識,根據快取標識來判斷是否使用本地...

快取 瀏覽器快取

瀏覽器快取 brower caching 是瀏覽器在本地磁碟對使用者最近請求過的文件進行儲存,當訪問者再次訪問同一頁面時,瀏覽器就可以直接從本地磁碟載入文件 1 瀏覽器第一次請求時,會發出一組 http 頭,用來指導瀏覽器如何進行快取。伺服器規定乙個資源是否要進行快取,主要由響應頭中的expires...

瀏覽器快取

1.為什麼使用瀏覽器快取 以前了解的動態指令碼加速,或者動態內容快取之類,他們的原理都是避免伺服器重複計算,結果仍保留在伺服器端,這樣獲取資料還得從伺服器檢索然後傳送到使用者瀏覽器,如果我們把這些結果放在瀏覽器中,就省去了伺服器的查詢和網路傳輸,瀏覽器快取很好的實現了這個功能 2.瀏覽器快取存放在哪...