Expires headers 是什么？
Expires headers：直接翻譯是過期頭。Expires headers 告訴瀏覽器是否應該從服務器請求一個特定的文件或者是否應該從瀏覽器的緩存抓住它。Expires headers 的設計目的是希望使用緩存來減少HTTP requests的數量，從而減少HTTP相應的大小。

Expires headers 中的 Expires 說明了 Expires headers 是有時間限制的，只有在這個指定的時間期限內，瀏覽器才會從緩存讀取數據，而超過這個時間期限，再次訪問同一個頁面時瀏覽器還是會向服務器發起 HTTP requests，從服務器端下載頁面所需的文件。

Max-age 和 mod_expires

（注釋：本小節內容節選至Steve Souders的《High Performance Web Sites》）

在介紹如何很好地改善傳輸性能之前，需要提及除了 Expires 頭之外另一種選擇。 HTTP 1.1 引入了 Cache-Control頭來客服Expires頭的限制。因為 Expires 頭使用一個特定的時間，它要求服務器和客戶端的時鐘嚴格同步。另外，過期日期需要經常檢查，并且一旦未來這一天到來了，還要在服務器中提供一個新的日期。

換一種方式，Cache-Control 使用 max-age 指令制定組件被緩存多久。它以秒為單位定義了一個更新窗。如果組件被請求開始過去的時間少于max-age，瀏覽器就使用緩存版本，這就避免了額外的HTTP請求。一個長久的max-age頭可以刷新窗為未來10年。

Cache-Control: max-age=315360000
使用帶有max-age的Cache-Control可以消除Expires頭的限制，但對于不支持HTTP 1.1的瀏覽器（盡管這只占你的訪問量的1%以內），你可能仍然希望體統Expires頭，你可以同時指定兩個響應頭——Expires和Cache-Control max-age。如果兩者同時出現，HTTP 規范規定max-age指令將重寫Expires頭。所以，你會看到在 PageSpeed 的前端性能優化規則 Leverage browser caching 看到這樣的說明：

It is important to specify one of Expires or Cache-Control max-age, and one of Last-Modified or ETag, for all cacheable resources. It is redundant to specify both Expires and Cache-Control: max-age, or to specify both Last-Modified and ETag.

Google 的工程師認為同時設置 Expires 和 Cache-Control: max-age 是一種冗余，但是實際的開發中，為了前面提到的不支持HTTP 1.1的不到1%的用戶，我們通常還是同時設置了這個兩個頭信息。

另外， PageSpeed 文檔對于HTTP 1.1 提供的相應的緩存頭信息做了更具體的介紹：

Expires and Cache-Control: max-age. These specify the “freshness lifetime” of a resource, that is, the time period during which the browser can use the cached resource without checking to see if a new version is available from the web server. They are “strong caching headers” that apply unconditionally; that is, once they’re set and the resource is downloaded, the browser will not issue any GET requests for the resource until the expiry date or maximum age is reached.
Last-Modified and ETag. These specify some characteristic about the resource that the browser checks to determine if the files are the same. In the Last-Modified header, this is always a date. In the ETag header, this can be any value that uniquely identifies a resource (file versions or content hashes are typical). Last-Modified is a “weak” caching header in that the browser applies a heuristic to determine whether to fetch the item from cache or not. (The heuristics are different among different browsers.) However, these headers allow the browser to efficiently update its cached resources by issuing conditional GET requests when the user explicitly reloads the page. Conditional GETs don’t return the full response unless the resource has changed at the server, and thus have lower latency than full GETs.
Expires 和 Cache-Control: max-age. 制定緩存文件的 “freshness lifetime”（這里我就翻譯為過期時間）。這個前面我已經介紹過了，只是 “the browser will not issue any GET requests for the resource until the expiry date or maximum age is reached.”，更準確的說應該是說瀏覽器還是會向服務器發送一個GET請求，只是服務器發現請求的文件是一個設置了 Expires header 的文件，就只返回一個304的狀態信息，而不是發送一個完整的文件到瀏覽器，接受到304狀態碼后，瀏覽器就會請求本地已經緩存的靜態文件了。

Last-Modified and ETag的說明在介紹另外的 YSlow 的規則 Configure entity tags (ETags) 會給大家做詳細的說明。這里簡單的說明一下，這兩個是頭服務器在檢測緩存的組件是否和原始服務器上的組件匹配時有兩種方式。

服務器會通過 Last-Modified 相應頭來返回組件的最新修改日期，而瀏覽器會使用 If-Modified-Since 頭將最新修改日期傳回到服務器經行比較。如果比配，就會返回 304狀態碼，而不是重新下載組件。ETag 提供了另外一種方式，瀏覽器通過 If-None-Match 頭發送本地資源的 ETag值，跟服務器端返回的ETag值對比，一致則返回304狀態，瀏覽器讀取本地資源。ETag 值的優先級比 Last-Modified 高，如果服務器端的 Last-Modified 和本地的 If-Modified-Since 值相同，但是服務器和本地的 ETag 值和 If-None-Match 不同，瀏覽器而就會重新下載請求的資源。

為什么要 Add Expires headers？
我們知道，當你訪問一個網站，你的瀏覽器負責從服務器下載所需的所有文件。這里的下載就是我們前面介紹過的HTTP requests。由于HTTP協議是無狀態協議，所以如果不加任何處理的話，瀏覽器在訪問同一個頁面時是會反復向服務器請求相同文件的，這樣會給服務器帶來不必要的下載負擔。而隨著網頁內容變得越來越豐富，所以頁面的 HTTP requests 也越來越多。設置 Expires headers，讓瀏覽器從本地讀取已經下載過的緩存文件就會減少很多 HTTP requests 了。當然，頁面的加載速度就會快很多。

這里有兩點需要明確：

Add Expires headers 能夠減少 HTTP requests，是指的在瀏覽器再次訪問同一個頁面（或者再次請求同一個文件）時，瀏覽器才會從本地讀取緩存文件。而用戶第一次訪問頁面時，Expires headers是不起作用的。所以才有《前端性能優化：Make fewer HTTP requests》中介紹的，在首次加載Web頁面時的 HTTP requests 通常會比再次訪問時的 HTTP requests 多。
Expires headers 是有時間限制的，超過了指定的過期時間，瀏覽器會再次想服務器發出 HTTP requests，而不是讀取本地的緩存文件。
Add Expires headers 的規則
在了解了 Expires headers 相關的基礎知識后，我們現在要介紹的是 Add Expires headers 的規則，還是看看YSlow的文檔吧：

There are two aspects to this rule:

For static components: implement “Never expire” policy by setting far future Expires header
For dynamic components: use an appropriate Cache-Control header to help the browser with conditional requests
我們看到，有兩點規則：

靜態文件：落實“永不過期”的原則，通過設置一個足夠長的過期時間來實現。
動態文件：設置一個適當的 Cache-Control 頭。怎么才算適當？原則很簡單，根據這個動態內容的變更頻率做出設置，經常修改的，就設置較短的過期時間，不怎么變動的就設置長一些的過期時間。
另外要說明一點，YSlow 建議靜態文件最短的過期時間為6天。 而 PageSpeed 則認為要設置得更就一些，至少30天。

Set Expires to a minimum of one month, and preferably up to one year.

最后要注意的就是添加了（長時間的） Expires headers 的文件，如果在設置的過期時間內需要修改時，你必須修改文件名或者添加修改文件的時間戳。這樣用戶再訪問頁面時，才會向服務器請求新文件。例如你需要修改首頁的layout.css文件，你可以這么處理：

// 原來的調用處理
<link href=”/css/layout.css” rel=”stylesheet” />

// 調用新文件的處理
<link href=”/css/layout-v20140913.css” rel=”stylesheet” />

// 或者這么處理
<link href=”/css/layout.css?version=v20140913″ rel=”stylesheet” />
如何 Add Expires headers？
在介紹具體的服務器端的設置時，其實你需要先確定你要給哪些（這里主要是針對靜態文件）文件設置 Expires headers。通常需要緩存的文件有這些：

Images: jpg, gif, png
favicon/ico
JavaScript: js
CSS: css
Flash: swf
PDF: pdf
media files：視頻，音頻文件
HTML 文件不要設置 Expires headers。實際的開發經驗告訴我，給HTML文件添加 Expires headers 會帶來很多的麻煩。即便你要添加 Expires headers，也盡量設置較短的過期時間。這一點在 PageSpeed 的 Leverage browser caching 規則中也明確提到了：

In general, HTML is not static, and shouldn’t be considered cacheable.

知道要緩存哪些資源文件后，接著就是預判這些文件的變更頻率，設置合適的過期時間。還是前面的原則，變更頻繁的 Expire 時間就越短，不怎么變動的就可以設置長的過期時間，也就是落實“永不過期”的原則。

Apache 服務器配置 Expires headers

接下來就是在服務器端設置 Expires headers 了，這里以Apache服務器為例，我們在 .htaccess 文件中配置（.htaccess是跟目錄下的一個隱藏文件）添加如下代碼：

<IfModule mod_expires.c>
# Enable expirations
# 開啟 Expires headers
ExpiresActive On
# Default directive
# 默認的過期時間
ExpiresDefault “access plus 1 month”
Cache-Control max-age=2592000
# My favicon
# 針對 ICON 文件的配置
ExpiresByType image/x-icon “access plus 1 year”
# Images
# 針對圖片的配置
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/jpg “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
# CSS
# 針對 CSS 文件的配置
ExpiresByType text/css “access 1 month”
# Javascript
# 針對 JavaScript 文件的配置
ExpiresByType application/javascript “access plus 1 year”
</IfModule>
Ngnix 服務器配置 Expires headers

現實的情況是現在的在服務器端網站的靜態文件通常都是通過 Ngnix 服務器處理的。然后通過Ngnix配置反向帶代理指向Apache服務器處理動態內容。在Ngnix 服務器的配置代碼如下：

# 以下代碼加入到ngnix服務器的server區塊中
server {
# cache static files
location ~* \.(gif|jpe?g|png|ico|swf)$ {
# d – 天
# h – 小時
# m – 分鐘
expires 168h;
add_header Pragma public;
add_header Cache-Control “public, must-revalidate, proxy-revalidate”;
}

# 由于js和css文件需要改動，設置的時間為5分鐘
location ~* \.(css|js)$ {
expires 5m;
add_header Pragma public;
add_header Cache-Control “public, must-revalidate, proxy-revalidate”;
}
}
這里還要另外補充一下 PageSpeed 文檔中提及的設置緩存的一些技巧：

Use fingerprinting to dynamically enable caching.
For resources that change occasionally, you can have the browser cache the resource until it changes on the server, at which point the server tells the browser that a new version is available. You accomplish this by embedding a fingerprint of the resource in its URL (i.e. the file path). When the resource changes, so does its fingerprint, and in turn, so does its URL. As soon as the URL changes, the browser is forced to re-fetch the resource. Fingerprinting allows you to set expiry dates long into the future even for resources that change more frequently than that. Of course, this technique requires that all of the pages that reference the resource know about the fingerprinted URL, which may or may not be feasible, depending on how your pages are coded.
Set the Vary header correctly for Internet Explorer.
Internet Explorer does not cache any resources that are served with the Vary header and any fields but Accept-Encoding and User-Agent. To ensure these resources are cached by IE, make sure to strip out any other fields from the Vary header, or remove the Vary header altogether if possible.
Avoid URLs that cause cache collisions in Firefox.
The Firefox disk cache hash functions can generate collisions for URLs that differ only slightly, namely only on 8-character boundaries. When resources hash to the same key, only one of the resources is persisted to disk cache; the remaining resources with the same key have to be re-fetched across browser restarts. Thus, if you are using fingerprinting or are otherwise programmatically generating file URLs, to maximize cache hit rate, avoid the Firefox hash collision issue by ensuring that your application generates URLs that differ on more than 8-character boundaries.
Use the Cache control: public directive to enable HTTPS caching for Firefox.
Some versions of Firefox require that the Cache control: public header to be set in order for resources sent over SSL to be cached on disk, even if the other caching headers are explicitly set. Although this header is normally used to enable caching by proxy servers (as described below), proxies cannot cache any content sent over HTTPS, so it is always safe to set this header for HTTPS resources.
Use fingerprinting to dynamically enable caching：fingerprinting 處理是針對偶爾會修改的文件，但不確定什么時候修改的時候采取的處理措施。其實這個處理技巧我覺得最簡單的應用就是我前面提到的時間戳的處理技巧。你可以給這個文件設計較長的過期時間，但是你卻可以比較頻繁的修改，一旦版本確定后，長的過期時間還是會發揮作用。
Set the Vary header correctly for Internet Explorer：針對IE瀏覽器設置 Vary 頭。IE 瀏覽器不會緩存被送達 Vary 頭和任何領域的任何資源，但接受Accept-Encoding 和 User-Agent。所以為了確保IE瀏覽能夠正確緩存資源，應該去掉 Vary 頭信息中的其他信息，如果可以干脆就清空Vary 頭信息。不過服務器端我們通常設置 Vary:Accept-Encoding，并且是針對文本類型的資源文件。
Avoid URLs that cause cache collisions in Firefox：簡單的講，這是針對Firefox對相同URL地址文件只緩存其中一個要注意的問題。在使用fingerprint類似技巧自動命名文件名的時候，生成的文件名一定要超過8個字符長度，避免Firefox重名文件產生相同的hash key。（不過這種情況，我實際開發式還沒有遇到過，不過大家可以參考一下 Remove duplicate JavaScript and CSS 規則中介紹的關于重復調用資源的問題。）
Use the Cache control: public directive to enable HTTPS caching for Firefox：也是針對Firefox的設置。在 Cache-Control頭中添加 public值可以確保Firefox緩存HTTPS協議中請求的資源。實際上在我上面的 Ngnix 服務器中配置時就設置了public值：add_header Cache-Control “public, must-revalidate, proxy-revalidate”;

關于網站Apache服務器 Expires Headers 的寫法

未經允許不得轉載：外貿商城系統,外貿網站模板,php建站教程,zencart模板 » 前端性能優化：Add Expires headers