前言

最近手上剛剛拆掉石膏，去樓下房友幫忙。樓下房友領導來自阿里，前端用的是阿里的ant-design，設計將設計圖上傳到藍湖，聊天工具也采用阿里的釘釘。有時間我也多多去樓下房友交流學習，多交流，就會有提升。最近也比較忙，好久沒有更新博客了。閑言少敘，今天主要談談前端性能優化之瀏覽器緩存。

瀏覽器緩存

我前面寫過瀏覽器緩存的文章，也寫過html5離線緩存，關于這些緩存，我們很容易搞不清，例如：200 OK (FROM MemoryCache、FROM DiskCache) 及 304 NOT MODIFIED 還有 application cache (離線緩存)等等。

200 from memory cache 不訪問服務器，直接讀緩存，從內存中讀取緩存。此時的數據時緩存到內存中的，當kill進程后，也就是瀏覽器關閉以后，數據將不存在。但是這種方式只能緩存派生資源

200 from disk cache 不訪問服務器，直接讀緩存，從磁盤中讀取緩存，當kill進程時，數據還是存在。這種方式也只能緩存派生資源

304 Not Modified 訪問服務器，發現數據沒有更新，服務器返回此狀態碼。然后從緩存中讀取數據。

三級緩存原理

1. 先去內存看，如果有，直接加載

2. 如果內存沒有，擇取硬盤獲取，如果有直接加載

3. 如果硬盤也沒有，那么就進行網絡請求

4. 加載到的資源緩存到硬盤和內存

一般瀏覽圖片，如下流程：

訪問-> 200 -> 退出瀏覽器

再進來-> 200(from disk cache) -> 刷新 -> 200(from memory cache)

application cache和上面緩存有點區別，是離線緩存，就是資源可以從硬盤上讀取而不用聯網，即使斷網，用戶也可以瀏覽。

設置瀏覽器緩存

304是協商緩存還是要和服務器通信一次，要想斷絕服務器通信，就要強制瀏覽器使用本地緩存（cache-control/expires），

一般有如下幾種方式設置瀏覽器緩存。

1、通過HTTP的META設置expires和cache-control

  http-equiv="Cache-Control" content="max-age=7200" />
  http-equiv="Expires" content="Sun Oct 15 2017 20:39:53 GMT+0800 (CST)" />

這樣寫的話僅對該網頁有效，對網頁中的圖片或其他請求無效。

2、apache服務器配置圖片，css，js，flash的緩存

這個主要通過服務器的配置來實現這個技術，如果使用apache服務器的話，可以使用mod_expires模塊來實現：

編譯mod_expires模塊：

Cd  /root/httpd-2.2.3/modules/metadata

/usr/local/apache/bin/apxs -i -a -c mod_expires.c //編譯

先打開httpd.conf文件，然后查找expires這個模塊，找到后，刪除左邊的#號，表示打這個模塊，并重啟apache服務器

編輯httpd.conf配置：添加下面內容

 mod_expires.c>

ExpiresActive on

ExpiresDefault "access plus 1 month"

ExpiresByType text/html "access plus 1 months"

ExpiresByType text/css "access plus 1 months"

ExpiresByType image/gif "access plus 1 months"

ExpiresByType image/jpeg "access plus 1 months"

ExpiresByType image/jpg "access plus 1 months"

ExpiresByType image/png "access plus 1 months"

EXpiresByType application/x-shockwave-flash "access plus 1 months"

EXpiresByType application/x-javascript      "access plus 1 months"

#ExpiresByType video/x-flv "access plus 1 months"

3、php等設置

php
  header("Cache-Control: public");
  header("Pragma: cache");

  $offset = 30*60*60*24; // cache 1 month
  $ExpStr = "Expires: ".gmdate("D, d M Y H:i:s", time() + $offset)." GMT";
  header($ExpStr);
?>

或者

$seconds_to_cache = 3600;
$ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT";
header("Expires: $ts"); header("Pragma: cache");
header("Cache-Control: max-age=$seconds_to_cache");

緩存情況下前端代碼部署

問題一：有了緩存，如何進行前端代碼更新呢？

我們可以在資源文件或者圖片后面添加版本號，如下圖。

問題二：但是所有文件都加了版本號之后，我們只更改了一個文件，其他文件的緩存不是浪費了嗎？

解決這個問題，我們可以用 數據摘要要算法，對文件求摘要信息，摘要信息與文件內容一一對應。如下圖：