[TOC]
描述: 当我们访问某一个网页时浏览器第一次加载网页时,会将页面资源存储在 HTTP缓存中。下次浏览器访问该页面时,它可以在高速缓存中查找以前获取的资源,然后从磁盘检索它们,其速度通常比从网络上下载它们的速度快。
Tips: 虽然HTTP缓存是根据Internet工程任务组(IETF)规范进行标准化的 ,但浏览器可能具有多个缓存,这些缓存在获取,存储和保留内容的方式上有所不同。 Tips: 浏览器缓存实际上可能发生在原始服务器和客户端浏览器之间的任何中间站点,例如代理缓存或内容交付网络(CDN)缓存。
描述: 缓存头的两种主要类型分别是cache -control
和 expires
,它们定义资源的缓存特征。
通常 cache-control
被认为是一种比 expires(到期)
更现代,更灵活的方法,但是两个标头可以同时使用。
Q: 如何进行缓存?
答: 通过标识资源或资源类型(例如图像或CSS文件),然后使用所需的缓存选项指定资源的标头,来启用缓存。
Cache-Control
说明: 在 HTTP1.1 引入了Cathe-Control
缓存控制具有许多选项(通常称为指令
),可以将其设置为专门确定如何处理缓存请求。
简单图示: 对 http 的 304 状态结合 max-age 设置缓存命中流程
WeiyiGeek.
从缓存控制
和缓存校验
两个角度来看http的缓存
Tips : Cache-Control 符合缓存策略时,服务器不会发送新的资源,但不是说客户端和服务器就没有会话了,客户端还是会发请求到服务器的。
(1) 缓存控制 Tips : Cache-Control除了在响应中使用,在请求中也可以使用
WeiyiGeek.Cache-Control的请求与响应
Tips : 在 Cache-Control 中各键值可以自由组合如有多个值冲突,也是有优先级的而no-store优先级最高。
1) 在nginx配置测试然后在/opt/ms
下增加个文件type.css
server {
listen 88;
root /opt/ms;
index index.php index.html index.htm index.nginx-debian.html;
location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
add_header Cache-Control no-store;
add_header Cache-Control max-age=3600;
add_header Cache-Control public;
add_header Cache-Control only-if-cached;
add_header Cache-Control no-cache;
add_header Cache-Control must-revalidate;
}
}
2) 配置好之后,reload下nginx在浏览器访问地址http://127.0.0.1:88/type.css可以看到响应头部包含nginx配置中的字段
3) 重复刷新访问,会发现每次的状态码都是200,原因是no-store的优先级最高
,本地不保存,每次都需要服务器发送资源。
Q: public和private的选择?
如果采用CDN建议将
cache-control
的值为public,提升缓存命中率。 如果你的缓存命中率很低,而访问量很大的话,可以看下是不是设置了private,no-cache这类的值。 如果定义了max-age,可以不用再定义public,它们的意义是一样的。
2) 缓存校验
描述: 在缓存中我们需要一个机制来验证缓存是否有效。比如服务器的资源更新了,客户端需要及时刷新缓存;又或者客户端的资源过了有效期,但服务器上的资源还是旧的,此时并不需要重新发送。
缓存校验就是用来解决这些问题的,在http 1.1 中我们主要关注下 Last-Modified
和 etag
这两个字段。
Last-Modified 原理说明:
If-Modified-Since
或者If-Unmodified-Since
带上Last-Modified,服务端检查该时间是否与服务器的最后修改时间一致;Tips : If-Modified-Since和If-Unmodified-Since的区别是,前者告诉服务器如果时间一致,返回状态码304; 后者告诉服务器如果时间不一致,返回状态码412。
etag 原理说明:
描述: 单纯的以修改时间来判断还是有缺陷,比如文件的最后修改时间变了,但内容没变。对于这样的情况我们可以使用etag来处理。
服务器通过某个算法对资源进行计算,取得一串值(类似于文件的md5值),之后将该值通过etag返回给客户端,客户端下次请求时通过If-None-Match
或If-Match
带上该值,服务器对该值进行对比校验:如果一致则不要返回资源。
Tips : If-None-Match
和If-Match
的区别是,前者告诉服务器如果一致返回状态码304,而不一致则返回资源,后者告诉服务器如果不一致,返回状态码412
Pragma 描述: 通过指定某些类型的文件的到期时间来启用缓存,该时间告诉浏览器在向服务器请求新副本之前使用缓存资源的时间;
Pragma有两个字段Pragma
和Expires
。
Tips : expires 标头只是设置内容应在将来的时间。此后对内容的请求必须返回到原始服务器。使用更新且更灵活的高速缓存控制标头expires标头
通常用作备用。
Tips : Pragma 是旧产物,已经逐步抛弃,有些网站为了向下兼容还保留了这两个字段。如果一个报文中同时出现Pragma和Cache-Control时,以Pragma为准。同时出现Cache-Control和Expires时,以Cache-Control为准。
即优先级从高到低是
Pragma -> Cache-Control -> Expires
;
基础示例:
# Apache 的 .htaccess 配置缓存控制头和到期资源
<filesMatch ".(ico|jpg|jpeg|png|gif)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
## 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 ##
# Nginx 的缓存配置
location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ {
add_header Cache-Control max-age=2592000;
}
# 你会在响应头部看到一个etag字段,这是由于nginx默认开启,如果要关闭可以增加个配置etag off。(缓存校验字段)
location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ {
expires 30d;
}
Tips : 请勿使用超过一年的有效期;如上所述这是max-age缓存控制下的最大值,是互联网上永远有效的。
Tips : 缓存是提高页面加载速度并从而提高用户体验的可靠且省力的方法。它足够强大,可以为特定的内容类型提供细微差别,但是足够灵活,可以在网站内容发生更改时轻松进行更新。
缓存总结
从状态码的角度来看,它们的关系如下图1,cache-control的各个值关系如下图2
WeiyiGeek.状态码与cache-control值