HTTP的场景实践 ｜ 青训营

我选择谷歌浏览器（Google Chrome）作为分析对象。

谷歌浏览器在处理HTTP请求时有多种缓存策略，这些策略可以提高页面加载速度并减轻服务器负载。

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

   • Expires：服务器返回的响应头中包含一个过期时间，浏览器将此时间保存并用于下次请求。如果当前时间在过期时间之前，浏览器将直接使用本地缓存的资源。例如：Expires: Wed, 09 Aug 2023 02:10:10 GMT

   • Cache-Control：通过设置Cache-Control头，服务器可以更精确地控制资源的缓存行为。

     • max-age：通过指定max-age值（以秒为单位），服务器告知浏览器在指定的时间内可以使用缓存的资源。例如：Cache-Control: max-age=3600 表示资源可以缓存1小时。

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

   • Last-Modified：服务器在响应头中返回资源的最后修改时间。当浏览器下一次请求该资源时，会包含一个名为If-Modified-Since的请求头，该头的值为上次资源返回的Last-Modified时间。服务器可以对比该时间与实际资源的修改时间，如果相同，则返回304响应，告诉浏览器可以使用本地缓存。例如：

     • 服务器响应头：Last-Modified: Wed, 09 Aug 2023 02:00:00 GMT
     • 浏览器请求头：If-Modified-Since: Wed, 09 Aug 2023 02:00:00 GMT

   • ETag：服务器通过生成一个唯一的实体标识符（通常是资源内容的哈希值），在响应头中返回给浏览器。当浏览器下一次请求资源时，会在If-None-Match请求头中携带该标识符。服务器通过比较该标识符与实际资源的标识符，来决定是否返回304响应。例如：

     • 服务器响应头：ETag: "abcdefg"
     • 浏览器请求头：If-None-Match: "abcdefg"

3. 资源优先级（Priority） ：

   • 使用Priority头，可以指定不同资源的加载优先级。例如：<link rel="stylesheet" href="styles.css" priority="high">。这样可以确保关键资源能够更快地加载，提升用户体验。

4. 预加载（Preload） ：

   • 使用<link rel="preload">标签，浏览器在页面加载时可以预先请求并下载关键资源，以便在需要时立即使用。
   • 例如：<link rel="preload" href="image.jpg" as="image">

5. 资源提示（Resource Hints） ：

   • 谷歌浏览器支持一些资源提示的标签，用于提前解析域名或建立连接，减少后续请求的延迟。
   • <link rel="dns-prefetch" href="//example.com">：浏览器会提前解析DNS，以减少后续请求的DNS解析时间。
   • <link rel="preconnect" href="//example.com">：浏览器会提前建立连接，以减少后续请求的握手时间。

以上是谷歌浏览器常见的缓存策略和优化实践。需要注意的是，具体的缓存控制策略可能受到服务器端的配置和响应头设置的影响。