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),从缓存中提取,没有网络请求
    }

浏览器缓存效果如下:

82054d13ly1fp93f88e7tj20lf06l3z8.jpg

参考:HTTP缓存