共计 1912 个字符，预计需要花费 5 分钟才能阅读完成。
当用户拜访一个站点的时候，所有的资源都必须有一个起源。所有的文本、图片、款式、脚本等资源都必须被浏览器接管到能力展示和执行。开发者能够给浏览器提供抉择，抉择是从哪里获取这些资源，这样能够极大地晋升页面加载速度。
页面第一次加载完之后，浏览器把这些资源存在了 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…