页面加载性能之HTTP缓存

当用户访问一个站点的时候，所有的资源都必须有一个来源。所有的文本、图片、样式、脚本等资源都必须被浏览器接收到才能展现和执行。开发者可以给浏览器提供选择，选择是从哪里获取这些资源，这样可以极大地提升页面加载速度。

页面第一次加载完之后，浏览器把这些资源存在了 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文件的配置：


 Header set Cache-Control "max-age=2592000, public"

针对图片文件，我们一般设置一个月的过期时间


 Header set Cache-Control "max-age=86400, public"

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...