当用户访问一个站点的时候，所有的资源都必须有一个来源。所有的文本、图片、样式、脚本等资源都必须被浏览器接收到才能展现和执行。开发者可以给浏览器提供选择，选择是从哪里获取这些资源，这样可以极大地提升页面加载速度。
页面第一次加载完之后，浏览器把这些资源存在了 HTTP Cache 中。第二次打开这个页面的时候，浏览器会优先从硬盘中查找这些资源的缓存，比从服务器去下载要更快一些。
虽然HTTP缓存是由 Internet Engineering Task Force (IETF) specifications 定制的规范，但是浏览器可以拥有多种不同的缓存，它们在获取、存储、保存内容的方式上也各不相同。你可以阅读这篇文章来了解这些缓存的区别 A Tale of Four Caches。
当然第一次访问站点没有缓存。第二次访问也可能没有缓存，因为用户可能会手动清除了缓存，也可能是强制刷新。仍然有很大一部分用户能够享受到缓存带来的飞速打开体验，最大化利用缓存能给让这批用户打开速度有质的飞跃。
开启缓存
我们可以根据资源的改动频率来决定缓存的方式。像站点logo可能基本上不会变化，而脚本可能隔几天就变一次。你需要去分辨哪些资源是动态的，哪些又是静态的，这样才能针对性的开启缓存，或者决定缓存的有效时间。
缓存头（Cache Headers）
目前有两种主要的缓存头，cache-control 和 expires，可以用来定义资源的缓存特性。cache-control可能会相对而言更现代化、更灵活。这两者也可以同时使用。
缓存头是服务器层设置的，nginx和apache都有自己的语法。
Cache-control
以下是apache的.htaccess文件的配置：
<filesMatch ".(ico|jpg|jpeg|png|gif)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
针对图片文件，我们一般设置一个月的过期时间
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=86400, public"
</filesMatch>
cache-control有一系列的配置项，也被称为指令，用来告知浏览器如何处理缓存。以下是部分常用的指令，更多内容可以看 Mozilla Developer Network。
- no-cache: 优先从服务器获取资源，如果服务器返回304，告知没有修改，则应用本地缓存
- no-store: 永远不缓存，常用于一些敏感信息，经常变动
- public: 可以被浏览器和中间层服务器缓存
- private: 只能被浏览器缓存，中间层服务器不能缓存
- max-age: 定义了内容可以被缓存的有效时间，秒级的整数，如：86400（一天）
Expires Caching
你可以针对不同类型的资源定义不同的过期时间，以下是.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 ##
注意事项
Expire Caching最大不能超过1年，max-age也是一样，否则会造成永久缓存。
总结
缓存是一种可靠、简单的方式来提升页面加载速度，改善用户体验。缓存功能强大，也足够灵活，可以针对多种不同的内容做不同的策略。
同时也要注意的是，如果缓存设置时间过长，用户可能会很长一段时间都看不到新内容，详细可以参考： Caching Best Practices and Max-age Gotchas。
参考
https://developers.google.com/web/fundamentals/performance/get-started/httpcaching-6