浏览器缓存机制

浏览器缓存机制是前端性能优化中至关重要的一环,它通过缓存之前请求过的文件,以提高页面再次访问时的加载速度。

一、浏览器缓存的作用

  1. 减少数据传输:缓存减少了不必要的数据传输,节省了带宽。
  2. 减轻服务器负担:通过缓存,服务器不需要处理重复的请求,从而减轻了负担。
  3. 提升访问速度:缓存使得页面加载更加迅速,提升了用户体验。

二、浏览器缓存的类别

浏览器缓存主要分为两类:强制缓存(也称为强缓存)协商缓存(也称为弱缓存)

三、强制缓存

1. 定义

强制缓存是指浏览器在发起请求前,会先检查本地缓存中是否有满足条件的资源。如果有,则直接使用缓存资源,不再向服务器发起请求。

2. 控制字段

  • Expires:HTTP/1.0引入,表示资源会在某个绝对时间后过期。由于它依赖于客户端时间,可能存在误差,因此HTTP/1.1中引入了Cache-Control来替代它。
  • Cache-Control:HTTP/1.1引入,用于控制缓存的行为。它包含多个指令,如max-age(表示资源在多少秒内有效)、no-cache(表示需要协商缓存)、no-store(表示不缓存任何内容)等。Cache-Control的优先级高于Expires。

3. 缓存位置

  • 内存缓存(Memory Cache):存储当前页面中已经抓取到的资源,如样式、脚本、图片等。读取速度快,但缓存持续性短,随进程释放而释放。
  • 硬盘缓存(Disk Cache):覆盖面最广,绝大部分的缓存都来自Disk Cache。读取速度相对较慢,但持久性强。

四、协商缓存

1. 定义

当强制缓存失效后,浏览器会携带缓存标识(如Last-Modified或ETag)向服务器发起请求,由服务器根据缓存标识决定是否使用缓存。

2. 控制字段

  • Last-Modified / If-Modified-Since:HTTP/1.0引入。Last-Modified表示资源在服务器上的最后修改时间;If-Modified-Since是浏览器在请求时携带的字段,表示资源在客户端的最后修改时间。服务器通过比较这两个时间来决定是否返回304状态码(表示资源未修改,使用缓存)或200状态码(表示资源已修改,返回新资源)。
  • ETag / If-None-Match:HTTP/1.1引入,用于替代Last-Modified / If-Modified-Since。ETag是服务器为资源生成的一个唯一标识(hash值);If-None-Match是浏览器在请求时携带的字段,表示资源在客户端的唯一标识。服务器通过比较这两个标识来决定是否返回304或200状态码。ETag / If-None-Match的优先级高于Last-Modified / If-Modified-Since。

五、浏览器缓存过程

  1. 浏览器发起请求:首先检查本地缓存中是否有满足条件的资源。
  2. 强制缓存判断:如果有,则根据Cache-Control或Expires字段判断资源是否过期。
    • 如果未过期,则直接使用缓存资源。
    • 如果已过期,则进入协商缓存阶段。
  3. 协商缓存判断:浏览器携带缓存标识向服务器发起请求。
    • 服务器根据请求头中的If-Modified-Since或If-None-Match字段判断资源是否修改。
    • 如果未修改,则返回304状态码,浏览器使用缓存资源。
    • 如果已修改,则返回200状态码和新资源,浏览器更新缓存。

六、缓存机制的优缺点

优点

  • 减少了不必要的数据传输,节省了带宽。
  • 减轻了服务器的负担,提升了网站性能。
  • 加快了客户端加载网页的速度,提升了用户体验。

缺点

  • 如果资源有更改,而缓存未及时更新,可能导致用户获取到滞后的信息。

你可能感兴趣的:(前端)