什么是浏览器缓存？彻底弄懂浏览器缓存（强缓存、协商缓存）
最新回答
凌波痕湮逝
2022-03-30 02:58:59
浏览器缓存是指浏览器将不常变的资源保存在本地，以减少请求服务器的次数，加快页面加载速度。判断资源是否来自缓存可通过Network面板中的Size列表，列表中标注“from memory cache”或“from disk cache”表示资源来自缓存。
前端常用的缓存策略结合了强缓存与协商缓存。强缓存通过HTML文档配置协商缓存，JS、CSS、图片等资源配置强缓存，以便在项目版本更新时获取最新页面，同时复用之前的缓存资源，既利用了浏览器缓存，又解决了页面版本更新问题。
浏览器缓存流程中，强缓存适用于未过期的资源，过期则请求服务器。缓存是否过期通过服务器响应头中的Cache-Control或Expires字段判断。Cache-Control字段在HTTP1.1中用于控制网页缓存，max-age参数表示资源在多少秒后过期。Cache-Control: no-cache表示资源会被缓存，但每次访问都会向服务器验证缓存有效性；Cache-Control: no-store则表示响应不被缓存。Expires字段在HTTP1.0中用于设置资源缓存的到期时间，但本地时间可被修改，HTTP/1.1中已被Cache-Control替代。
内存缓存与硬盘缓存的主要区别在于存储位置与读取速度，内存缓存速度快，硬盘缓存速度较慢。初次访问掘金主页并刷新时，缓存来自内存与硬盘；关闭页面后再打开时，所有缓存都来自硬盘。JS和图片文件解析执行后直接存入内存，从内存读取(from memory cache)；CSS文件存入硬盘，每次渲染页面需从硬盘读取缓存(from disk cache)。
协商缓存机制允许浏览器携带缓存标识向服务器发送请求，服务器根据缓存标识判断资源是否过期。这主要应用于HTML资源，验证版本是否更新。触发条件包括Last-Modified（文件最后修改时间）和ETag（当前资源文件的唯一标识）。验证流程涉及服务器响应头返回Last-Modified或ETag，客户端请求头携带上次请求返回的值，服务器对比确认资源是否更新，返回相应状态码。
ETag的出现解决了Last-Modified难以处理的问题，如文件周期性修改但内容不变或频繁修改导致粒度不准确。ETag优先级高于Last-Modified，若两者同时存在，服务器优先校验ETag。协商缓存的两种状态为资源未变化返回304，资源已更新返回200。流程包括初次请求获取文件内容与Header（包括Etag和Last-Modified），第二次请求时客户端携带if-none-match和if-modified-since值，服务器优先判断ETag，资源未变返回304，继续使用缓存；资源更新返回200并返回最新资源。
热门标签
