HTTP的场景实践：对于chrome其涉及的请求中的缓存策略展开具体分析 ｜ 青训营

Sener
226 阅读9分钟

浏览器的缓存策略是什么？

浏览器的缓存策略是指浏览器在加载网页时如何存储和使用缓存数据的规则和算法。浏览器缓存是一种机制，可以将网页的资源（例如HTML文件、CSS文件、JavaScript文件、图像等）保存在本地，以便在后续访问相同网页时能够更快地加载。以下是常见的浏览器缓存策略：

  1. 强缓存：浏览器首先检查是否存在强缓存。如果存在，并且未过期，则直接从本地缓存中加载资源，而不是向服务器发送请求。
  2. 协商缓存：如果资源的缓存已过期或不存在强缓存，浏览器会向服务器发送请求，并包含一个称为 "If-Modified-Since" 或 "If-None-Match" 的条件请求头。服务器根据这些请求头判断资源是否发生了变化，如果没有变化，服务器会返回一个 304 Not Modified 状态码，告诉浏览器可以使用本地缓存。
  3. 缓存控制头：服务器可以通过设置响应头来控制缓存策略。常见的响应头包括：Cache-Control、Expires 和 ETag。Cache-Control 可以用来指定缓存的行为，例如最大缓存时间、是否允许缓存等。Expires 可以指定资源的过期时间。ETag 是一个唯一的标识符，用于判断资源是否发生了变化。
  4. 缓存位置：浏览器可以将缓存分为多个位置，如内存缓存和磁盘缓存。内存缓存速度快但容量有限，通常用于缓存经常使用的资源。磁盘缓存容量较大，适合长期存储不常变化的资源。

通过合理配置缓存策略，可以减少对服务器的请求次数，提高网页加载速度，减轻服务器负载。然而，缓存策略也可能导致问题，例如资源被缓存后更新不及时。因此，在开发和部署网页时，需要根据具体情况综合考虑并配置适当的缓存策略。

为什么需要缓存策略？

缓存策略的存在是为了提高网络性能、降低服务器负载，并提供更好的用户体验。以下是一些需要缓存策略的原因：

  1. 减少网络请求：通过使用缓存策略，浏览器可以在本地缓存中找到并重用之前请求过的资源副本，而无需再次向服务器发送请求。这减少了网络传输的数据量和请求的次数，从而节省带宽和降低延迟。
  2. 提高加载速度：由于缓存中的资源可以直接从本地获取，而无需等待服务器响应，因此可以显著加快网页的加载速度。尤其对于静态资源（如图片、CSS和JavaScript文件），缓存策略可以使浏览器直接从本地缓存获取资源，减少了网络延迟，提升用户体验。
  3. 降低服务器负载：当浏览器使用缓存策略从本地缓存获取资源时，就不需要向服务器发起新的请求。这减轻了服务器的负载，减少了服务器资源的消耗和相应的网络流量。
  4. 节省带宽成本：通过减少网络请求和数据传输量，缓存策略可以节省网络带宽的使用，尤其对于移动设备和有限的网络连接速度很重要。这对于用户来说是非常有益的，特别是在移动网络或网络流量受限的环境下。
  5. 提供离线访问能力：某些缓存策略使得浏览器可以在离线状态下访问之前已经缓存的资源，如离线应用程序缓存（Application Cache）或服务工作者（Service Workers）。这意味着即使断开与服务器的连接，用户仍然可以访问网页的部分内容或功能。

针对chrome进行展开说说实践一下

1.Google Chrome 的缓存策略主要由以下几个因素决定：

  1. 缓存控制头（Cache-Control）：HTTP响应中的缓存控制头用于指示浏览器如何缓存和重新使用资源。常见的缓存控制指令包括：

    • no-cache：每次请求都要向服务器进行验证，即使缓存中存在有效的副本。
    • no-store：禁止缓存该资源的任何副本，每次都需要从服务器获取完整的响应。
    • public：允许任何缓存（包括代理服务器）缓存该资源的副本。
    • private：只允许私有缓存缓存该资源的副本（例如，浏览器的本地缓存）。
    • max-age：指定资源可以在缓存中保持有效的时间长度（以秒为单位）。

  2. 实体标签（ETag）和修改时间（Last-Modified）：服务器可以通过在响应头中添加实体标签（ETag）或修改时间（Last-Modified）来标识资源的版本和最后修改时间。浏览器可以在下次请求时发送这些信息给服务器，以判断缓存的副本是否仍然有效。

  3. 本地缓存：Google Chrome 使用磁盘缓存和内存缓存来存储已请求的资源。磁盘缓存用于长期存储，而内存缓存用于临时存储。浏览器会根据缓存策略判断是否使用缓存中的副本来满足请求。

2.一些可能易混淆专业名词解释

浏览器的缓存是什么？

浏览器的缓存是一种机制，用于在本地保存已请求的资源副本，以避免每次请求都向服务器发送新的请求。当浏览器请求某个资源时，它会首先检查缓存中是否存在该资源的副本。如果存在且仍然有效（根据缓存策略判断），则浏览器可以直接从缓存中获取副本，而无需再次向服务器发起请求。

用户请求头是什么？

用户请求头是由浏览器在发送HTTP请求时附加的一组信息。这些信息包含了关于请求的各种细节和特性，以及客户端的一些设备和配置信息。常见的用户请求头字段包括User-Agent、Accept、Referer等。

缓存控制头是什么？

缓存控制头（Cache-Control）是HTTP响应头的一部分，用于指示浏览器如何处理和存储响应的副本。它提供了一系列的指令，可以控制缓存的行为，例如缓存有效期、缓存私密性、是否向服务器进行验证等。常见的缓存控制指令包括no-cache、no-store、public、private、max-age等。

用户请求头和缓存控制头是什么关系？

用户请求头和缓存控制头之间存在一定的关系。浏览器在发送请求时，会根据用户请求头中的信息，以及之前缓存的副本或缓存控制头的指示，来决定是否使用缓存中的副本、是否向服务器发起请求、是否验证缓存的有效性等。缓存控制头的设置可以影响浏览器对请求的处理方式，而用户请求头则提供了一些关键信息和偏好，帮助浏览器做出正确的决策。

网络请求是什么？

网络请求是指浏览器向服务器发送的请求，以获取特定资源的过程。当用户在浏览器中输入网址、点击链接或提交表单时，浏览器会根据请求的类型和目标URL发起网络请求，并在请求头中包含适当的信息（如用户请求头、Cookie等）。通过网络请求，浏览器与服务器进行通信，以获取所需的资源并将其显示给用户。

Http响应头是什么？

HTTP响应头是在服务器响应中包含的信息，用于传递额外的数据给客户端。重要的知识点包括：

  1. 通用头部：Cache-Control、Connection、Date等。
  2. 响应头部：Content-Type、Content-Length、Expires等。
  3. 安全头部：Strict-Transport-Security、Content-Security-Policy、X-XSS-Protection等。

这些头部可以控制缓存行为、指定资源的类型和长度、设置安全策略等。在Chrome浏览器开发者工具中查看响应头部的具体值，可以对每个头部进行进一步了解。

eg.

-   Cache-Control: max-age=3600
-   Content-Type: text/html; charset=utf-8
-   Expires: Fri, 23 Aug 2023 06:00:00 GMT
-   Last-Modified: Tue, 13 Aug 2023 12:00:00 GMT
-   ETag: "abcd1234"
-   Set-Cookie: session-id=xyz123; path=/; expires=Sat, 24 Aug 2023 06:00:00 GMT
-   Location: <https://example.com/redirect>
-   Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

3.从浏览器代码来看，缓存策略是什么？

处理缓存资源有效性的代码中，主要涉及到的函数是 GetFreshnessLifetimes 和 GetCurrentAge。（源码过多不便展示）它们的功能可以总结如下：

  1. GetFreshnessLifetimes 函数用于计算资源的 freshness_lifetime。具体步骤包括：

    • 检查响应头中的缓存控制指令，如果存在特定指令（如 no-cache、no-store、no-cache），则将 freshness_lifetime 设置为 0。
    • 如果响应头包含 max-age 指令，则直接将其值作为 freshness_lifetime。
    • 如果响应头包含 Expires 指令，则将其值减去 Date 的值得到 freshness_lifetime。
    • 如果响应状态码为 200、203 或 206，并且满足一些条件（如无需重新验证、包含 Last-Modified 等），通过计算 (date_value - last_modified_value) * 0.10 得到 freshness_lifetime。
    • 如果响应状态码为 300、301、308 或 410，则将 freshness_lifetime 设为永久有效。
    • 如果以上判断都未得到有效的 freshness_lifetime，则将其设为 0。

  2. GetCurrentAge 函数用于计算缓存资源的实际寿命（已缓存的时间）。具体步骤包括：

    • 检查响应头中的 Date 字段，获取当前时间与 Date 的差值作为 age。
    • 如果响应头包含 Age 字段，则将其值加到 age 上。

最后，通过比较 freshness_lifetime 和 age 的大小，判断缓存资源是否有效。如果 freshness_lifetime > age，则资源有效；否则资源无效。

final

本文到此结束，如有错误或遗漏请指正

avatar
文章
阅读
粉丝