浏览器缓存机制学习总结最近在做考试系统的时候，因为经常加载试卷或者图片等静态资源，所以抽空学习了一下缓存机制。这里记录下为什么使用缓存1.通过HTTP协议，客户端与浏览器建立连接需要时间，大的响应需要客户端与服务器多次往返才能获得完整响应，这会延迟浏览器能够使用和处理内容的时间。这增加了访问服务器数据和资源的成本，因此利用浏览器的缓存机制来复用之前获取的数据成为性能优化中需要考虑的事情。2.流量，现在云服务器流量是收费的（--笑话）浏览器缓存机制介绍一般使用时，缓存策略是通过http请求或响应中的header字段来定义的，很多都是和各自结合使用的其他字段定义请参考http缓存MDN常用字段个人认为主要分为两部分：缓存策略字段缓存校验字段。no-cache可以关闭浏览器缓存，让浏览器每次获取资源都会发起新的请求。Pragma的优先级高于expires。如果给pragma:no-cache，给expires一个unexpired事件，浏览器还是会发起一个新的请求过期，服务器的时间可能和客户端的时间不一致。cache-control（重点）http1.1新增cache-control字段，弥补Pragma的不足，提供更细粒度的缓存策略控制，可以定义请求头的值为as如下Requestheader请求头可以定义的值：responseheader对应头可以定义的值：说明几个字段cache-control:no-cache，强制浏览器不直接使用缓存，每次需要向服务器发起请求验证缓存有效性cache-control:max-age=1000，1000秒内，资源有效，浏览器不需要再次请求资源（缓存响应200）cache-control：public，可以被任何中间人（如中间人代理、CDN等）缓存使用。cache-control:private，响应专供单个用户使用，中间人无法缓存这个响应cache-control优先级高于expire缓存策略简单总结为：没有发起请求的场景：cache-control：max-age在有效期内且当前客户端时间没有超过expire需要发起请求验证缓存是否有效（需要配合if-modified-since||if-none-match），返回304可以在缓存值：cache-control:no-cachecache-control:max-age超过有效期。当前客户端时间超过expire，必须发起请求获取新资源：cache-control:no-store缓存校验字段last-modifed,e-taglast-modified该字段定义资源最后修改时间场景：(cache-control:no-cache)当client请求对应的资源时，server会返回last-modified字段，当client再次请求对应的资源时，会带上if-modified-since:(last-modified)value，如果资源还没有beenmodified(last-modified<=if-modified-sinceoftheresource)，返回304，如果资源已经更新，则返回新资源(200)，如果有则同时更新last-modified的值是cache-control:max-age=?，请求前会判断有效期（也可能不需要请求，直接从浏览器缓存中获取）e-tage-tag是服务器计算的唯一指纹值resource，如果资源有变化的话，计算出来的指纹值也会变化。客户端请求时会带上之前服务端返回的if-none-match:e-tag，服务端根据指纹值是否相等来判断客户端的缓存是否有效。有效则返回304，无效则返回200新资源e-tag的出现是为了弥补last-modified的不足last-modified只能精确到秒，如果在一次内更新多次第二，获取不到最新的资源如果一个资源是定时更新的，但是内容可能不会改变，那么每次都会更新last-modified，导致资源重复返回，e-tag的值不会改变，因为内容保持不变，所以在这个场景缓存中有效地使用了电子标签。注意如果服务器同时有last-modified和e-tag，那么下一次请求会同时带上if-none-match:e-tag；if-modified-since:(last-modified)value和这两个如果都满足则返回304，否则返回200。示例查找网站以请求示例并查看字段。我们都明白这里的js资源是直接从http缓存中加载的。肯定是上次请求的时间与本次相比没有超过max-age。它写在最后。现在看这张图应该有点清楚了。本文为个人学习总结。很多细节不够详细，例子也不够。我建议您在更详细的参考资料中仔细阅读。参考通过浏览器看缓存web性能优化：详解浏览器缓存浅谈浏览器的缓存机制httpMDN
