Http缓存详解

1.为什么缓存？ 相对于cpu的计算和页面加载速度（mm级）来说， 网络请求更耗时， 所以通过http缓存的方式时间来减少网络请求， 从而能达到访问前端页面的性能优化。 http缓存策略分为强制缓存和协商缓存 2.强制缓存 Catch-Control Cache-Control 在Response Headers中,控制强制缓存的逻辑. (例如 Cache-Control:max-age=31536000(秒)=1年). Expires 在Response Headers中，设置缓存过期，已被Catch-Control代替 - Cache-control的值 max-age 设置缓存的最大过期时间 ** no-catch 有本地缓存，不用强制缓存，向服务端请求 ** no-store 不让服务端做缓存，完全不缓存 private 发起请求的浏览器才能使用返回数据的缓存 public 这个HTTP请求它返回的内容所经过的任何路径中，包括中间的一些HTTP 代理服务器以及发出请求的客户端浏览器，都可以进行对返回内容的缓存操作 - http强制缓存过程 强制缓存过程 浏览器初次请求时，服务端返回资源和Catch-Control， 再次请求时，若Cache-control中响应头信息中设置了max-age=***[秒]，则访问本地缓存。 3.协商缓存（对比缓存) 服务端缓存策略-服务端判断资源是否用缓存. 服务端判断客户端资源标识是否跟服务端资源一样，一致则返回 304，负责返回 200和最新资源 在Response Headers中,资源标识分为两种： Last-Modified 资源最后被修改的时间 Etag 资源的唯一标识，Etag值根据资源内容改变而改变 - Last-Modified为资源标识协商缓存的过程 Last-Modified 第一次请求，服务器端的返回状态200、资源， 同时有 Last-Modified 的属性标记此文件在服务器端最后被修改的时间。 第二次请求，根据HTTP协议的规定，浏览器会向服务器传送If-*Modified-Since报头，询问该时间之后文件是否有被修改过： 如果服务器端的资源没有变化，则自动返回 HTTP 304（Not Changed.）状态码，内容为空，这样就节省了传输数据量。 当服务器端代码发生改变或者重启服务器时，则重新发出资源，返回和第一次请求时类似。 - 以Etag为资源标识协商缓存的过程 Etag 第一次请求，服务器返回状态码200、资源和一堆Header， 包括Etag(例如"2e681a-6-5d044840")属性标识唯一资源 第二次请求，客户端发送一个If-None-Match头，这个头的内容就是第一次请求时服务器返回的Etag：2e681a-6-5d044840 服务器判断发送过来的Etag和计算出来的Etag匹配 If-None-Match为False资源没有变化，返回304，客户端继续使用本地缓存 优先使用Etage Last-Modified只能精确到秒级 如果资源被重复生成，而内容不变，则Etag更精确 4. http缓存流程图 http缓存流程 5. 刷新操作方式，对缓存的影响 操作方式 场景 强制缓存 协商缓存 正常操作 地址输入url,跳转链接，前进后退 有效 有效 手动刷新 f5，点击刷新按钮，点击菜单刷新 失效 有效 强制刷新 shift+commond+R 失效 失效

本文章由javascript技术分享原创和收集