前端浏览器缓存机制

unsetunset概述unsetunset

浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,旨在提高网页性能、减少网络流量消耗,以及提供更快的用户体验。以下概述:

  1. 缓存类型:

    • 浏览器缓存可以分为两种主要类型:本地缓存和代理缓存。
    • 本地缓存是浏览器本身使用的缓存,用于存储已经请求过的网页资源,如HTML、CSSJavaScript、图像等。
    • 代理缓存是位于浏览器和服务器之间的代理服务器上的缓存,用于减轻服务器负载和减少网络流量,从而加速资源传输。
  2. 缓存控制头:

    • Cache-Control:通过指定max-age、no-cache、no-store等指令来管理缓存。
    • Expires:指定资源的到期日期。
    • ETag:用于比较资源的新鲜度。
    • Last-Modified:指定资源的最后修改日期。
    • HTTP标头(Header)是用于控制浏览器缓存的关键因素。
    • 常见的HTTP标头包括:
  3. 缓存过程:

    • 当浏览器请求一个资源时,它首先检查本地缓存,如果资源在缓存中且未过期,则直接使用缓存的副本。
    • 如果资源不在本地缓存中或已经过期,浏览器将向服务器发送请求。
    • 服务器在响应中包括缓存控制头,以告诉浏览器如何处理资源的缓存。
    • 浏览器根据这些头信息来决定是否将新资源存储在本地缓存中,并在将来的请求中使用缓存。
  4. 缓存过期策略:

    • 缓存可以根据资源的HTTP标头信息来管理。如果服务器指定了max-age或Expires标头,浏览器将根据这些信息来判断资源何时过期。
    • 如果资源过期,浏览器会向服务器发送条件请求,使用If-Modified-Since和If-None-Match标头,以确定是否需要获取新的资源。
  5. 强制刷新和硬刷新:

    • 强制刷新(Ctrl+F5或Cmd+Shift+R)会忽略缓存,强制浏览器从服务器获取最新的资源。
    • 硬刷新(Ctrl+R或Cmd+R)会使浏览器向服务器验证资源是否过期。

unsetunset缓存过程分析unsetunset

前端浏览器缓存机制

HTTP缓存过程可以分为以下步骤:

  1. 客户端请求资源:当用户在浏览器中输入网址或点击链接时,浏览器会向服务器发送HTTP请求以获取网页或其他资源(如图像、CSS文件、JavaScript文件等)。

  2. 服务器响应:服务器接收到请求后,会处理请求并返回资源。服务器的响应可以包括与缓存相关的HTTP标头,例如:

    • Cache-Control:指定缓存策略,包括max-age(资源有效期)、no-cache(强制再次验证)等。
    • Expires:指定资源的过期日期。
    • ETag:为资源生成的唯一标识符,用于验证资源是否有更新。
    • Last-Modified:指定资源的最后修改日期。
  3. 缓存检查:在接收到服务器响应后,浏览器会根据HTTP标头信息来判断是否可以缓存该资源以及如何缓存。它会检查本地缓存中是否已经有该资源的副本。

  4. 缓存决策:

    • 如果资源已经在本地缓存中,并且缓存尚未过期(根据max-ageExpires判断),浏览器将使用本地缓存的副本,而不发出新的请求。
    • 如果资源不在本地缓存中,或者本地缓存已经过期,浏览器将向服务器发出新的请求。
  5. 服务器响应或缓存验证:如果浏览器发出新的请求,服务器将处理请求并返回资源。如果服务器支持条件请求,浏览器会使用If-Modified-SinceIf-None-Match标头来验证资源是否已经过期。如果资源没有改变,服务器会返回304 Not Modified响应,告诉浏览器可以使用本地缓存。如果资源已经更新,服务器将返回新的资源,并且包括新的缓存控制标头。

  6. 资源缓存:如果服务器返回新的资源,浏览器将在本地缓存中存储该资源,以备将来使用。本地缓存的存储方式可以根据服务器响应的缓存标头来配置,包括缓存的有效期、是否允许缓存再次验证等。

unsetunset强制缓存unsetunset

强制缓存是一种浏览器缓存策略,用于告诉浏览器在一定时间内使用本地缓存副本,而不需要向服务器发送请求进行资源验证。这可以显著提高页面加载速度和减少网络流量,因为浏览器不需要每次都向服务器请求相同的资源。

强制缓存依赖于两个HTTP响应标头:Cache-ControlExpires,以及浏览器的本地缓存。以下是这两个标头的作用:

  1. Cache-Control:Cache-Control是HTTP响应头,它指定了资源的缓存策略。常见的Cache-Control指令包括:

    • public:资源可以被任何缓存(包括CDN和代理服务器)存储。
    • private:资源只能被浏览器缓存,不允许CDN或代理服务器缓存。
    • max-age:指定资源的最长有效时间(以秒为单位)。例如,max-age=3600表示资源在一小时内有效。
    • no-store:禁用缓存,资源每次都需要从服务器获取。
  2. Expires:Expires是HTTP响应头,它指定了资源的到期日期。资源的到期日期是一个绝对的时间戳,告诉浏览器在该时间之前可以使用本地缓存,而不需要再次请求服务器。

当浏览器接收到包含合适的Cache-ControlExpires标头的响应时,它将根据这些标头的信息判断资源的缓存策略。如果资源尚未过期,浏览器将使用本地缓存的资源,而不会向服务器发送请求。

需要注意的是,如果服务器返回no-store或者Cache-Control: no-cache的响应,将禁用强制缓存,浏览器每次都会向服务器请求资源。

unsetunset协商缓存unsetunset

协商缓存是浏览器缓存策略的一部分,用于在资源已经缓存但过期时,向服务器发出条件请求来验证资源是否已更改。协商缓存依赖于两个HTTP请求头:If-Modified-SinceIf-None-Match,以及服务器的响应。

以下是协商缓存的基本工作流程:

  1. 客户端请求资源:当浏览器向服务器请求资源时,它将包含上一次获取资源后存储的信息,这些信息通常包括资源的最后修改日期和ETag(实体标签)。

  2. 服务器处理请求:服务器接收到请求后,会检查客户端请求中的If-Modified-SinceIf-None-Match标头,这些标头包含了上次响应中存储的资源信息。

  3. 服务器判断资源状态:服务器根据收到的If-Modified-SinceIf-None-Match信息来判断资源的状态。

    • 如果资源的最后修改日期或ETag与客户端提供的匹配,说明资源没有更改,服务器可以返回304 Not Modified响应。
    • 如果资源已更改,服务器将返回新的资源和新的ETag,并附带200 OK响应。
  4. 客户端响应:如果服务器返回304 Not Modified响应,浏览器将使用本地缓存的资源,否则它将接收并存储新的资源。

协商缓存有助于减少不必要的资源传输,因为当资源未更改时,浏览器可以重复使用本地缓存,而不需要重新下载资源。这可以减少网络流量和加快页面加载速度。

两个常用的HTTP响应头用于协商缓存控制:

  1. Last-Modified:服务器响应中包含的资源的最后修改日期。浏览器会将该日期存储并在下一次请求时发送给服务器以验证资源是否已更改。

  2. ETag(实体标签):服务器响应中包含的资源的唯一标识符。ETag是服务器生成的,可根据资源的内容生成。浏览器会将ETag存储并在下一次请求时发送给服务器以验证资源是否已更改。


原文始发于微信公众号(前端大大大):前端浏览器缓存机制

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/174113.html

(0)
小半的头像小半

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!