nginx 加载图片很慢 nginx 图片缓存_缓存

对于网站的图片,尤其是新闻站, 图片一旦发布, 改动的可能是非常小的.我们希望 能否在用户访问一次后, 图片缓存在用户的浏览器端,且时间比较长的缓存.

Nginx提供了expires、etag、if-modified-since指令来实现浏览器缓存控制。

expires

如果我们使用Nginx作为静态资源服务器，那么可以使用expires进行缓存控制。

location /img {
         alias /export/img/;
         expires 1d;
      }

当我们访问静态资源时，如http://192.168.61.129/img/1.jpg，将得到类似如下的响应头。

nginx 加载图片很慢 nginx 图片缓存_nginx 加载图片很慢_02

对于静态资源会自动添加ETag，可以通过添加etag off指令禁止生成ETag。如果是静态文件，那么Last-Modified值为文件的最后修改时间。Expires是根据当前服务器系统时间算出来的。如上Nginx配置的计算逻辑（实际计算逻辑比这个多，具体参考官方文档）(注意:服务器的日期要准确,如果服务器的日期落后于实际日期,可能导致缓存失效)

if (expires == NGX_HTTP_EXPIRES_ACCESS||r->headers_out.last_modified_ time == -1) {
   max_age = expires_time;
   expires_time += now;
}

 

if-modified-since

此指令用于指定Nginx如何拿服务端的Last-Modified和浏览器端的if-modified- since时间进行比较，默认“if_modified_since exact”表示精确匹配，也可以使用“if_modified_since _before”表示只要文件的最后修改时间早于或等于浏览器端的if-modified-since时间，就返回304。

nginx proxy_pass

使用Nginx作为反向代理时，请求会先进入Nginx，然后Nginx将请求转发给后端应用，如下图所示。

nginx 加载图片很慢 nginx 图片缓存_nginx 加载图片很慢_03

首先配置upstream。

upstream backend_tomcat {
   server 192.168.61.1:9080max_fails=10 fail_timeout=10s weight=5;
}

接着配置location

location = /cache {
   proxy_pass http://backend_tomcat/cache$is_args$args;
}

接下来，我们可以通过如http://192.168.61.129/cache?millis=1471349916709访问Nginx，Nginx会将请求转发给后端Java应用。也就是说Nginx只是做了相关的转发（负载均衡），并没有对请求和响应做什么处理。

假设对后端返回的过期时间需要调整，可以添加Expires指令到location。

location = /cache {
   proxy_pass http://backend_tomcat/cache$is_args$args;
   expires 5s;
}

然后再请求相关的URL，将得到如下响应。

nginx 加载图片很慢 nginx 图片缓存_Nginx_04

过期时间相关的响应头被Expires指令更改了，但是last-modified是没有变的。

即使我们更改了缓存过期头，但Nginx自己没有对这些内容做代理层缓存，每次请求还是要到后端验证的，假设在过期时间内，这些验证在Nginx这一层验证就可以了，不需要到后端验证，这样可以减少后端很大的压力。即整体流程如下。

1．浏览器发起请求，首先到Nginx，Nginx根据URL在Nginx本地查找是否有代理层本地缓存。

2．Nginx没有找到本地缓存，则访问后端获取最新的文档，并放入到Nginx本地缓存中，返回200状态码和最新的文档给浏览器。

3．Nginx找到本地缓存，首先验证文档是否过期（Cache-Control:max-age=5），如果过期，则访问后端获取最新的文档，并放入Nginx本地缓存中，返回200状态码和最新的文档给浏览器；如果文档没有过期，即if-modified-since与缓存文档的last-modified匹配，则返回304状态码给浏览器。

内容不需要访问后端，即不需要后端动态计算/渲染等，直接Nginx代理层就把内容返回了，速度更快，内容越接近于用户速度越快。像ApacheTraffic Server、Squid、Varnish、Nginx等技术都可以用来进行内容缓存。还有CDN技术就是用来加速用户访问的。

nginx 加载图片很慢 nginx 图片缓存_nginx缓存_05

即用户首先访问到全国各地的CDN节点（使用如ATS、Squid实现），如果CDN没命中，则会回源到中央Nginx集群，该集群做二级缓存，如果没有命中缓存（该集群的缓存不是必须的，要根据实际命中情况等决定），则最后回源到后端应用集群。

像我们商品详情页的一些服务就大量使用了Nginx缓存减少回源到后端的请求量，从而提升访问速度。

服务器响应文件内容是,同时响应etag标签(内容的签名,内容一变,他也变), 和 last_modified_since 2个标签值浏览器下次去请求时,头信息发送这两个标签, 服务器检测文件有没有发生变化,如无,直接头信息返回 etag,last_modified_since，浏览器知道内容无改变,于是直接调用本地缓存.，这个过程,也请求了服务器,但是传着的内容极少.对于变化周期较短的,如静态html,js,css,比较适于用这个方式