部署瀏覽器緩存

第一部分 – 第06章

Website

當初次訪問的用戶通過瀏覽器請求移動網站頁面時，在網頁能夠成功顯示前，瀏覽器需要下載所有組成網站的資源文件。

一個瀏覽器緩存資源文件的示例

例如，瀏覽器在完成網頁加載前必須先加載所有8個資源文件。

如下顯示了本例中網站頁面的編碼。 

<head>
<link rel="stylesheet" href="http://css.example.com/style.css" />
<link rel="stylesheet" href="http://www.example-2.com/style2.css" />
<script src="http://js.example.com/script.js"></script>
<script src="http://www.example-2.com/script2.js"></script>
</head>
<body>
<!-- Page Content -->
<div><img src="http://images.example.com/image-1.png"></div>
<div><img src="http://images.example.com/image-2.png"></div>
<div><img src="http://images.example.com/image-3.png"></div>
<div><img src="http://www.example-2.com/image-4.png"></div>
<!-- Some More Page Content -->
</body>

考慮如下的幾個場景：

  • 該用戶可能會持續瀏覽網站上的眾多其他網頁。這些網頁與用戶初次訪問時已經瀏覽過的網頁使用相同的資源文件（比如共用一個JavaScript文件，共用一個CSS文件，共用一些圖片，等等）。
  • 也許該用戶只瀏覽完一個網頁就已經離開了，但他/她也可能會在不久的將來再次訪問你的網頁。

緩存資源文件

使資源文件可緩存，將避免從服務器上通過不必要的http請求重複獲取相同的資源文件，而且在某些情況下你的移動網站頁面能更快加載。當資源文件緩存後有如下好處：

  • 當該用戶持續瀏覽眾多其他頁面時，用戶的計算機上便會緩存資源文件，且這些資源文件並不需要通過網絡服務器獲取。
  • 當該用戶不久後再次訪問同樣的頁面時，資源文件會直接從用戶的計算機緩存加載，而不是從網絡服務器加載。

一旦你網站部署了資源文件緩存後，用戶訪問網頁時，跟網頁相關的資源文件就會被緩存到用戶的計算機上。使用到緩存的都會是不常需要變更的靜態文件（資源文件），例如圖片文件，CSS文件，JavaScript文件，等。

當你的移動網站啟用瀏覽器緩存後，用戶在網站的第一次頁面瀏覽並不會獲益。當用戶再次訪問網頁並需要使用到已緩存過的資源文件時，啟用緩存的好處便會展現。

緩存文件（Cache File）的詳細說明

通過使用expires-header或者cache-header，網絡服務器能告訴瀏覽器應該給單個文件或多個相同類型的文件做緩存，並且提供緩存的過期日期和時間。 

Expires: Thu, 15 May 2019 22:00:00 GMT

注意，以上expires-header是被設定到具體的某個日期和某個時間，這樣會導致一個問題。你以後將會必須定期檢查過期日期和時間，或者在下一次失效前必須更新這個日期和時間。

如上例，如果一旦到了截止日期2019年5月16日，你忘了更新expires-header中的過期日期和時間，那麼當天及以後瀏覽器將不再針對非首次訪問的用戶提供緩存的資源文件。

Cache-header（緩存header）

每種web服務器的瀏覽器緩存設置都是不同的。

瀏覽器緩存的設置是web服務器的特性。在如下示例中我們將使用cache-header（緩存頭）方法。

  • 你必須通過web服務器的配置項部署瀏覽器緩存。
  • 假定你使用的是Apache或Nginx作為web服務器，你可以參考如下的指示說明完成配置的部署。

要被緩存的文件或文件類型

你必須決定將要針對哪些類型的文件啟用緩存以及啟用多久。需要被啟用瀏覽器緩存的文件類型包括如下幾種：

  • 如*.jpg， *.png，*.gif等的圖片類型，以及如*.ico的圖標類型。這些類型的文件一旦首次被上載到網站服務器，便很少再做改動。針對它們的瀏覽器緩存可以設置得盡可能久，比如1至2年。
  • CSS類型文件的瀏覽器緩存可以被設置為至少3至6個月，因為它們相比圖片和圖標類型而言，改動更頻繁。它們主要影響移動網站的頁面可視化佈局。
  • JavaScript (JS)類型文件的瀏覽器緩存可以被設置為至少3至6個月，因為它們相比圖片和圖標類型而言，改動更頻繁。它們主要影響移動網站的頁面用戶交互和用戶數據跟踪。

Apache瀏覽器緩存

為Apache服務器啟用瀏覽器緩存，就要添加如下代碼到.htaccess文件。這段代碼使用cache-control header（緩存控制頭），它是一個HTTP頭，能給瀏覽器指定需要被緩存的文件和文件類型和緩存的時間長度。

  • 緩存控制指令在filesMatch起始和結束標籤中被指定。
  • 瀏覽器緩存的文件類型由”.(css|js)$”和”.(jpg|jpeg|png|gif|bmp|ico)$”指定。第一套緩存控制指令指定了CSS和JS文件類型，第二套緩存控制指令制定了jpg、jpg、png、gif、bmp、ico文件類型。
  • max-age指令定義了瀏覽器對於符合指定文件類型的文件必須緩存的時間長度。在如下示例中，”max-age=2628000″和”max-age=31536000″意味著相應指定的文件類型將會被緩存1個月和1年。 max-age指令的值是以秒錶達的。
  • public指令是指所指定的緩存文件類型被啟用為公共緩存。如果移動網站要啟用瀏覽器緩存，就必須採用public指令。 
# Cache css and js files for 1 month
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>
# Cache image files for 1 year
<filesMatch ".(jpg|jpeg|png|gif|bmp|ico)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>

你可以對不同的文件類型設定不同的max-age值，一般為：

  • max-age=60指瀏覽器緩存大約1分鐘。
  • max-age=3600指瀏覽器緩存大約1小時。
  • max-age=86400指瀏覽器緩存大約1天。
  • max-age=604800指瀏覽器緩存大約1週。
  • max-age=指瀏覽器緩存大約1月。
  • max-age=指瀏覽器緩存大約1年。

Nginx瀏覽器緩存

你可以通過在Nginx服務器中添加如下代碼來啟用瀏覽器緩存。

  • 這段代碼引導瀏覽器緩存”jpg”，”jpeg”，”png”，”gif”，”ico”，”css”及”js”類型的文件。
  • “expires 100d”意味著每個文件必須緩存100天。 
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 100d;
}

瀏覽器緩存問題

如果你為資源文件配置了較長的緩存時間（例如1年），且你在緩存過期前對移動網站頁面進行了更改，你的用戶可能無法看到變更的內容（即新版本資源文件）。這是因為直到已緩存的資源文件過期，提供給用戶的仍然是舊版本的緩存資源文件。

最好的解決方案就是更改這些資源文件的文件名稱。例如：

  • 將所有的JavaScript文件名稱更改為”filename-new.js”。
  • 將所有的CSS文件名稱更改為”filename-new.css”。
  • 將所有的圖片文件名稱更改為”filename-new.png”。

將文件名的更改應用到示例中，網頁代碼如下： 

<head>
<link rel="stylesheet" href="http://css.example.com/style-new.css" />
<link rel="stylesheet" href="http://www.example-2.com/style2-new.css" />
<script src="http://js.example.com/script-new.js"></script>
<script src="http://www.example-2.com/script2-new.js"></script>
</head>
<body>
<!-- Page Content -->
<div><img src="http://images.example.com/image-1-new.png"></div>
<div><img src="http://images.example.com/image-2-new.png"></div>
<div><img src="http://images.example.com/image-3-new.png"></div>
<div><img src="http://www.example-2.com/image-4-new.png"></div>
<!-- Some More Page Content -->
</body>

移動網站性能技術白皮書在2017年3月正式出版。

英文版：Implement Web Browser Caching – 簡體中文版：部署瀏覽器緩存






移動網站性能技術白皮書上的內容按下列許可協議發布： CC Attribution-Noncommercial 4.0 International

Gordon Choi's Mobile Website Book