瀏覽器快取詳解

2021-09-16 20:59:02 字數 1652 閱讀 3528

第一次請求了 100 個檔案, 再次訪問的時候,如果全部重新請求, 非常浪費時間, 也很笨拙.

分析:

因為有些檔案, 在使用者的多次請求中, 都是相同的, 如果多次請求都重複請求這個檔案, 無疑是一種浪費.
那麼就想到了快取: 把資源快取到本地, 再次請求的時候直接使用本地的快取檔案.

走極端:

把所有的檔案都快取起來.
分析:

這樣也不行, 因為在請求過來的 100 個檔案中, 可能有一部分是長久不變的, 有一部分是隔一段時間就變的,

還有的檔案是每次都不一樣的.

那麼怎麼辦?

要區分這些檔案, 快取的主動方(瀏覽器) 說: 我要知道我要不要快取乙個檔案, 我要知道下次請求的時候對於

某個檔案我到底能不能直接用快取, 還是需要重新請求.

ok.

伺服器說: 那我跟你說每個檔案的你要不要快取, 什麼時候不能用快取.

然後伺服器就在響應的時候, 新增乙個響應頭 expires

類似這樣:expires: thu, 01 dec 1994 16:00:00 gmt (必須是gmt格式)
瀏覽器得到這個檔案之後, 先使用這個檔案.

過了一會使用者重新請求了

瀏覽器把 expires 標記的時間 a, 和當前請求的時間 b 做個對比, 如果是這樣

a....b // 說明過期了, 那麼就重新請求

b....a // 咦還沒過期, 還能吃

與 expires 有同樣功能的還有 cache-control, parama 等響應頭

cache-control 是 http 1.1 提出的, expires 是 http 1.0 提出的, 前者比後者優先順序高--在同時使用的時候.

然後, 瀏覽器發現不對, 這個檔案過期了, 我重新拿過來的怎麼還是和過期的一樣, 你丫騙我.

伺服器說: 那我能怎麼辦, 你又要過期時間, 還不能不給, 那哪能每個檔案的過期時間我都能精確算出來, 那個檔案明明我覺得

它經常變, 誰知道它一直都不變.

ok.伺服器給出了個解決方案:

你看這樣, 我呢, 把每個檔案算出來乙個值, 只要檔案變化了, 這個值就會改變. 然後把這個值扔給你。

你如果發現快取過期了, 請求的時候把這個值也給我.

我來看看這個值和我這邊的值是不是一樣的

如果是一樣的, 那麼說明這個檔案沒有變對不對, 那我就不給你檔案了,給你乙個 304 你再繼續使用快取檔案

這個值使用 etag 來標記,

客戶端在快取過期重新請求的時候, 加上乙個頭 if-none-match:(etag的值)

ok.伺服器又說了, 哎這樣的話我還想到另外一種方案

我給你檔案的時候標記一下這個檔案最後修改的時間, 你要是發現快取過期了, 重新請求的時候把這個時間給我

我比較一下我這邊記錄的最新的檔案更改時間, 如果兩個相同不就說明檔案沒改, 對不對.

伺服器給客戶端的時間叫: last-modified

客戶端返回過來的是: if-modified-since(last-modified 的值)

瀏覽器快取詳解

報文頭里的一些關鍵資訊 e xpires http1.0 中的標準,表明過期時間,注意此處的時間都是指的是伺服器的時間。cache control http1.1 中的標準,可以看成是 expires 的補充。使用的是相對時間的概念。cache control的屬性 max age 設定快取的最大的...

瀏覽器快取詳解

1.快取位置 1.service worker,service worker是執行在瀏覽器背後的獨立執行緒,一般可以用來實現快取功能.使用service worker必須使用https協議,因為service worker涉及請求攔截,所以必須使用https協議來保證安全.3.disk cache,...

瀏覽器快取詳解

瀏覽器快取 快取位置 當未命中快取,會呼叫fetch函式獲取資料,也就是根據快取查詢優先順序去查詢資料。此時無論從哪獲取的資料,都會顯示是從service worker中獲取的 瀏覽器快取機制的關鍵 強快取協商快取 使用者行為對瀏覽器快取的影響 如果有快取則使用,沒有則傳送請求 普通重新整理 f5 ...