likes
comments
collection
share

展开说说浏览器缓存

作者站长头像
站长
· 阅读数 4

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

HTTP缓存：

  1. 缓存控制头：

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

  2. 状态码：

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

缓存过程：

  1. 首次加载：

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

  2. 缓存检查：

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

  3. 过期检查：

    • 如果缓存过期或者需要进行验证（使用 ETag 或 Last-Modified），浏览器会发送一个条件请求到服务器，服务器会返回 304 Not Modified 或者新的资源。

  4. 资源更新：

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

控制缓存策略：

  1. 强缓存（Expires 和 Cache-Control）：

    • Expires 和 Cache-Control 的 max-age 指定资源在多长时间内是强制缓存的，不需要向服务器发起请求。

  2. 协商缓存（Last-Modified 和 ETag）：

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

清除缓存：

  1. 手动清除：

    • 用户可以手动清除浏览器缓存，以删除所有已保存的资源。

  2. 强制刷新（Ctrl + F5）：

    • 强制刷新页面时，浏览器会忽略缓存，重新请求所有资源。

  3. 缓存清除策略：

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

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

缓存相关头部详解

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

  1. Cache-Control:

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

  2. Expires:

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

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

  1. ETag:

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

  2. Last-Modified:

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

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

浏览器本地缓存：

  1. localStorage 和 sessionStorage：

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

  2. IndexedDB：

    • IndexedDB 是一种更强大的本地数据库，允许开发者存储和检索大量结构化数据。与 localStorage 和 sessionStorage 不同，IndexedDB 允许存储更大的数据集，并支持更复杂的查询。