展开说说浏览器缓存

浏览器缓存是一种将已下载的资源存储在本地设备上,以便在将来访问相同资源时能够更快地加载的机制。这可以显著提高网页的性能和用户体验。浏览器缓存通常分为两种类型:HTTP缓存和浏览器本地缓存。

HTTP缓存:

  1. 缓存控制头:

    • 服务器通过 HTTP 头部信息控制浏览器缓存。常见的控制头包括:
      • Cache-Control: 指定缓存策略,如max-age表示资源有效期。
      • Expires: 指定资源的过期时间。
      • ETagLast-Modified: 用于验证资源是否已经发生变化。
  2. 状态码:

    • 服务器通过响应状态码来指示浏览器是否应该缓存资源。200 OK表示资源已被缓存,而304 Not Modified表示资源未发生变化,浏览器可以使用缓存。

缓存过程:

  1. 首次加载:

    • 当浏览器首次请求一个资源时,服务器通过响应头告知浏览器如何缓存该资源。
  2. 缓存检查:

    • 浏览器在发送请求时会检查本地缓存,如果存在并且有效(未过期),则直接使用缓存,不再请求服务器。
  3. 过期检查:

    • 如果缓存过期或者需要进行验证(使用 ETagLast-Modified),浏览器会发送一个条件请求到服务器,服务器会返回 304 Not Modified 或者新的资源。
  4. 资源更新:

    • 如果资源已经更新,服务器返回新的资源,浏览器更新本地缓存。

控制缓存策略:

  1. 强缓存(Expires 和 Cache-Control):

    • ExpiresCache-Controlmax-age 指定资源在多长时间内是强制缓存的,不需要向服务器发起请求。
  2. 协商缓存(Last-Modified 和 ETag):

    • 服务器通过 Last-ModifiedETag 标识资源的版本,如果资源未发生变化,浏览器可以使用本地缓存,否则服务器返回新的资源。

清除缓存:

  1. 手动清除:

    • 用户可以手动清除浏览器缓存,以删除所有已保存的资源。
  2. 强制刷新(Ctrl + F5):

    • 强制刷新页面时,浏览器会忽略缓存,重新请求所有资源。
  3. 缓存清除策略:

    • 通过设置合适的缓存清除策略,使得浏览器在特定条件下自动清除缓存。

浏览器缓存是 Web 性能优化的重要手段之一,合理配置缓存策略可以减轻服务器负载,加快页面加载速度。

缓存相关头部详解

以下是一些常用的缓存控制头部:

  1. Cache-Control:

    • Cache-Control 是最常用的缓存控制头部,用于定义资源的缓存策略。一些常见的指令包括:
      • public:表示资源可以被任何中间缓存(如CDN)缓存。
      • private:表示资源仅能被终端用户的浏览器缓存。
      • max-age=<seconds>:表示资源在指定的秒数内有效,超过这个时间则需要重新请求。
      • no-cache:表示缓存可以存在,但必须在使用之前重新验证缓存的有效性。
      • no-store:表示终端用户和中间缓存都不应该存储资源的任何副本。
    http 复制代码
    Cache-Control: public, max-age=3600
  2. Expires:

    • Expires 是一个老旧的头部,用于指定资源的过期时间。它的值是一个 GMT 格式的日期字符串。但由于存在时区和缓存服务器的时间同步问题,Cache-Control 的使用更为推荐。
    http 复制代码
    Expires: Tue, 01 Jan 2030 00:00:00 GMT

时区和缓存服务器的时间同步问题 :当使用 Expires 头部时,服务器会返回一个指定资源过期的时间戳,浏览器会将此时间戳与本地时间戳进行比较,以确定资源是否过期。 然而,问题在于不同的计算机和服务器可能处于不同的时区,因此它们的本地时间戳可能是不同的。这可能导致一个在服务器上看起来已经过期的资源,在客户端可能仍然被认为是有效的,或反之亦然。 这种时区差异可能会导致缓存机制的不准确性,使得资源在实际过期之前或之后就被认为是过期的。为了解决这个问题,更现代的缓存控制机制通常使用 Cache-Control 头部的 max-age 指令,该指令表示资源在指定的秒数内有效,而不依赖于时区。

  1. ETag:

    • ETag 是一个唯一标识符,服务器可以通过它判断资源是否发生了变化。浏览器在发送请求时可以通过 If-None-Match 头部携带上次请求时服务器返回的 ETag 值,服务器会比较这个值来决定是否返回新的资源。
    http 复制代码
    ETag: "abc123"
  2. Last-Modified:

    • Last-Modified 是资源的最后修改时间,服务器可以通过它来判断资源是否发生了变化。浏览器在发送请求时可以通过 If-Modified-Since 头部携带上次请求时服务器返回的 Last-Modified 值,服务器会比较这个值来决定是否返回新的资源。
    http 复制代码
    Last-Modified: Wed, 12 Feb 2020 12:30:00 GMT

这些头部可以根据具体的需求和场景进行灵活配置。合理设置缓存头部可以减轻服务器负载,提高页面加载性能。在实际应用中,通常通过服务器配置或后端代码来设置这些头部。

浏览器本地缓存:

  1. localStorage 和 sessionStorage:

    • localStoragesessionStorage 是浏览器提供的两种本地存储方式,可以将数据存储在用户设备上。这些数据可以在页面刷新或关闭后仍然保持存在。
    • 两者的区别在于,sessionStorage提出了窗口的概念,数据只在同源同窗口内共享。而 localStorage 在同源所有窗口共享。
  2. IndexedDB:

    • IndexedDB 是一种更强大的本地数据库,允许开发者存储和检索大量结构化数据。与 localStoragesessionStorage 不同,IndexedDB 允许存储更大的数据集,并支持更复杂的查询。
相关推荐
haaaaaaarry14 分钟前
Element Plus常见基础组件(一)
java·前端·javascript·vue.js
qingyingWin29 分钟前
原生微信小程序研发,如何对图片进行统一管理?
前端·微信小程序
Goboy37 分钟前
分库分表后ID乱成一锅粥
后端·面试·架构
不懂英语的程序猿39 分钟前
【JEECG】JVxeTable表格拖拽排序功能
前端·后端
拾光拾趣录44 分钟前
前端灵魂拷问:从URL到Redux,17个常见问题
前端·面试
萌萌哒草头将军1 小时前
Prisma ORM 又双叒叕发布新版本了!🚀🚀🚀
前端·javascript·node.js
mldong1 小时前
推荐一款超高颜值的后台管理模板!Art-Design-Pro!开源!免费!
前端·vue.js·架构
草字1 小时前
uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app
程序视点2 小时前
Wise Duplicate Finder 重复文件查找工具 - 永久免费专业版文件去重工具
前端·windows
一点一木2 小时前
🚀 2025 年 07 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github