原文連結(需越牆）：developers.google.com/web/fundame…此作是谷歌開發者網站關於Web效能優化的入門系列文章之一，該系列的其他篇章，及對應的高階系列文章，本人後續會持續釋出，歡迎大家關注。（轉載請註明出處）
When someone visits a website, everything the site needs to display and operate has to come from somewhere. All the text, images, CSS styles, scripts, media files, and so on must be retrieved by the browser for display or execution. You can give the browser choices about where it can retrieve a resource from, and that can make a big difference in your page's load speed.
當某人訪問一個網站時，網站需要展現和操縱的東西肯定是從某些地方來的。所有的文字，圖片，CSS樣式，指令碼，媒體檔案，等等一定都是由瀏覽器負責展現和執行的。你可以告訴瀏覽器一些可以獲取這些資源的地方，而選擇的地方不同會導致頁面的載入速度有很大的區別。
The first time a browser loads a web page, it stores the page resources in the HTTP Cache. The next time the browser hits that page, it can look in the cache for resources that were previously fetched and retrieve them from disk,
often faster than it can download them from the network.
瀏覽器在第一次載入一個網頁時，會將頁面上的資源儲存在HTTP快取中；下次，當瀏覽器訪問這個頁面時，瀏覽器可以從快取中將這些之前已經獲取到的資源直接從硬碟上獲取，這比從網路獲取要快很多。
While HTTP caching is standardized per the Internet Engineering Task Force (IETF) specifications, browsers may have multiple caches that differ in how they acquire, store, and retain content. You can read about how these caches vary in this excellent article, A Tale of Four Caches.
”HTTP 快取“是一項已經標準化的規範，是由網際網路工程任務組（Internet Engineering Task Force (IETF)）制定的，規定瀏覽器可以擁有多種快取，而不同的快取，其獲取、儲存，和留存方式也不一樣。關於這些快取的區別，這有一篇非常棒的文章，《四種型別的快取的故事》（A Tale of Four Caches），你可以看下。
Of course, every first-time visitor to your page arrives with nothing yet cached for that page. Even repeat visitors may not have much in the HTTP cache; they might have manually cleared it, or set their browser to do so automatically, or forced a fresh page load with a control-key combination. Still, a significant number of your users may revisit your site with at least some of its components already cached, and that can make a huge difference in load time. Maximizing cache usage is critical to speeding up return visits.
雖然，每個第一次到達你頁面的訪客，在此之前是沒有快取的；即便是回訪客也可能沒有多少HTTP快取；因為他們可能已經手動清除掉了，或者讓瀏覽器自動清除掉了；他們也可能通過控制鍵（ctrl）組合強制重新整理了頁面。但不論如何，還是有可觀數量的使用者會回訪你的網站，那個時候，他們已經至少有一些元件是之前已經快取起來了的，這就可以帶來巨大的載入時間的不同。最大化利用快取對於回訪客的回訪頁面載入速度的提升是至關重要的。
Enabling Caching 開啟快取
Caching works by categorizing certain page resources in terms of how frequently or infrequently they change. Your site's logo image, for example, might almost never change, but your site's scripts might change every few days. It's beneficial to you and your users to determine which types of content are more static and which are more dynamic.
快取是基於通過按變動頻繁程度來對頁面資源進行的分類而工作的。例如，網站的Logo 圖片，它幾乎從不改動，但指令碼檔案可能每隔幾天就會有改動。因此，對每種型別的檔案的靜態、動態的性質進行評估是非常有幫助的。
It's also important to remember that what we think of as browser caching may in fact take place at any intermediate stop between the original server and the client-side browser, such as a proxy cache or a content delivery network (CDN) cache.
我們對於瀏覽器快取的認識同樣重要，事實上，快取可能發生在任何處於伺服器和客戶端之間的中介軟體節點上，例如代理服務的快取和內容分發網路（CDN）中的快取。
Cache Headers 快取相關的頭部
Two main types of cache headers, cache-control and expires, define the caching characteristics for your resources. Typically, cache-control is considered a more modern and flexible approach than expires, but both headers can be used simultaneously.
有兩種主要的快取相關的頭部，Cache-Control 和 Expires，可以用來定義資源的快取屬性。通常，Cache-Control 被認為是比 Expires 更現代化、更靈活的方式，不過其實兩種頭部是可以同時使用的。
Cache headers are applied to resources at the server level -- for example, in the .htaccess file on an Apache server, used by nearly half of all active websites -- to set their caching characteristics. Caching is enabled by identifying a resource or type of resource, such as images or CSS files, and then specifying headers for the resource(s) with the desired caching options.
通過快取頭部來設定資源的快取特性是在伺服器上進行的——例如，Apache 伺服器上的 .htaccess 檔案，已經被接近一半的活躍網站所使用；快取是通過為一個資源或者一類資源——例如圖片和 CSS 檔案——設定期望的快取選項來啟用的。
Cache-control
You can enable cache-control with a variety of options in a comma-delimited list. Here is an example of an Apache .htaccess configuration that sets caching for various image file types, as matched by an extension list, to one month and public access (some available options are discussed below).
應用 Cache-Control 頭部時，你可以通過逗號分隔的列表來配置它的各個選項，下面是 Apache 中的 .htaccess 配置檔案的一個例子，它通過檔案字尾名列表匹配多種型別的圖片檔案，來為其設定了一個最長生存週期為一個月，及（快取器）許可權為公開（public）的快取。
<filesMatch ".(ico|jpg|jpeg|png|gif)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
複製程式碼This example sets caching for styles and scripts, resources that are probably more likely to change than the images, to one day and public access.
下面這個列子，為樣式和指令碼檔案——相對圖片檔案更新頻率更高的一類資源——設定了生存週期為一天，許可權為公開的快取。
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=86400, public"
</filesMatch>
複製程式碼Cache-control has a number of options, often called directives, that can be set to specifically determine how cache requests are handled. Some common directives are explained below; you can find more information at the Performance Optimization section and at the Mozilla Developer Network.
Cache-Control 擁有一系列的選項，我們通常稱之為 directives，他們可以用來指定如何處理對快取資源的請求。下面是一些常用指令的講解；更多的資訊可以前往對應效能優化章節(Performance Optimization section) 和 Mozilla 開發者網路(Mozilla Developer Network)瞭解。
no-cache: Somewhat of a misnomer, specifies that content can be cached but, if so, it must be re-validated on each request before being served to a client. This forces the client to check for freshness but allows it to avoid downloading the resource again if it has not changed. Mutually exclusive with no-store.
no-cache: 其實這個名稱並不恰當，它的意思是說，可以對內容進行快取，但如果確實進行了快取，那麼每次請求之前必須(向伺服器）進行一次驗證。雖然它強制了客戶端對資源進行“新鮮程度“檢查，但如果資源並未發生變動則可避免再次下載。與 no-store 選項互斥。
no-store: Indicates that the content actually cannot be cached in any way by any primary or intermediate cache. This is a good option for resources that may contain sensitive data, or for resources that will almost certainly change from visit to visit. Mutually exclusive with no-cache.
no-store: 指示內容不應該以任何形式，在主要的快取或中介軟體中被快取起來。適用於那些包含敏感資訊，或者那些幾乎每次訪問都會發生變動的資料。與
no-cache互斥。public: Indicates that the content can be cached by the browser and by any intermediate caches. Overrides the default private setting for requests that use HTTP authentication. Mutually exclusive with private.
public: 指示瀏覽器可以對內容進行快取，也可以被任意中介軟體進行快取。指定後，會覆蓋預設是 private 的 HTTP 驗證請求為 public 。與 private 指令互斥。
private: Designates content that may be stored by the user's browser, but may not be cached by any intermediate caches. Often used for user-specific, but not particularly sensitive, data. Mutually exclusive with public.
private: 指示內容可以被瀏覽器進行快取，但其他任意中介軟體不應該快取。通常用在特定於使用者，但又不是特別敏感的資料上。與 public 指令互斥。
max-age: Defines the maximum time that the content may be cached before it must be revalidated or downloaded again from the original server. This option generally replaces the expires header (see below) and takes a value in seconds, with a maximum valid age of one year (31536000 seconds).
max-age: 指定被快取的內容向服務重新驗證或再次下載的之前的最大生存週期，這個選項通常用於代替 Expires 頭（請看下文介紹），接受以秒為單位的值，最大值為一年（即31536000秒）
Expires Caching 過期型快取
You can also enable caching by specifying expiration, or expiry, times for certain types of files, which tell browsers how long to use a cached resource before requesting a fresh copy from the server. The expires header just sets a time in the future when the content should expire. After that point, requests for the content must go back to the original server. With the newer and more flexible cache-control header, the expires header is often used as a fallback.
另外，你也可以通過設定一個過期時間的形式來設定指定檔案型別的快取，以此告訴瀏覽器快取資源在重新獲取一份新的之前可以被使用多長時間。Expires 頭便可以通過設定一個未來的時間點，來設定內容（快取）的過期時間。在那個時間點之後，對該內容的請求必須回到伺服器上。Expires 頭通常被作為替補方案與更新、更靈活的 cache-control 頭一起使用。
Here's an example of how you might set up caching in the .htaccess file on an Apache server.
下面是 Apache 伺服器上在 .htaccess 檔案中怎樣設定（這種型別的）快取的例子：
## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
## EXPIRES CACHING ##
複製程式碼(來源: GTmetrix)
As you can see, different types of files have different expiry dates in this example: images don't expire for a year after access/caching, while scripts, PDFs, and CSS styles expire in a month, and any file type not explicitly listed expires in two days. The retention periods are up to you, and should be chosen based on the file types and their update frequency. For example, if you regularly change your CSS, you might want to use a shorter expiry, or even none at all, and let it default to the two-day minimum. Conversely, if you link to some static PDF forms that almost never change, you might want to use a longer expiry for them.
你可以看到，在此例中，不同型別的檔案設定了不同了過期時間：圖片型別的檔案（訪問或者快取之後）的過期時間為一年；指令碼，PDF，CSS樣式檔案的過期時間為一個月；其他未顯式地列出來的檔案型別則為兩天。具體的留存週期（retention periods）取決於你，而你應該基於檔案的型別以及他們的更新頻率來做出選擇。例如，如果你經常修改你的CSS檔案，那麼你應該使用一個較短的過期時間，或者甚至不做設定，就採用預設的“兩天”。反之，如果你引用的是一些幾乎從不改變的靜態PDF表單，那麼你應該使用一個較長的過期時間。
Tip: Don't use an expiry greater than one year; that's effectively forever on the internet and, as noted above, is the maximum value for max-age under cache-control.
提示：不要設定超過一年的過期時間，這在因特網上相當於永遠；和前面說的 cache-control 中的 max-age 一樣，這是它的最大值。
Summary 總結
Caching is a reliable and low-hassle way to improve your pages' load speed and thus your users' experience. It is powerful enough to allow sophisticated nuances for specific content types, but flexible enough to allow easy updates when your site's content changes.
快取是一種對於提升頁面載入速度進而提升使用者體驗的可靠、低成本的方式。雖然對指定檔案型別的精細控制它已經很強大了，但對於內容變動的輕易更新卻還不是很靈活。
Be assertive with caching, but also be aware that if you later change a resource that has a long retention period, you may inadvertently deprive some repeat visitors of newer content. You can find a great discussion of caching patterns, options, and potential pitfalls in Caching Best Practices and Max-age Gotchas.
對於快取我們要信任，但同時也要意識到，如果某個資源擁有一個較長的快取週期，而之後你又對其進行了修改，那麼，無意中你可能就剝奪了某些回訪者看到新內容的機會。關於快取的模式（patterns），選項（options），以及可能的一些陷阱，在《最佳快取實踐和Max-age的要點（Caching Best Practices and Max-age Gotchas）》中做了很好的探討，你可以找來看看。