前端HTTP缓存

简介

在面试的时候总是遇到缓存相关问题，回答总是停留缓存就是从浏览器中获取，不向服务器发送请求，回答的不让面试官满意，索性抽点时间整理一下前端相关的缓存，希望下次回答的时候能够多讲点。

前端缓存分为强缓存和协商缓存，强缓存就是在缓存未失效时，不在请求服务端，协商缓存就是去跟服务器比较是否需要重新获取资源 。

强缓存

强缓存分为两种，Cache-control和Expires，Expires是HTTP1.0的东西，它的值是一个格林时间，比如Expires: Wed, 21 Oct 2015 07:28:00 GMT，由于服务器端和浏览器端的时间差异问题，浏览器比服务器时间快，会导致缓存失效。Cache-control是HTTP1.1时代的新东西，设置的是一个相对时间，Cache-Control:public, max-age=31536000，在31536000秒后才缓存才失效，Cache-control有很多取值。

• public: 可以在客户端和代理服务缓存
• private: 只可以在客户端缓存,，不能在在代理服务器缓存
• no-cahce: 要求客户端提交缓存信息与服务器端进行验证(协商缓存)
• no-store: 不使用缓存，每次都去服务获取数据
• max-age=xxx: 缓存多少秒后失效

强缓存在缓存失效内，不会从原始服务器获取新的数据，假如在缓存时段内服务器有资源更新，会导致资源获取不及时。

协商缓存

协商缓存有两组报文

• Last-Modified和If-modified-since

• ETag和If-None-Match

  
  
  image.png

1. Last-Modified和If-modified-since都是时间格林时间，当请求资源时，服务端会把资源修改时间已格林时间格式放在报文Last-Modified发生给客户端，客户端再次请求资源时，会把上次返回的是Last-Modified的值放在If-modified-since中，服务端根据客户端的If-modified-since的值跟资源修改时间做判断，如果相等的话返回304，从缓存获取资源，如果不相等返回200，重新获取资源，重新建立缓存。虽然Last-modified和If-modified-since解决了强缓存带来的问题，但是格林时间只精确到秒，如果在1秒发生多次修改，也会导致资源获取不及时
2. Etag和If-None-Match，只有当文件发生变化后Etag的值才会发生变化，客户端访问服务端时，服务端把文件的Etag值返回给客户端，下次客户端访问时把上次的Etag值放在If-None-Match，服务端根据客户端的If-None-match值跟资源的Etag值做比较，如果值发生变化走200，重新获取资源和建立缓存，如果相当返回304走缓存