瀏覽器快取

詩與遠方君發表於2018-11-10
瀏覽器快取

what？

簡單來說，瀏覽器快取就是把一個已經請求過的Web資源（如html頁面，圖片，js，資料等）拷貝一份副本儲存在瀏覽器中。
快取會根據進來的請求儲存輸出內容的副本。當下一個請求來到的時候，如果是相同的URL，快取會根據快取機制決定是直接使用副本響應訪問請求，還是向源伺服器再次傳送請求。
複製程式碼

why ?

1 減少網路寬頻消耗
2 減少伺服器的壓力
3 降級網路延遲， 加快頁面響應
複製程式碼

how？

主要是針對網路請求做處理。而一個網路請求包括了三部分：請求， 處理， 響應。 從而發現我們能通過請求和響應兩部分進行做優化。
請求： 瀏覽器快取部分資源 減少向後端傳送請求。
響應： 減少響應主體的體積，可縮短響應時間。
複製程式碼

通過下面內容來了解如何去優化快取

快取的重要幾個儲存位置

  • serverWorker
  • memory cache
  • disk cache

serverWorker

serverWorker 是一個指令碼。作為一個獨立的執行緒在後臺獨立執行。提供了離線體驗訊息推送等，不同於其他cacheta
它是不受瀏覽器控制的， 所以完全可以自己實現快取控制所以更加靈活方便
使用： 
     1 install  navigator.serviceWorker.register('./sw.js')
     2 onInstall
		self.addEventListener('install', function (evt) {
			evt.waitUntil(
				caches.open('my-test-cahce-v2').then(function (cache) {
				return cache.addAll(cacheFiles);
				})
			);
		});
     3 onFetch
       
		self.addEventListener('fetch', function (evt) {
			evt.respondWith(
			caches.match(evt.request).then(function(response) {
				if (response) {
					return response;
				}
				var request = evt.request.clone();
				return fetch(request).then(function (response) {
					var responseClone = response.clone();
					caches.open('my-test-cache-v2').then(function (cache) {
						cache.put(evt.request, responseClone);
					});
					return response;
					});
				})
			)
		});


同時serverWorker快取的時間是永久的除非是自己手動刪除，或者超過容量。
另外使用serverWorker的使用也是受限制的必須使用https（localhost除外）
複製程式碼

memory cache

  • 1 瀏覽器暫時將資源快取在記憶體中不受開發者控制的,會根據本地記憶體的使用率來決定快取存放在哪. 在大小，時間上都有限制。 快取的時間在瀏覽器tab關閉的時候將會被清除。
  • 2 由於memory cache 機制 所以一個頁面內相同的請求都會只被傳送一次 比如相同的link，src

disk cache

  • 1 將資源快取在硬碟上， 通過http 頭部可以控制那些資源可以被快取，及資源可以被快取多長時間。 所以也可以稱為http快取，
  • 2 HTTP報文中與快取相關的首部欄位

瀏覽器快取

根據上面流程圖所以頭部欄位大概可以分為下面幾類
1 控制是否快取

    cache-control
    	· no-cache: 強制伺服器再次驗證
    	· no-store: 不快取請求或是響應的任何內容
    	· must-revalidate：如果超過了 max-age 的時間，瀏覽器必須向伺服器傳送請求，驗證資源是否還有效
    	· public：所有的內容都可以被快取 (包括客戶端和代理伺服器， 如 CDN)
    	· private：所有的內容只有客戶端才可以快取，代理伺服器不能快取。預設值。
2 快取時間
    Expires， max-age
    	· max-age: 快取的時長

3 失效校驗
    ETag, If-None-Match, If-Modified-Since, Last-Modified ...
    響應首部：
    	· ETag: 伺服器生成資源的唯一標識
    	· Last-Modified: 資源最後一次修改的時間 

    請求首部
    	· If-None-Match: 伺服器根據這個欄位判斷檔案是否有新的修改
    	· If-Modified-Since: 比較資源前後兩次訪問最後的修改時間是否一致

相關文章