liujiusheng / blog

个人博客,blog
19 stars 0 forks source link

Nginx与浏览器中的缓存研究 #176

Open liujiusheng opened 4 years ago

liujiusheng commented 4 years ago

Expires是设置一个固定时间点,可以写成max、1d、365d类似的时间

Cache-Control: max-age是设置一个时间长度,即浏览器会根据Last-Modified的时间自动计算一个时间点出来,这个max-age=123456,中123456单位是毫秒。

Content-Encoding: gzip是表示启用了gzip压缩,chrome控制台network里的transferred表示经过gzip压缩后经过网络传输的数据量,resources表示传输到前端数据解压后的实际数据量。

gzip配置

这个配置也是可以写在location里面的

gzip  on;
gzip_types text/plain application/x-javascript text/css application/xml application/json application/octet-stream;

application/octet-stream可以通过mvt服务的数据流。

自己写的mvt服务通常是没有header的,所以需要加上"Content-Type"为"application/octet-stream"的header内容。

缓存配置:

在location里写上:

expires 1d;(缓存一天)或expires max;(启用最大缓存时间,默认实际执行时间好像是一年) 或者在server里配置: add_header Cache-Control max-age=31536000;

在Chrome上调试HTTP/2的缓存一直不成功,但是在Firefox上能成功,可能的问题是Chrome安全限制更严格,不能在localhost上使用HTTPS的缓存。

如果Nginx只是作为代理呢,通过proxy_pass转发请求,它的各种头会有啥变化? Last-Modified、ETag两个header不管启没启用缓存都会被传输到前端来。 首先可以确定的是,在新版本的nginx中(我测的1.16.1和1.18.0)如果不配置,默认是不会带上Expires、Cache-Control、Content-Encoding这几个头的。默认不会启用gzip,但默认情况下浏览器端会缓存数据。

如果之前没有这些头,后来配置加上了,那必须要清空缓存后重新加载才能在浏览器的network里面看到这些头信息。

如果源服务带了这些头的,那这些头也会原模原样地转发到客户端(Content-Encoding好像没被转发过来,Expires、Cache-Control被转过来了)。

如果后端服务源不启用Expires和gzip,只是前面代理的nginx启用了gzip和Expires,传输的数据同样会被压缩,同样能被缓存,且返回的头里有这些信息。根本不像网上说的代理的缓存还要在代理nginx上配置一块硬盘存储区域用来缓存。

参考:

https://www.cnblogs.com/kevingrace/p/10459429.html https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Expires