http缓存策略与强缓存与协商缓存分析，如果服务器端请求的资源命中了浏览器本地的缓存资源，则浏览器不会发送真正的请求到服务器。此时的请求流程：浏览器第一次向后端发送请求时的第一个请求，本地没有缓存资源。此时服务器将资源返回给浏览器，响应码为200。当浏览器收到资源创建后，会将资源和对应的响应头一起缓存起来。第二次请求当浏览器准备第二次向服务器发送请求时，浏览器会先检查服务器上次返回的响应头信息中的Cache-Control（它的值是以秒为单位的相对值，表示即资源（客户端缓存的最大有效期）过期时间为第一次请求的时间加上Cache-Control的值，过期时间与当前请求时间比较，如果本地缓存资源没有过期，然后命中缓存，不再请求服务器。如果没有命中，浏览器就会向服务器发送请求，进入缓存协商阶段。缓存协商场景1客户端浏览器第一次请求时，有两种情况：第一种：服务端返回的响应头中没有Cache-ControlandExpires或者Cache-ControlandExpires第二种：Cache当-Control的属性设置为no-cache时，场景2浏览器在第二次请求时会与服务器协商，比较浏览器中缓存的资源是否是最新的。当缓存与服务器上最新版本的资源一致时，无需再次下载资源，服务器直接返回一个重定向的304NotModified状态码。如果服务端发现浏览器中的缓存已经是旧版本，则服务端会将最新资源的完整内容返回给浏览器，状态码为200。服务端根据另外两组HTTP头信息，即：Last-Modified/If-Modified-Since和ETag/If-None-Match，这两组数据一一对应，利用localcache-strong缓存相关字段来分析Cache-控制缓存头Cache-Control和Expires。Cache-Control有多个可选值代表不同的含义，Expires是一种日期格式。的绝对值。Cache-Control是HTTP缓存策略中最重要的头信息。是HTTP/1.1中出现的Cache-Control头，用来区分对缓存机制的支持。请求头和响应头都支持该属性。通过它提供的不同值来定义缓存策略。无缓存缓存不得存储有关客户端请求和服务器响应的任何内容。客户端发起的每个请求都会下载完整的响应内容。Cache-Control:no-storecachebutrevalidatethefollowingheaderdefinition,这样每次请求时，缓存都会将请求发送给服务器（译者注：请求中应该有与本地缓存验证相关的东西字段），服务器会验证请求中描述的缓存是否过期，如果没有过期（注：实际返回304），缓存会使用本地的缓存副本。Cache-Control:no-cacheprivateandpubliccaching“public”指令表示响应可以被任何中介缓存（译者注：如中间代理、CDN等）。如果指定了“public”，一些通常不会被中间人缓存的页面（译者注：因为默认是私有的）（比如带有HTTP认证信息（账号密码）的页面或者带有某些状态码的页面），会被由它缓存。而“私有”意味着响应专供单个用户使用，中间人无法缓存这个响应，响应只能应用到浏览器的私有缓存中。Cache-Control:privateCache-Control:publicexpiration在过期机制中，最重要的指令是“max-age=”，表示资源可以被缓存（保鲜）的最长时间。相对于Expires，max-age是从发起请求开始的秒数。对于应用中那些不会变化的文件，通常可以手动设置一定的时长来保证缓存有效，比如图片、css、js等静态资源。有关缓存有效性的详细信息，请参见下文。Cache-Control:max-age=31536000验证方式当使用“must-revalidate”指令时，表示当缓存考虑使用旧资源时，必须首先验证其状态，过期的缓存不会用过的。有关缓存验证的详细信息，请参见下文。Cache-Control:must-revalidateExpiresExpires是HTTP/1.0中出现的头信息。它也是用于确定本地缓存策略的标头。这是一个绝对时间。时间格式为Mon,10Jun201521:31:12GMT，只要发送请求的时间在Expires之前，本地缓存一直有效，否则会去服务器发送请求获取新资源。如果Cache-Control:max-age和Expires同时出现，那么max-age的优先级更高。可以在服务器配置中同时启用Cache-Control和Expires。同时启用时，Cache-Control的优先级更高。两者的组合：cache-control:max-age=691200expires:Fri,06Mar202222:53:02GMTcache缓存验证在验证用户点击刷新按钮时开始。如果缓存的响应头中包含“Cache-control:must-revalidate”的定义，浏览时也会触发缓存验证。另外在浏览器首选项中设置Advanced->Cache强制验证缓存也可以达到同样的效果。当缓存文档过期时，需要进行缓存验证或重新获取资源。仅当服务器返回强验证器或弱验证器时才会进行验证。协商缓存相关字段的概念ETagsEtag作为强缓存验证器比Last-Modified具有更高的优先级。ETag响应头是一个对用户代理（UserAgent，以下简称UA）不透明（注：UA不需要理解，只需要按规定使用）的值。对于浏览器这样的HTTPUA，在不知道ETag代表什么的情况下，无法预测它的值是多少。如果资源请求的响应头中包含ETag，客户端可以在后续请求的头中包含If-None-Match头来校验缓存。Last-ModifiedLast-Modified响应标头可以用作弱验证器。它很弱，因为它只能精确到一秒。如果此信息包含在响应标头中，则客户端可以在后续请求中包含If-Modified-Since以验证缓存。它包含原始服务器确定的修改资源的日期和时间。它通常用作验证器，以确定接收或存储的资源是否相互一致。由于精度低于ETag，这是一种备份机制。当向服务器发起缓存验证请求时，服务器会返回200ok表示正常结果或304NotModified（不返回body）表示浏览器可以使用本地缓存文件。304响应头还可以同时更新缓存文档的过期时间。HTTP响应头决定了后续请求头如何判断是请求新资源还是使用缓存文件。VaryVary是一个HTTP响应头信息，它决定了是否应该使用缓存的响应（response）或者应该从源服务器请求一个新的响应作为以后的请求头。它被服务器用来指示在内容协商算法（contentnegotiationalgorithm）中选择资源代表时应该使用哪些头信息（headers）。在响应状态码为304NotModified的响应中，还应该设置Vary头。并将其设置为与相应的200OK响应完全相同。当缓存服务器收到请求时，只有当前请求和原始（缓存的）请求标头与缓存响应标头中的Vary匹配时，才能使用缓存的响应。使用varyheader有利于内容服务的动态多样性。比如使用Vary:User-Agent头，缓存服务器需要通过UA来判断是否使用缓存页面。如果需要区分移动端和桌面端的显示内容，这种方法可以避免在不同终端显示错误的布局。此外，它可以帮助谷歌或其他搜索引擎更好地发现页面的移动版本，并告诉搜索引擎没有引入Cloaking。Vary:User-Agent由于移动版和桌面客户端请求头中的User-Agent不同，所以缓存服务器不会错误地将移动端到桌面端的内容输出给用户。浏览器缓存的优缺点从字面意思来看，缓存就是在使用缓存的时候，服务器的资源不一定是最新的版本。这就需要在使用的时候控制好缓存的资源和时间，包括常见的CDN手段。优点使用浏览器客户端缓存可以减少请求时间，改善用户体验，提高页面响应时间。在前端优化的手段中，减少http请求也是其中之一。有效使用缓存可以减轻服务器的压力，提高网站的性能。欢迎关注公众号：程序员Buu，不定时更新技术入门文章个人博客地址：http缓存策略及强缓存和协商缓存分析创作不易，转载请注明出处和作者转载。
