http请求中静态资源的缓存

前言

对于前端优化而言，必然离不开网络的优化。而对于网络，必然离不开http请求。为了避免发送重复的资源请求，此时缓存就显得尤为重要。下图是一般的网络请求的过程。

缓存类型

对于http，不同的版本对于缓存都有较大的差异，但是可以分为两大类型：强制缓存和对比缓存。这两者最大的区别在于：强制缓存不会发送网络请求，而对比缓存会发送一个网络请求，对比服务器上资源和本地资源的版本。在有强制缓存类型的情况下优先使用强制缓存。

强制缓存

对于第一次请求资源，在没有资源缓存的情况下，会发送资源请求请求服务器获取对应的资源。在http响应头会有强制缓存的标志（Expires/Cache-Control）。分别对应http1.0和http1.1的缓存规则。当下次请求对应资源的时候，根据强制缓存的标志，如果还在缓存期内，那么直接使用本地缓存，不在发送网络请求。

Expires

Expires在http1.0中，代表该资源的过期时间。使用的是绝对的时间来标记资源的过期时间，但是由于服务器与客户端之间的时间可能存在差异（例如客户端的时间可以随意修改），此时会导致缓存的不准确。

Cache-Control

在http1.1中引入了Cache-Control，取值一般有private、public、no-cache、max-age，no-store，默认为private。
private: 默认缓存
max-age=xxx: 缓存的内容将在 xxx 秒后失效
no-cache: 使用对比缓存来验证缓存数据
no-store: 不使用缓存，一般来说都会设置缓存

对比缓存

在没有设置强制缓存的情况下，那么就会比较对比缓存标志。在使用对比缓存的时候，会将之前在客户端的对比缓存的标志发送到服务器，与服务器上的版本进行比较，如果资源没有被修改过，那么直接返回304，此时使用本地缓存的资源，若资源已过期，则返回新的资源，此时的状态码是200.

Last-Modified

在响应请求时，告诉浏览器资源的最后修改时间，这是在http1.0中就存在的缓存标志。但是由于该标志是根据文件的修改时间决定的，而且是基于秒级，如果在一秒内对文件修改两次的话，此时last-modified的值是一致的。

Etag

Etag是资源的唯一标志，在资源的内容没有发生变化的时候，Etag不会发生改变。这个标记同样会通过响应头返回给客户端。该标志就是为了弥补last-modified的不足。

两者的差异

Last-Modified是在http1.0就已经存在的，Etag是http1.1新引入的。

Etag 主要为了解决 Last-Modified 无法解决的一些问题：
1、一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET；
2、某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)；
3、某些服务器不能精确的得到文件的最后修改时间。

总结

对于静态资源的缓存一般都会设置强制缓存和对比缓存，当强制缓存与对比缓存同时存在的时候，优先使用强制缓存，在强制缓存中，cache-control的优先级大于expires。当强制缓存存在的时候，浏览器直接使用本地缓存，并且请求返回200，此时的请求是不会请求服务器的。而当强制缓存过期的时候，则会使用对比缓存，此时会发送一个请求到服务器，如果此时文件还未被更新，则请求返回304，并且会使用本地的缓存文件。否则服务器返回200，并且返回对应的新的资源。