Nginx配置客户端缓存
Nginx可配置的缓存有:
- 服务端(proxy-cache实现)
- 客户端(浏览器缓存)
Proxy-cache 可以将动态响应内容静态化,本站全站静态文件,没有使用 Proxy-cache。
客户端缓存通过一下两种方式实现:
- 弱缓存
- 强缓存
弱缓存
在响应头中添加 Last-Modified(最后修改时间)和 ETag(内容特征)来标记实体文件,浏览器在请求中携带这些标记,询问服务器文件是否发生变化,服务器返回:
- 304(未发生变化),浏览器使用缓存
- 200(发生变化),返回新文件
强缓存
在响应头中设置 Expires(什么时间之前)和 Cache-Control(多长时间之后),直接告诉浏览器什么时间之内,不需要请求服务器,直接使用缓存。推荐使用 Cache-Control。
可以看出:
弱缓存 | 强缓存 | |
---|---|---|
优点 | 确保客户端请求文件最新 | 快 |
缺点 | 慢 | 更新可能反应不到客户端 |
因此,我们可以将不做修改的文件配置成强缓存,需要更改为文件配置弱缓存/或不要缓存。
我这里是这样配置:对于 html 文件可能要有更新,所以协商缓存。其他 css/js/jpg 文件鲜有更新,请求直接命中浏览器缓存,不发起网络请求。
这是简单的应用规则:
location ~* \.(html)$ {
# ~*通配任意字符(且大小写不敏感),\转义字符,通配所有以.html结尾的请求
access_log off;
# 关闭日志
add_header Cache-Control max-age=no-cache;
# html文件不设置强制缓存时间,协商缓存,使用 Last-Modified。
# no-cache 会发起往返通信来验证缓存的响应,但如果资源未发生变化,则可避免下载,返回304。
}
location ~* \.(css|js|png|jpg|xml|woff)$ {
# 同上,通配所有以.css/.js/...结尾的请求
access_log off;
add_header Cache-Control max-age=360000;
# 这些文件设置强制缓存360000秒,第一次访问后的请求,全部200(from cache),从缓存中提取,没有网络请求
}
浏览器缓存效果如下:
参考:HTTP缓存
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。