[译]谷歌Web性能优化系列：HTTP 缓存（中英）

原文连接(需越墙）： developers.google.com/web/fundame…

原文做者：Dave Gash   译者：西楼听雨

此做是谷歌开发者网站关于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）》中作了很好的探讨，你能够找来看看。