缓存控制
通常在浏览器端会有自己的缓存,他是通过 HTTP 协议定义的缓存机制(如:Expires,Cache-Control 等)来实现的。当客户端有了缓存后在第二次发出同样的请求时浏览器会先到自己的缓存中去找,以达到减少与服务器的交互来降低服务器的消耗。
浏览器在无缓存下访问
第一次访问浏览器中没有缓存要请求的目标内容,直接向目标服务器发出请求,目标服务器响应请求。
浏览器已有缓存
当浏览器发现本地有缓存时他会对缓存进行校验,该内容的缓存周期、是否过期;如果没有过期那么就返回内容进行程序,如果过期,向服务端请求,服务端会判断该文件是否有更新,如果有更新那就响应更新的内容给客户端,如果没有更新,那客户端依然可以使用旧的缓存。
需要注意的是市面上大多数浏览器都会在请求头中加了
Cache-Control:max-age=0
使浏览器每次请求都会跟服务器进行交互,但他们传输的数据量非常小。
校验过期机制
-
校验是否过期通过 Expires 在 HTTP 1.0 中, Cache-Control(max-age)在 HTTP 1.1 中
在 Cache-Control 的 max-age 中存放了缓存内容的缓存周期,最大过期时间。 -
协议中 Etag 头信息校验
记录了缓存内容的校验码,用于与服务器端的内容进行对比。如对比一致响应客户端304
;如不一致这响应更新内容给客户端,状态吗200
。 -
Last-Modified 头信息校验
记录了缓存内容的修改时间戳,用于与服务器端的内容进行对比。如对比一致响应客户端304
;如不一致这响应更新内容给客户端,状态吗200
。
在实际应用中 Etag 的优先级更高,因为 Last-Modified 他的时间戳只能精确到秒,不可靠。
开启缓存
要对内容开启缓存那么就需要在响应头部中添加 Cache-control
、 Expirse
头。
在 Nginx 中使用 expires
指令来进行配置,这个指令包含在 http_headers_module
中。
expires 指令配置语法
Syntax: expires [modified] time;
expires epoch | max | off;
Default: expires off;
Context: http, server, location, if in location
用于控制 HTTP 响应头部中的 Expires
和 Cache-Control
信息以控制缓存;
time
表示一个时间周期,如 10s 表示 10 秒,1m 为一分钟,1h 为一小时,1d 为一天;Expires
的值为系统当前时间加所设定的 time
值;为负数时 Cache-Control:max-age
为 no-cache
epoch
所代表的值为一个绝对时间 “Thu,01 Jan 1970 00:00:01 GMT”
max
表示将 Cache-Control:max-age
值设置为 10 年也就是 315360000 秒,将 Expires 的值指定为 “Thu, 31 Dec 2037 23:55:55 GMT”。
off
表示禁止添加或修改 Expires
和 Cache-Control
响应头。
他可以在 http
, server
, location
, if in location
上下文中配置
示例
将站点中所有图片缓存周期设置为一天;
server {
...
location / {
root /opt/www/;
index index.html index.htm;
}
location ~ *\.(gif|jpg|jpeg|png|bmp|ico)$ {
expires 1d;
}
首次访问
可以看到响应头部中增加了 Cache-Control
与 Expires
两个头部;
Cache-Control:max-age=86400
也就是一天的秒数;
第二次访问
可以看到响应状态码虽然显示为 200
,但浏览器显示是来之磁盘缓存,说明这次所看到的图片不是从服务器上下载的,而是从本地缓存中读取的。
对于普通的文件就不会应用缓存了
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于