浏览器缓存

浏览器缓存机制的全过程：

1. 客户端向服务器首次发送请求时，服务器返回状态码为200的资源文件，并在响应头中回传资源缓存字段。
2. 下一次请求时，由于强制缓存优先级高，先比较本地时间与上一次返回状态码为200的时间，其差值在cache-control的属性max-age范围内，则说明缓存没有过期，命中强制缓存，返回本地缓存的资源，结束本次请求。
3. 若缓存过期了，则强制缓存没有被命中，开始协商缓存。发送请求头带有if-none-match或if-Modified-Since的请求。
4. 服务器收到请求后，首先会通过Etag判断所请求的资源是否发生了变动，若两者一致，则返回状态码为304的响应数据，告诉客户端资源未改动，可以使用;若不一致，则返回新资源并带上新的Etag。
5. 若服务器收到请求后，发现没有Etag，则拿last-modified-sice与所请求资源文件的最后修改时间做比较，若两者一致，则返回状态码为304的响应数据；若不一致，则返回新资源，并带上新的last-modified。

浏览器缓存流程图

强制缓存和协商缓存有什么区别？

强制缓存不用向服务器发送请求，而协商缓存需要向服务器发送一次请求，来确认所请求的资源文件是否发生了变动。

强制缓存是如何判断资源是否过期的呢？

有两种方式确认缓存的资源是否过期：Expires和cache-control。

Expires是缓存资源到期时间，它是一个绝对值，当客户端时间大于这个值，则说明资源已过期。用Expires判断资源是否过期有一个问题，那就是客户端的时间不准确时，会影响强制缓存的命中。

为了解决Expires存在的问题，HTTP1.1引入了cache-control,如果当前时间与上一次请求返回状态码为200的时间的差值在cache-control的属性max-age范围内，则说明缓存没有过期，并命中强制缓存。

协商缓存也有两种方式判断资源是否变动。

一种方式就是Etag。首次请求资源时，响应头中会带有Etag属性，Etag是所请求资源的唯一标识符。下一次请求时，请求头中会带有if-none-match属性，其属性值就是Etag的值，服务器收到请求后，会对if-none-match与当前资源的Etag的值进行比较，若一致，则返回状态码为304的请求响应；若不一致，则返回最新资源，并在响应头中回传最新的Etag值。

若没有Etag,服务器会用last-modified来判断资源是否改动。由此请求时，服务器在响应头中回传last-modified这个属性，属性值为服务器最近一次资源修改的时间；下一次请求时，请求头中会带有last-modified-since属性，属性值就是上一次资源请求成功时响应头中last-modified的值。服务器接收到请求后，会对last-modified-since和当前资源修改时间进行比较，若一致，则返回状态码为304的请求响应；若不一致，则返回最新资源，并在响应头中带有最新的last-modified。

手动刷新：F5 + 刷新按钮、强制刷新：crtl + F5、回车刷新有什么区别？

手动刷新：强制缓存无效，协商缓存有效。
强制刷新：强制缓存和协商缓存均无效。
回车刷新：按正常流程请求资源。