瀏覽器緩存碎碎念

瀏覽器緩存技術是提高前端性能一個很是重要的手段。在當前瀏覽器各方面性能都大幅提高的狀況下，前端性能的瓶頸更多的集中在資源請求方面。

原理

說瀏覽器緩存，其實就是在說：

• 瀏覽器實現緩存的機制

• HTTP通信協議定義的關於緩存的字段內容

先讓咱們回顧下，當咱們在瀏覽器的地址欄輸入URL以後發生哪些過程：

1. DNS服務器解析域名，找到對應服務器的IP地址;

2. 和服務器創建TCP鏈接;

3. 基於TCP鏈接進行HTTP的Req/Res，服務器會根據HTTP請求到數據服務器取出相應的資源，並返回給前端；

4. 瀏覽器獲取HTML文檔，並開始解析；

5. 遇到link標籤，加載href指向的地址，並解析css，遇到帶有src屬性，且沒有聲明async或defer屬性的script標籤時，同步加載遠程js腳本，同步解析js腳本，同步執行js腳本，瀏覽器的GUI渲染過程處於掛起狀態。當js執行完畢後，繼續後面的HTML解析的工做；

6. DOM樹構建完畢，CSS Rules解析完畢；

7. 由DOM樹和CSS Rules一塊兒構建Render樹。和DOM樹不同的地方在於Render樹是帶有DOM樣式的，僞元素不會在DOM樹中出現，而會在Render樹中出現。

8. Render樹構建完畢後開始repaint和reflow過程，即渲染。最後將頁面呈現給用戶。

在這些過程中：

• 過程1：遠程服務器多是代理服務器，代理服務器可進行緩存匹配，可將緩存的資源直接返回給前端，下降對於源服務器的壓力，同時還能作均衡負載；

• 過程3：數據服務器能夠進行memcached，進行數據庫層面的緩存，可將上一次的查詢結果緩存到內存當中，下次再查詢相同的數據時，直接從內容從取出數據；

• 過程5：能夠利用瀏覽器緩存。這也是本文所講的主要內容。

當我訪問 SegmentFault 的我的主頁時：

在瀏覽器首次加載並解析HTML文檔時，會維護一個資源的緩存池，緩存池裏存放了加載的包括css,js,圖片,字體等文件，URL是這些資源的惟一標識。瀏覽器會根據HTTP響應字段來決定這些資源是否能緩存以及緩存的時間等：

1. Expires字段設置了資源過時的時間。

2. Cache-control字段的內容較多，例如no-cache會決定資源不會緩存;max-age指客戶機能夠接收生存期不大於指定時間（以秒爲單位）的響應。具體的內容(圖)

3. Etag：資源的惟一標識符

4. Last-Modified: 資源最後一次修改的時間

若是將頁面刷新，此時加載同一份HTML文件，一樣遇到外聯的css，js，圖片和字體等文件。此時瀏覽器首先會從緩存池中尋找，尋找的標記爲資源的URL地址。

若是緩存池中有對應的資源，經過查詢Expires字段和Cache-control字段的值，若是沒有過時，那麼會從緩存池中獲取資源，不會進行HTTP請求。

若資源過時，則會進行HTTP請求，此時瀏覽器會檢查緩存池中資源是否具備Etag和Last-modified.若是有Etag字段(資源的惟一標識符，只要發生修改，其值都會發生改變)的內容，那麼HTTP請求中會帶上If-none-match字段，其值爲Etag字段的內容，若是有Last-Modified字段(最後一次修改的時間)，那麼HTTP請求會帶上If-Modified-Since字段，其值爲Last-modified字段的內容。服務器根據HTTP請求去匹配If-none-match和If-Modified-Since的內容。

當If-none-match的內容匹配不成功時，服務器會返回狀態碼爲200 success的響應及全部的資源內容，並設置新的和緩存相關的字段內容，若匹配成功返回304 Not Modify響應狀態，可是不會返回資源內容。此時瀏覽器仍然是從資源池中獲取資源。

If-Modified-Since的處理方式和If-none-match相同。

當以上2個字段在HTTP請求中都存在時，會優先匹配If-None-Match的內容，只有相同的狀況下才會去匹配If-Modified-Since的內容，來絕對是返回200仍是304。

總結

頁面首次加載

頁面刷新

實踐

以前在實習的過程當中，對於瀏覽器緩存所作的工做之一就是每次在發版前經過gulp給資源打上版本號，例如：

"/css/style.css" => "/dist/css/style.css?v=1d87bebe"；
"/js/script1.js" => "/dist/script1.js?v=61e0be79"；

這樣再去首頁去加載這些資源的時候，由於在資源池裏找不到對應的URL，所以會發送HTTP請求，從服務器端獲取最新的資源。 具體實踐過程請自行google。

參考資料

1. 瀏覽器緩存機制

2. 《webkit技術內幕》

3. HTTP Cache

4. Google Develop Http Caching