浏览器缓存机制

缓存可以加快响应时间，提高用户体验。对于文件比如一个 html 中引入的各种文件，浏览器会自动进行缓存，但是对于一些 XmlHttprequest(XHR 或者说 ajax请求), 有时候我们也需要进行缓存，需要通过设置 http 请求头来达到目的。注意 post 请求浏览器是不会进行缓存的。

http状态码304

当我们打开控制台反复刷新的时候，可能会看到状态码含有304的请求，这种类型的请求代表服务器没有给我们返回数据，而是取用的是浏览器缓存中的数据。所以该状态码代表使用缓存。

浏览器怎么知道要去取缓存中的内容呢

这里就要涉及到我们的请求头和响应头中的内容了。

ETags和If-None-Match

ETags是响应头中的内容，而If-None-Match是请求头中的内容。
ETags和If-None-Match的工作原理是在HTTP Response中添加ETags信息。当客户端再次请求该资源时，将在HTTP Request中加入If-None-Match信息（ETags的值）。如果服务器验证资源的ETags没有改变（该资源没有改变），将返回一个304状态,然后浏览器得知是304状态，就去浏览器缓存中取数据，否则，服务器将返回200状态，并返回该资源和新的ETags。

last-Modified 和 If-Modified-Since

last-Modified是响应头中的内容，If-Modified-Since是请求头中的内容
这两个配合使用和上面说的ETags和If-None-Math使用用方法一样。last-Modified代表的时候服务器返回的该资源最后修改的时间。

Cache-control

请求头部和响应头部中都可以包含该字段，该字段是用来设置浏览器缓存的保留时间，它可以设置为以下值

• no-cache 不被缓存的，只不过每次在向客户端（浏览器）提供响应数据时，缓存都要向服务器评估缓存响应的有效性。 
• no-store 用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。 根据缓存超时
• max-age 指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。
• min-fresh 指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
• max-stale 指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以 接收超出超时期指定值之内的响应消息

Expires

该属性表示内容保质期，表示存在时间，允许客户端在这个时间之前不去检查（发请求），等同max-age的效果。但是如果同时存在，则被cache-control的max-age覆盖。