Http304与浏览器缓存

定义

在Http请求中，返回代码是304的时候代表的是当前请求内容未发生变化，服务器不会返回网页内容，浏览器直接从缓存加载。

详解

1:在304的请求过程中，有两个header比较重要：if-modified-since 和 if-none-match。当客户端发送请求的时候带上这两个参数之后，服务器会读取当前两个头的值，判断客户端的缓存是否最新：
如果是的话，服务器返回304代码（只有响应头）,客户端收到304以后，直接从本地加载对应的资源。
如果不是的话，则返回200代码，并附在最新的内容的响应体。
此时的操作都是通过发送Http请求，然后通过对服务器返回值的判断进行查询是否使用缓存。

2:如果目标是不发送请求，就直接使用本地缓存呢？
此时就需要使用到Cache-Control的设置了：
cache-control分为两个: expires和max-age
expires = 时间，HTTP 1.0 版本，缓存的载止时间，允许客户端在这个时间之前不去检查（发送请求)
max-age = 秒，HTTP 1.1版本，资源在本地缓存多少秒
如果max-age和Expires同时存在，则被Cache-Control的max-age覆盖。在经过设定的缓存时间之后，浏览器会再次发起条件请求。

3:缓存标签的区别
3.1:Expires
定义：http/1.0定义的header，表示资源在一定时间内从浏览器的缓存中获取资源，不需要请求服务器获取资源，从而达到快速获取资源，缓解服务器压力的目的。
格式：Fri, 04 Aug 2017 11:49:43 GMT
应用：可以通过页面的 3.2:Last-modified
定义：上次修改（时间），通过修改服务器端的文件后再请求，发现response的header中的Last-modified改变了。
格式：Last-Modified:Fri, 04 Aug 2017 11:52:51 GMT
应用：请求的流程如下：浏览器首次请求资源时，服务器返回200代码和内容，然后对应的返回头有一个Last-Modified标签，表示文件的最后修改时间。当浏览器再次请求该资源时，浏览器的请求头会有一个If-Modified-Since标签，格式为If-Modified-Since:time。服务器收到这个头以后，检查对应的资源是否有变化，如果没有则返回304code，响应内容为空。否则如果发生变化，则返回200代码，内容为对应的内容。
3.3:Etag
定义：Http/1.1中增加的header，代表的是当前资源的"签名"
格式：
应用：和Last-Modified类似，浏览器初次请求资源的时候，服务器返回的响应头标签包含对应的Etag，代表当前内容的签名。然后浏览器再次请求当前资源的时候，在请求头中添加If-None-Match的标签，服务器根据对应的资源签名是否发生变化，选择304或者200返回。
3.4:max-age
定义：Cache-Control中设置资源在本地缓存时间的一个值，类似于Expired标签
格式：Max-age:300,单位秒，其他可能值no-cache
应用：指明当前浏览器在多长时间内可以不访问服务器直接加载缓存资源

4:各个标签区别
Last-Modified和Etag
两者都是用来表示当前浏览器的文件与服务器的文件是否相同，都是用来进行条件请求的操作。区别是Last-Modified代表的当前文件的最后修改时间，进行比较的时候是根据时间的异同来判断。Etag是对当前内容的签名，判断的时候是根据浏览器发送的当前文件的签名和当前服务器文件的签名是否相同判断的。
如此看来，两个标签貌似功能是一致的，那为什么需要两个标签呢？主要的问题是Last-Modified存在多个服务器时间不一致的问题，另一个就是如果用旧文件替换新的文件的话那还是检测不出变化，时间精度要求很高。

Expires和max-age
Expires是1.0版本的标签，表示的是当前资源在某个时间点之前不用去向服务器发送请求验证资源是否发生变化；max-age代表的是从当前资源下载时间点开始，经过多长之间之内都不需要发送请求进行资源判断。
Expires和Last-Modified类似，存在服务器时间和浏览器时间不一致的情况。如果两者同时存在，则max-age会改变expires，即expores=max-age+当前下载时间