Appearance
缓存控制
不缓存
实现
响应头设置cache-control: no-store
。
TIP
expires
字段已经过时,它有很多弊端,所以不要用。
适用场合
适用场合很少,只有在明确知道肯定用不到本地缓存的场合才应该使用“不缓存”。比如:
服务器时间接口,因为服务器时间每次请求一定是不一样的,没必要缓存。
图形验证码接口,每次都是不一样的内容。
秒杀接口,这个“秒杀”是原本意义的几秒内的秒杀,不是现在限时 2 个小时的所谓秒杀。你可能在一秒内发出数次请求,缓存秒杀结果没有任何意义,所以不缓存。
强缓存
实现
响应头设置cache-control: max-age=31536000
,单位是秒,31536000
即 1 年。
适用场合
对于 Vue 项目来讲,凡是文件名带版本号或者 hash 的文件,一律强缓存,过期时间一般设为 1 年。
协商缓存
实现
响应头设置:cache-control: no-cache
、last-modified: 世界时
、etag: hash 值
。
TIP
浏览器会自动在请求头设置:If-Modified-Since
、If-None-Match
,开发者无需操心。
字段解释
last-modified: Mon, 14 Mar 2022 06:42:05 GMT
:属于响应头。诞生于 HTTP 1.0 规范。服务器告诉浏览器该资源的最后修改时间。If-Modified-Since: Mon, 14 Mar 2022 06:42:05 GMT
:属于请求头,值等于last-modified
的值。浏览器下一次请求会带上If-Modified-Since
,向服务器询问这个时间之后该资源是否有更新,如果有更新则返回新资源,并带上新的last-modified
,如果没有则返回304
状态,响应体缺失,浏览器看到304
之后就会从磁盘缓存取资源。etag: W/"622ee3bd-850"
:属于响应头。etag
是 HTTP 1.1 规范新加的字段,是服务器根据特定算法算出的 hash 值,它的出现是由于last-modified
无法解决这两种情况:如果服务器文件被同样内容的文件覆盖过,此时内容没变但时间变了,服务器会返回同样的内容,造成带宽浪费。
如果服务器文件的内容 1 秒内变了多次,这时
last-modified
不变,造成服务器不返回新内容。
etag
可以解决这 2 个问题。事实上单有etag
就足以保证资源准确性,可以关掉last-modified
。If-None-Match: W/"622ee3bd-850"
:属于请求头,值对应etag
的值,浏览器向服务器发送If-None-Match
询问资源的内容是否有变化,有变化则返回新资源,并带上新的last-modified
和etag
。
适用场合
对于 Vue 项目来讲,除了不缓存的和强制缓存的,其他一律使用协商缓存,包括:
对于 GET 接口,99% 使用协商缓存,除非是服务器时间接口、图形验证码接口、秒杀接口等。
文件名没有版本号或者 hash 的文件一律使用协商缓存,比如 index.html、favicon.ico 等。
针对 Nginx 的总结
Vue 打包目录下的
/static
内部文件全部设为强缓存。/static
外部根目录下的所有文件和下级目录下的所有文件全部设为协商缓存。默认将所有接口设为协商缓存。
将图形验证码接口、服务器时间接口(如果有的话)、秒杀接口(如果有的话)、每次请求内容都变化的接口(如果有的话)设为不缓存。