最近在做前端面试题系列总结。感兴趣的朋友可以加关注，欢迎指正交流。力求每个知识点多总结，至少面试的时候每个知识点都能说的通，不至于哑火。前言通过上一篇文章的总结，我们知道HTTP缓存分为两种：强缓存协商缓存今天我们先来了解一下强缓存相关的内容。强缓存特性在强缓存中，当再次发送请求时，浏览器会判断目标资源是否“命中”强缓存，命中则直接从缓存中获取资源，不会与服务器再次。在Chrome中，当强缓存命中时，Network中显示的HTTP状态码为200。例如规则强制缓存的请求结果有两种情况：hitcachemisscachehitcachemisscacheclassification在Chrome中，强缓存又分为：磁盘缓存缓存资源存放在硬盘中。浏览器（或页面选项卡）关闭后，硬盘中的缓存不会消失，下次进入页面时，可以从硬盘中获取。MemoryCache缓存内存中的资源，关闭浏览器（或页面选项卡）后内存中的缓存会被释放，重新打开页面时无法取回缓存。缓存的存储位置由浏览器控制。如果不想从强缓存中获取资源，可以在Windows电脑上使用Ctrl+F5刷新页面，在MacOS上使用Shift+Command+R刷新页面。刷新后，可以看到资源不会出现在磁盘（或内存）缓存中。该属性是否强缓存由以下3个Header属性控制：ExpiresCache-ControlPragmaExpiresExpires该值是一个HTTP日期。当服务器返回响应时，过期时间将写入响应头中的Expires字段。浏览器在发起请求时，会将系统时间与Expires的值进行比较。如果系统时间超过Expires的值，缓存就会失效，继续从服务器获取资源。比如Expires的值是一个绝对时间，可以看到上图中的时间点：2021年8月15日07:16:53，也就是说：这个时间点之前可以直接从缓存中获取这个资源.但是在使用Expires时有一个问题：由于Expires的时间戳是由服务端定义的，而本地时间的值来自于客户端，所以Expires的工作机制要求客户端时间和服务端时间具有极高的一致性.测试者的时间存在时差，会带来意想不到的结果。Expires在三个头属性中具有最低的优先级。Expires字段是HTTP1.0时代的产物，现在所有的浏览器都使用HTTP1.1，所以这个字段的作用基本可以忽略。Cache-Control是HTTP1.1中的一个新属性。提出来弥补Expires的缺陷，提供更精确、更详细的缓存功能。Cache-Control可以在请求和响应头中使用：请求头Cache-Control字段列表：Cache-Control:max-age=Cache-Control:max-stale[=]Cache-Control:min-fresh=Cache-control:no-cacheCache-control:no-storeCache-control:no-transformCache-control:no-transformCache-control:only-if-cached响应头Cache-Control字段列表：Cache-control:must-revalidateCache-control:no-cacheCache-control:no-storeCache-control:no-transformCache-control:publicCache-control:privateCache-control:proxy-revalidateCache-control:max-age=<秒>缓存控制:s-maxage=<秒>Cache-Control公共字段的含义：public表示响应可以被任何对象缓存（包括：发送请求的客户端，CDN等代理服务器等），甚至是通常不可缓存的内容（例如，响应没有max-age指令或Expires标头）。private表示响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存），私有缓存可以缓存响应内容。no-cache可以缓存在本地，但是每次发送请求都必须向服务器进行鉴权。如果服务器允许，可以使用本地缓存（即需要协商缓存）。no-store禁止缓存客户端请求或服务器响应的内容，每次都必须重新请求服务器获取内容。max-age设置缓存存储的最大周期，超过这个周期缓存被认为过期（单位：秒）。must-revalidate可以在缓存过期前使用，过期后必须向服务器验证。图中Cache-Control只指定了Max-age，所以默认为private，缓存时间为315♂00秒（365天）。也就是说如果365天内再次请求此数据，则直接从缓存数据库中获取数据，直接使用。在HTTP1.1标准试图将缓存相关配置收敛到Cache-Control的背景下，Max-age可以看作是对Expires能力的补充/替代。在目前的前端实践中，我们一般倾向于使用Max-age。但是如果你的应用有很强的向后兼容需求，那么Expires还是不可或缺的。PragmaPragma只有一个属性值，就是no-cache。效果和Cache-Control中的no-cache是??一样的。它没有使用强缓存，需要和服务器验证缓存是否新鲜。它在三个标头属性中具有最高优先级。总结Expires和Pragma是HTTP1.0的产物，Cache-Control是HTTP1.1的产物。当Expires和Cache-Control同时存在时，只有Cache-Control生效。在某些不支持HTTP1.1的环境中，Expires会很有用。现阶段只是为了兼容大文件而存在，优先缓存到Disk，小文件优先缓存到Memory。内存占用高时，优先CachetoDisk~~本文到此结束，感谢阅读！~学习有趣的知识，认识有趣的朋友，塑造有趣的灵魂！大家好，我是〖编程三昧〗的作者王隐，我的公众号是《编程三昧》，欢迎关注，希望大家多多指教！你来，怀揣期待，我以墨香迎接你！您归来，不分得失，只送回味！知识与技能并重，内功与外功并重，理论与实践两手抓，两手都要用力！
