瀏覽器快取詳解

1.快取位置

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

3.disk cache,也就是磁碟中的快取,它會根據http header中的字段判斷哪些資源需要快取.disk cache讀取較慢,但儲存容量高,持續時效長.

4.push cache,推送快取,是http2.0中的內容,當以上三種快取都沒有命中時才會被使用.它只在會話中存在,一旦會話結束就會被釋放,持續時間不長.

瀏覽器每次發起請求的時候,都會在快取中查詢請求結果和快取標識,如果沒有查詢到結果或者快取無效,則會傳送請求;

瀏覽器每次接收到請求的時候,都會把響應結果和快取標識儲存到快取中.

根據是否需要向瀏覽器傳送請求可以把快取過程分為兩種:強快取和協商快取.

強快取不會向伺服器傳送請求,直接從快取中讀取資源,強快取一般可通過設定兩種http header實現:expires和cache-control.

1.expires指快取過期時間,在快取過期時間前,瀏覽器可以直接使用快取資源,而無需傳送請求;

2.cache-control可以使用多種指令用於控制網頁快取,如no-store不快取任何響應,max-age最大有效時間等

協商快取就是強制快取失效後,瀏覽器攜帶快取標識向瀏覽器傳送請求,由瀏覽器根據快取標識決定是否使用快取.

協商快取可通過設定兩種http header實現:last modified和etag.

1.last modified

當伺服器響應瀏覽器請求的時候,可以在header中新增last modified欄位,值是這個資源在伺服器上的最後修改時間.瀏覽器接收後快取資源和header.瀏覽器下一次請求這個資源時,在header中攜帶if-modified-since這個header,是last-modified的值.瀏覽器接收到請求後,會對比if-modified-since和資源的最後修改時間,如果相同,則返回304和空的響應體,資源直接從快取中讀取;如果不同,則返回200和更新後的資源.

2.etag

etag是伺服器響應請求時,返回當前資源檔案的乙個唯一標識,只要資源有變化,標識就會重新生成.瀏覽器在下一次載入資源時,會將上一次返回的etag值放到請求header裡的if-none-match裡,伺服器會比較if-none-match和自己伺服器上的etag值,如果相同,則返回304和空的響應體,如果不同,則返回200和新的資源.

瀏覽器快取詳解

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

瀏覽器快取詳解

第一次請求了 100 個檔案,再次訪問的時候,如果全部重新請求,非常浪費時間,也很笨拙.分析 因為有些檔案,在使用者的多次請求中,都是相同的,如果多次請求都重複請求這個檔案,無疑是一種浪費.那麼就想到了快取 把資源快取到本地,再次請求的時候直接使用本地的快取檔案.走極端 把所有的檔案都快取起來.分析...

瀏覽器快取詳解

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