你有没有遇到过这种情况明明网速不差打开一个网页却要等好几秒白屏半天才加载出来这时候大概率是缓存没配置好。浏览器缓存简单说就是把请求过的资源JS、CSS、图片等存到本地下次访问时直接从本地读取不用再去服务器重新下载一遍。一套合理的缓存策略能让页面加载速度提升一个量级。而浏览器的缓存机制核心就两种强缓存和协商缓存。它俩是递进关系——先判断强缓存是否命中命中就直接用没命中才进入协商缓存流程。强缓存不问服务器直接用强缓存最“霸道”——浏览器在缓存有效期内压根儿不向服务器发请求直接从本地读取资源。你在Chrome开发者工具的Network面板里看到状态码是200且Size显示“from disk cache”或“from memory cache”就是命中了强缓存。强缓存由服务器返回的响应头控制主要有两个字段一个是ExpiresHTTP/1.0时代的老字段它是一个绝对时间点。缺点是依赖客户端本地时间用户把系统时间一改缓存策略就乱套了。另一个是Cache-ControlHTTP/1.1标准更强大它用的是相对时间。比如Cache-Control: max-age3600表示资源在1小时内有效。如果Expires和Cache-Control同时存在Cache-Control优先级更高。常用的Cache-Control指令还有public允许客户端和代理服务器如CDN都缓存private仅允许客户端缓存no-cache不走强缓存直接进入协商缓存no-store彻底禁用缓存每次都请求最新资源协商缓存问一下服务器变了没强缓存过期后就轮到协商缓存登场了。浏览器会带着缓存标识去问服务器“我这个资源还能用吗”服务器如果发现资源没变就返回状态码304 Not Modified告诉浏览器“接着用你本地的吧”。如果资源变了就返回200并带上新资源。协商缓存靠两组字段配合工作第一组是Last-Modified / If-Modified-Since。服务器首次响应时返回Last-Modified资源的最后修改时间浏览器下次请求时在请求头里带上If-Modified-Since。服务器对比时间判断资源是否更新。但这套方案有两个短板最小单位是秒秒级以内的修改检测不到而且修改文件名不改内容也会导致时间变化造成缓存失效。第二组是ETag / If-None-Match更精准。服务器根据文件内容生成一个唯一标识通常是哈希值作为ETag返回给浏览器。下次请求时浏览器在请求头里带上If-None-Match。服务器对比ETag是否一致——匹配就返回304不匹配就返回200和新资源。ETag能检测到秒级以内的任何内容变化比Last-Modified更可靠。实战配置怎么用才能让页面秒开不同资源要用不同策略。对于JS、CSS、图片等静态资源最推荐的做法是强缓存 文件名哈希。给文件名加上内容哈希比如main.a1b2c3.js然后设置超长强缓存比如Cache-Control: public, max-age31536000一年。文件内容变了哈希值就变了文件名跟着变相当于浏览器请求了一个全新的URL自然能拿到最新版本。对于HTML入口文件建议设置为Cache-Control: no-cache每次都走协商缓存。因为HTML一变里面引用的JS/CSS文件名通常也会变只有HTML及时更新了才能拉取到最新的静态资源。另外补充一个小知识点不同刷新行为对缓存的影响不同。正常访问敲回车、点链接会优先使用强缓存按F5刷新会跳过强缓存直接走协商缓存而CtrlF5强制刷新则是完全绕过所有缓存直接向服务器请求最新资源。缓存的本质是用空间换时间。配置对了页面秒开配置错了要么永远展示旧版本要么每次都重新加载。掌握了强缓存和协商缓存这套组合拳你就能让页面加载速度实现质的飞跃。
