Frontend Caching Notes
内容提要
本文讨论了缓存机制的不同策略，包括绝对过期时间、相对过期时间、强缓存和协商缓存。介绍了Cache-Control、Expires、Last-Modified等HTTP头部的作用，以及如何通过设置这些头部来优化资源的缓存和加载效率，并提到了一些与跨域请求相关的配置。
关键要点
-
缓存的绝对过期时间会导致缓存失效，Expires受客户端时间影响不精准。
-
max-age和s-maxage用于控制缓存的相对过期时间，s-maxage优先级高于max-age。
-
no-cache和no-store指令用于控制缓存行为，no-store表示不进行任何缓存。
-
Last-Modified和If-Modified-Since用于判断资源是否更新，304 Not Modified表示资源未修改。
-
缓存新鲜度的计算公式为max-age或(expires - date)，并且响应时间和停留缓存时间也会影响缓存使用期。
-
启发式缓存通过date与last-modified的差值计算缓存时间。
-
强缓存失效后，浏览器可能启用协商缓存，但并不一定。
-
Access-Control-Allow-Origin用于指定允许访问的域名，涉及跨域请求的配置。
-
JS脚本和CSS资源的缓存策略有所不同，异步加载的资源更可能被存入Disk Cache。
-
preload和prefetch用于优化资源加载，前者用于立即加载，后者用于预提取可能用到的资源。
延伸问答
什么是绝对过期时间和相对过期时间？
绝对过期时间是指缓存在特定时间后失效，而相对过期时间则是通过max-age和s-maxage控制缓存的有效期。
如何使用Cache-Control和Expires优化缓存？
通过设置Cache-Control和Expires头部，可以控制缓存的行为和过期时间，从而提高资源的加载效率。
什么是强缓存和协商缓存？
强缓存是在缓存有效期内直接使用缓存，而协商缓存是在强缓存失效后，通过请求服务器确认资源是否更新。
Last-Modified和If-Modified-Since的作用是什么？
Last-Modified用于指示资源的最后修改时间，而If-Modified-Since用于判断资源是否更新，返回304 Not Modified表示未修改。
如何计算缓存的新鲜度？
缓存的新鲜度可以通过max-age或(expires - date)计算，响应时间和停留缓存时间也会影响缓存的使用期。
跨域请求中如何配置缓存？
可以通过设置Access-Control-Allow-Origin头部来指定允许访问的域名，同时需要配置相关的凭证和方法。
