頁面緩存的範疇及原理

時間 2019-12-06

標籤頁面緩存範疇原理简体版

原文原文鏈接

談到頁面性能優化，緩存機制是其中很是重要的一環。緩存可使頁面儘量快地獲得須要的文檔，具備減輕帶寬、下降服務的負荷、提升用戶體驗等功能。隨着高級瀏覽器，尤爲是移動端的發展，可用的緩存範疇逐漸變大，簡單地將其分爲三類：css

1、Application Cache

這是H5中的新特性，能夠將頁面資源緩存在本地，當頁面處於離線狀態下依然可使用。使用方法很簡單，大體分爲2步：html

<html mainfest="mainfest.appcache">

CACHE MANIFEST
# 23-01-2015 v0.1
/style.css
/logo.gif
/script.js
  
NETWORK:
*
  
FALLBACK:
/server/ /fallback.html

可是目前來講，離線存儲存在一些坑，曾經爲了提升頁面性能，使用過該技術，帶來了不少問題，很快就刪除再也不使用，簡單總結下目前離線存儲的特色：html5

每一個包含manifest的網頁都會隱式添加到appCache中
一個文件找不到，整個appCache均被丟棄
即便online，也會使用appCache
更新頁面，appCache文件自己必須修改，才能讓瀏覽器刷新緩存文件
關於appCache的缺點能夠查看文檔：App cache is a Douchebag using the application cache

2、localStorage

在移動端，這個API被普遍使用，將一些長期不會發生改變的資源、歷史記錄保存在本地，經過在本地讀取加速網頁的訪問速度。須要注意的是localStorage只能存儲字符串，若是要緩存對象的話，須要經過JSON.stringify進行轉換，使用的時候再進行解析。經常使用API以下：瀏覽器

a.方法：  getItem()、setItem()、key()、removeItem()、clear()
 
b. 事件：storage
 
function changeStorage() {
    window.addEventListener(’storage’, )
}
 
注意：storage事件只有在新窗口打開時，數據真正發生變化時纔會觸發。也就是storage事件主要用於監聽localStorage/sessionStorage數據變化時，通知其餘窗口或者標籤頁，實現數據變動通知。

3、HTTP

談到緩存會默認是HTTP緩存。首先看看HTTP緩存的大體流程：緩存

在上圖展現了HTTP使用緩存的過程，其中(3)、(4)環節存在是否判斷，當均爲true的時候纔會直接使用本地緩存，其餘狀況請看下圖。可是仍是存在下面兩個疑問：性能優化

如何判斷是否足夠新鮮
如何進行新鮮度驗證？

3.1 文檔新鮮度判斷

在HTTP response中可能存在兩個屬性：Expires、Cache-Control，這兩個屬性決定了文檔的有效期。若是當前時間知足有效期，則直接讀取緩存文檔，返回給客戶端。服務器

關於Expires: HTTP/1.0+定義該該屬性，存儲的是絕對日期，絕對日期依賴於計算機的時鐘時間。由於不一樣主機的時間中存在差別，因此使用Expires可能會形成一些問題。
關於Cache-Control：HTTP/1.1中增長了該屬性，該屬性定義的時間是相對時間，所以就沒有Expires的問題。Cache-Control存在以下幾個經常使用屬性

no-cache: 除非對資源進行新鮮度檢驗，不然客戶端不會使用已緩存的資源
no-store: 緩存應儘快從存儲器中刪除，由於可能存在敏感信息
max-age=number: 緩存在number時間內是新鮮的