抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

HTTP缓存的作用

HTTP缓存机制对于减少网络请求、提高页面加载速度和减轻服务器负载起到了重要的作用

  • 减少网络请求:当浏览器再次请求相同的资源时,在有效期内的缓存可以直接返回给浏览器,无需再次向服务器发送请求,减少了网络带宽的消耗和请求的延迟。
  • 提高页面加载速度:使用缓存可以避免重复下载和传输资源,加快页面加载速度,提高用户体验。
  • 减轻服务器负载:服务器不需要处理重复请求,当缓存可用时,可以减少服务器的负载,提高服务器的性能和吞吐量。
  • 改善移动端性能:移动设备通常具有较慢的网络连接和有限的带宽,使用缓存可以减少数据传输量,降低用户流量消耗。
  • 支持离线浏览:在缺少网络连接或者资源服务器不可用时,缓存可以提供离线浏览的支持,允许用户访问之前缓存的页面或资源。

一:强缓存

HTTP强缓存是通过在HTTP相应头中设置相关字段,可以让浏览器在一定时间内直接从本地存储中获取相应的资源,无需发起网络请求

强缓存通过设置"Cache-Control"和"Expires"字段来实现。

  • “Cache-Control”是一个指令
    • public:表示响应可以被任意缓存(包括私有缓存和共享缓存)缓存。
    • private:表示响应只能被私有缓存(例如浏览器缓存)缓存。
    • no-cache:表示缓存可以缓存响应,但在使用之前需要重新验证资源的有效性。
    • max-age:表示缓存的有效时间(以秒为单位)。
  • “Expires”字段指定资源的到期时间,是一个绝对的时间戳。

image-20230803081632691

进入b站时发起的请求中,请求头对应字段的设置

当浏览器发起请求时,会检查响应头中的”Cache-Control”和”Expires”字段,如果在有效时间内(仍然在缓存有效期内),浏览器将直接从缓存中获取资源。只有在缓存过期后,浏览器才会重新发起请求获取最新的资源。这样可以大大减少网络请求,提高页面加载速度。

缺点

  • 缓存过期问题:强缓存是基于时间来确定缓存是否过期的。但是,如果服务器上的资源在有效期内发生了变化,例如更新了文件或修改了页面内容,由于强缓存的有效时间仍未过期,浏览器无法获知资源已经发生了变化,仍然从缓存中获取旧版本的资源,导致页面内容不是最新的。
  • 不适用于个性化内容:强缓存是基于共享缓存的原则,无法针对不同用户或不同情境提供个性化的内容。如果网站需要根据用户身份、位置或其他条件来展示不同的数据,使用强缓存会导致所有用户都获取相同的缓存内容,无法满足个性化需求。
  • 无法适应动态内容:如果网站包含动态生成的内容或频繁变动的数据,使用强缓存会导致缓存的内容无法及时更新,从而无法及时展示最新的数据。

二:协商缓存

协商缓存解决了强缓存中,无法动态更新服务器最新资源的问题

HTTP协商缓存是一种在客户端和服务器之间进行缓存内容协商的机制,用于提高Web应用程序的性能和效率。它允许客户端和服务器就资源的有效性进行交流,并决定是否使用缓存副本或从服务器获取最新的版本。

常见的请求有两种If-None-Match和If-Modified-Since

  • 请求头部中的If-None-Match和响应头部的ETag字段
    • 响应头部中 Etag:唯一标识响应资源
    • 如果客户端拥有资源的ETag值,它可以将该值包含在If-None-Match头部中发送给服务器。服务器会检查请求的ETag与当前资源的ETag是否匹配,如果匹配,则返回状态码304 Not Modified,告知客户端使用缓存的副本
  • 请求头部中的If-Modified-Since和响应头部的Last-Modified字段
    • 响应头部中的 Last-Modified:标示这个响应资源的最后修改时间;
    • 服务器会检查请求的时间戳与当前资源的最后修改时间是否匹配,如果匹配,则返回状态码304 Not Modified。

协商缓存这两个字段都需要配合强制缓存中 Cache-Control 字段来使用,只有在未能命中强制缓存的时候,才能发起带有协商缓存字段的请求

两种方式区别

  • ETag比Last-Modified更加精确,因为它可以通过生成一个唯一的标识符来判断资源是否发生了变化,而不仅仅是比较时间戳。
  • ETag相对于Last-Modified来说在实现上更加灵活,可以根据实际情况选择不同的算法生成标识符
  • Last-Modified是基于时间的机制,而ETag是基于标识符的机制。
  • Last-Modified使用资源的最后修改时间来进行协商,而ETag使用唯一的标识符来进行协商。

协商缓存流程图

image-20230803085508860

评论