#2021加油带头人#昨天我们介绍了ETag。

浏览器会缓存Nginx返回的ETag值。今天我们来学习另一个浏览器缓存相关的header。

前端浏览器缓存对程序的影响(浏览器与缓存相关的另一个重要的header)(1)

当浏览器通过时间认为缓存已经过期了,这个时候浏览器被再次请求的时候,就会去Nginx问一下是否内容有修改过,如果内容没有修改过,就返回304那么内容就不用返回了。这样就节省了带宽资源。

那么Nginx是如何快速判断该资源是否被修改过呢?

浏览器会通过If-None-Match头部填入ETag的值。

这样Nginx在收到请求后会用ETag的值和If-None-Match里的值进行比较。

当2个值想匹配的时候就会直接返回304.

前端浏览器缓存对程序的影响(浏览器与缓存相关的另一个重要的header)(2)

当没有带If-None-Match头部,或者If-None-Match头部的值与ETag不匹配的时候返回200和资源

前端浏览器缓存对程序的影响(浏览器与缓存相关的另一个重要的header)(3)

需要注意的是:服务器端在生成状态码为304的响应的时候,必须同时生成以下会存在于对应的200响应中的头部:Cache-Control,Content-Location,Date,ETag,Expires和Vary。

说到304,最近有个哥们面试还问到了http状态码 301 302 304呢。

现在大家应该对这个304的使用场景,及作用比较清晰了。

,