页面加载性能之HTTP缓存

时间 2020-07-18

原文原文链接

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

页面第一次加载完以后，浏览器把这些资源存在了 HTTP Cache 中。第二次打开这个页面的时候，浏览器会优先从硬盘中查找这些资源的缓存，比从服务器去下载要更快一些。css

虽然HTTP缓存是由 Internet Engineering Task Force (IETF) specifications 定制的规范，可是浏览器能够拥有多种不一样的缓存，它们在获取、存储、保存内容的方式上也各不相同。你能够阅读这篇文章来了解这些缓存的区别 A Tale of Four Caches。html

固然第一次访问站点没有缓存。第二次访问也可能没有缓存，由于用户可能会手动清除了缓存，也多是强制刷新。仍然有很大一部分用户可以享受到缓存带来的飞速打开体验，最大化利用缓存能给让这批用户打开速度有质的飞跃。java

开启缓存

咱们能够根据资源的改动频率来决定缓存的方式。像站点logo可能基本上不会变化，而脚本可能隔几天就变一次。你须要去分辨哪些资源是动态的，哪些又是静态的，这样才能针对性的开启缓存，或者决定缓存的有效时间。nginx

缓存头（Cache Headers）

目前有两种主要的缓存头，cache-control 和 expires，能够用来定义资源的缓存特性。cache-control可能会相对而言更现代化、更灵活。这二者也能够同时使用。web

缓存头是服务器层设置的，nginx和apache都有本身的语法。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...