说明:浏览器缓存是将文件保存在客户端,页面的缓存状态是由header决定的强缓存 强缓存主要使用Expires、Cache-Control 两个头字段,两者同时存在Cache-Control 优先级更高。当命中强缓存的时候,客户端不会再求,直接从缓存中读取内容,并返回HTTP状态码304,下面是响应状态(response headers) http/1.0 Expires:响应头,代表该资源的过期时间,如果客户端在过期时间之前再次获取该资源,就不需要再请求我服务器了,可以直接在缓存里面拿,Expires:max-age=3600Expires优点:在过期时间以内,直接从本地缓存读取,减少了网络请求,首屏渲染更快,用户体验更好Expires缺点:由于是基于时间来判断缓存是否过期,缓存过期以后,不管服务器文件有没有变化,都会重新发起请求;判断缓存是否过期,要依赖客户端的时间,客户端时间可能不准确,就可能发起请求 http/1.1 Cache-Control: 请求/响应头,缓存控制字段,精确控制缓存策略 响应头:max-age:缓存最大的有效时间s-maxage:用于共享缓存(CDN缓存),只对 public 缓存有效public:指定响应会被缓存,并且在多用户间共享private:响应只作为私有的缓存,不能在用户间共享,HTTP认证,响应会自动加上privateno-cache:指定不缓存响应,资源不进行缓存,加上privateno-store:绝对禁止缓存must-revalidate:指定如果页面是过期的,则去服务器进行获取 请求头:max-stale:3600,表示客户端到代理服务器上拿缓存的时候,即使代理缓存过期了也不要紧,只要过期时间在3600 秒之内,还是可以从代理中获取的min-fresh:3600,表示缓存需要一定的新鲜度,在到期前 3600 秒之前的时间拿only-if-cached:这个字段加上后表示客户端只会接受代理缓存,而不会接受源服务器的响应,如果代理缓存无效,则直接返回504 协商缓存 last-modified/if-modified-since和cache-control:Last-Modified:表示这个响应资源的最后修改时间If-Modified-Since:当资源过期时(cache-control:no-cache,max-age=0),发现资源具有Last-Modified声明,则再次向web服务器请求时带上头If-Modified-Since:Last-Modified的值web服务器收到请求后发现有头If-Modified-Since则与被请求资源的最后修改时间进行比对,若最后修改时间变化了,说明资源又被改动过,则响应整片资源内容,HTTP 200;若最后修改时间没有变,说明资源无修改,则响应HTTP 304,告知浏览器继续使用本地缓存 etag/if-none-match和cache-control(优先级高):etag:根据实体内容生成一段hash字符串,标识资源的状态,由服务端产生if-none-match:当资源过期时(cache-control:no-cache,max-age=0),发现资源具有etag声明,则再次向web服务器请求时带上头,if-none-match:etag的值web服务器收到请求后发现有头if-none-match则与被请求资源进行相应的比对,若资源内容没有修改返回304,否则返回200LocalStorage和sessionStorage LocalStorage:本地持久化存储 sessionStorage:会话存储,关闭浏览器就会删掉