第八篇 提升网页性能：深入解析HTTP请求优化策略（三）
文章目录
- 1. 缓存策略设计
-
- 1.1 HTTP缓存机制
-
- 1.1.1 强缓存（Cache-Control/Expires）
- 1.1.2 协商缓存（ETag/Last-Modified）
- 1.2 缓存位置
-
- 1.2.1 浏览器缓存
- 1.2.2 代理服务器缓存
- 1.3 缓存策略选择
-
- 1.3.1私有缓存
- 1.3.2 公共资源缓存
- 1.4 Vary头部
- 2. 缓存实施细节
-
- 2.1 服务端配置
- 2.2 前端开发
- 2.3 HTTP/2特性利用
- 2.4 Service Worker
HTTP请求优化策略中，缓存策略设计与实施是提高页面加载速度、减少服务器负载并改善用户体验的关键手段。
1. 缓存策略设计
1.1 HTTP缓存机制
1.1.1 强缓存（Cache-Control/Expires）
通过Cache-Control头部字段或旧版的Expires头部指定资源的有效期，浏览器在有效期内直接使用本地缓存而不发起网络请求。例如，设置Cache-Control: max-age=3600表示资源在接下来的一个小时内可以直接从缓存读取。
用法与原理：
强缓存是指在客户端再次发起同一资源请求时，浏览器根据本地存储的缓存信息判断是否可以直接使用缓存中的资源，无需向服务器发送请求确认资源的有效性。这种情况下，即使服务器上的资源已经更新，只要缓存未过期，浏览器仍会直接使用本地缓存。
设置方式：
Cache-ControlHTTP头部字段：现代浏览器广泛支持该字段，可以设置如max-age=来指定资源在多少秒内有效。例如，Cache-Control: max-age=3600表示资源在接下来的一个小时内可被强缓存。ExpiresHTTP头部字段：这是HTTP/1.0时代的做法，用来设置一个绝对时间点，在这个时间之前资源被认为是新鲜的。例如，Expires: Wed, 21 Oct 2024 07:28:00 GMT。
何时使用：
强缓存通常用于那些变化不频繁的静态资源，比如CSS样式文件、JavaScript脚本、图片等。这些内容在版本不变的情况下不需要每次访问都重新下载，因此通过强缓存策略可以显著降低网络延迟和带宽消耗。
1.1.2 协商缓存（ETag/Last-Modified）
当强缓存过期后，浏览器会发送条件GET请求询问服务器资源是否已改变。通过ETag（实体标签）或Last-Modified（最后修改时间）来判断资源是否需要更新。
用法与原理：
当强缓存失效（即超过max-age或Expires设定的时间）后，浏览器不再信任本地缓存，这时它会向服务器发送一个条件GET请求，询问资源是否有更新。协商缓存依赖于以下两个HTTP头部：
-
ETag（Entity Tag）：服务器为每个资源生成一个唯一标识符，通常基于内容哈希值或其他唯一算法得出。浏览器在后续请求中携带If-None-Match头部，并附上之前收到的ETag值，服务器比较新旧ETag，如果一致，则表示资源未改变，返回304 Not Modified，浏览器继续使用本地缓存；否则，服务器返回新的资源及对应的ETag。 -
Last-Modified和If-Modified-Since：服务器在首次响应时告知资源最后修改时间（Last-Modified），浏览器下次请求时带上If-Modified-Since头部，服务器对比时间戳，若资源未在该时间之后修改则返回304状态码。
何时使用：
协商缓存适用于可能动态变化但又希望利用缓存以提升性能的场景，尤其是对时效性有一定要求但不那么严格的资源。例如博客文章的内容可能会有修订，但不是每次访问都会有改动，这时协商缓存既能确保用户看到最新内容，又能避免不必要的重复下载。
示例：
对于一个静态图片资源，服务端可能这样设置响应头：
HTTP/1.1 200 OK
Date: Mon, 06 Jul 2020 15:00:00 GMT
Last-Modified: Wed, 01 Jul 2020 10:00:00 GMT
ETag: "3a489f14"
Cache-Control: max-age=3600, must-revalidate
[... 图片数据 ...]
当缓存过期后，浏览器会带上相应的条件请求头部进行协商缓存验证：
GET /image.jpg HTTP/1.1
Host: example.com
If-None-Match: "3a489f14"
If-Modified-Since: Wed, 01 Jul 2020 10:00:00 GMT
若服务器确定资源未变，则回复：
HTTP/1.1 304 Not Modified
Date: Mon, 06 Jul 2020 16:00:00 GMT
1.2 缓存位置
1.2.1 浏览器缓存
用户浏览器端存储资源，适用于图片、CSS、JavaScript等静态内容。
浏览器缓存的具体存储位置因浏览器和操作系统而异，但通常它们会被保存在以下路径中：
-
Windows：
- Internet Explorer（旧版）：缓存文件位于
C:\Users\[用户名]\AppData\Local\Microsoft\Windows\Temporary Internet Files目录下。 - Microsoft Edge：缓存文件位于
C:\Users\[用户名]\AppData\Local\Packages\Microsoft.MicrosoftEdge_8wekyb3d8bbwe\AC\MicrosoftEdge\User\Default\Cache。 - Google Chrome：缓存文件可能位于
C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\Default\Cache或者C:\Users\[用户名]\AppData\Local\Microsoft\Windows\INetCache\Google\Chrome（根据版本和系统配置不同）。 - Mozilla Firefox：缓存文件通常位于
C:\Users\[用户名]\AppData\Local\Mozilla\Firefox\Profiles\[profile.id]\Cache。
- Internet Explorer（旧版）：缓存文件位于
-
macOS：
- Safari：缓存位于
~/Library/Caches/com.apple.Safari/或者~/Library/Caches/com.apple.WebKit.PluginProcess/内。 - Google Chrome：缓存文件位于
~/Library/Caches/Google/Chrome/Default/Cache。 - Mozilla Firefox：缓存文件位于
~/Library/Caches/Firefox/Profiles/[profile.id]/Cache。
- Safari：缓存位于
-
Linux：
- Chromium / Google Chrome：缓存通常位于
~/.cache/chromium/Default/Cache或~/.cache/google-chrome/Default/Cache。 - Mozilla Firefox：缓存位于
~/.cache/mozilla/firefox/[profile.id]/Cache。
- Chromium / Google Chrome：缓存通常位于
要查看确切的缓存位置，可以在浏览器设置或通过开发者工具找到相关选项来查看缓存内容。对于查看具体文件，可能需要在文件管理器中按照上述路径查找。此外，由于浏览器更新可能会改变缓存存放的位置，因此建议查阅对应浏览器的最新文档以获取准确信息。
1.2.2 代理服务器缓存
代理服务器缓存是一种在网络层面上进行的缓存机制，常见于CDN（内容分发网络）服务、反向代理服务器（如Nginx）或其他类型的网络代理中。这类缓存系统通常位于客户端与原始服务器之间，能够减轻源站服务器的压力，同时降低网络延迟，特别是在地理位置分布广泛的用户群中效果明显。
代理服务器缓存的工作原理类似于浏览器缓存，它根据HTTP协议的缓存规则存储和提供请求过的资源。当用户通过代理服务器请求资源时，如果代理服务器上已有该资源的有效缓存，则直接将缓存的内容返回给用户，避免了向原始服务器发起请求。
例如，在Nginx配置中，可以通过proxy_cache模块实现对后端服务器响应内容的代理级缓存：
http {
proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m inactive=60m;
server {
location / {
proxy_pass http://upstream_server;
proxy_cache my_cache;
proxy_cache_valid 200 304 1d; # 对200和304响应状态码的资源缓存一天
}
}
}
通过这样的配置，Nginx将作为代理服务器缓存来自上游服务器的响应，并依据指定的缓存策略为后续相同请求提供服务。
1.3 缓存策略选择
1.3.1私有缓存
对于用户特定数据或受权限控制的内容，可以设置为私有缓存（如Cache-Control: private），确保这些信息不会被共享给其他用户。
浏览器的私有缓存指的是存储在用户本地（即客户端）的、仅对该用户可见且不被共享给其他用户的缓存资源。这些资源通常与用户的会话或个人数据相关，如登录后的网页内容、个性化设置等。
私有缓存的设置：
要将一个HTTP响应指定为私有缓存，可以通过设置Cache-Control头部字段来实现。具体来说，当服务器返回HTTP响应时，包含以下指令：
Cache-Control: private
这告诉浏览器和其他中间缓存层（如果存在），这个响应应该被缓存在用户的私人存储区中，而不是公共或者共享缓存中，这样可以防止其他用户或代理服务器获取并使用该缓存内容。
另外，有时候对于动态生成但对特定用户长期有效的内容，也可以考虑加上一个较短的有效期限，例如：
Cache-Control: private, max-age=
这里
访问私有缓存：
浏览器自身管理私有缓存，并在满足条件时自动使用缓存中的内容。用户一般无法直接访问或查看私有缓存的具体内容，它们是由浏览器在后台处理和使用的。
当用户重新访问同一网站时，浏览器会根据缓存策略检查是否有可用的私有缓存资源，如果有并且资源未过期，则可以直接从缓存中加载，否则，它会向服务器发起新的请求以获取最新版本的数据。
1.3.2 公共资源缓存
对于公共、不变的静态资源，应尽量实现长期可缓存，以充分利用客户端缓存优势。
为了实现公共资源的长期可缓存，可以在HTTP响应头中设置：
Cache-Control: public表示任何缓存都可以存储此响应。Cache-Control: max-age=指定资源在指定秒数内有效，浏览器在这段时间内无需重新验证资源。- 或者，可以使用
Expires头部来设置一个绝对过期时间。
例如：
Cache-Control: public, max-age=31536000
这将指示浏览器和其他中间缓存设备，在接下来的一年（即31536000秒）内可以直接从缓存中获取资源，而不需要重新请求服务器。当然，具体的有效期限应根据资源的实际更新频率进行调整。
1.4 Vary头部
当响应头包含Vary头部时，指示缓存系统应基于请求中的哪些头部信息进行缓存区分，如Vary: Accept-Encoding意味着缓存应根据Accept-Encoding头部的不同值存储不同的版本。
2. 缓存实施细节
CSS、JavaScript文件以及图片资源在网页加载过程中通常都是通过HTTP GET 请求来获取的。当浏览器解析HTML文档时，遇到标签引用CSS文件、
如果服务器端没有设置任何缓存相关的HTTP头部信息（如Cache-Control、Expires、Last-Modified或ETag等），浏览器仍然可能会根据其自身的默认策略来决定是否缓存响应内容，尤其是对于静态资源（例如图片、CSS样式文件和JavaScript脚本等）。不过这种默认行为通常较为保守，并且各个浏览器可能有所不同。
现代浏览器的默认策略趋向于至少在短时间内缓存某些资源以提升用户体验，但这样的缓存并不一定可靠且易于控制，因为不同的浏览器对无明确缓存指示的响应处理方式可能存在差异。
为了确保网页资源缓存行为的一致性和可控性，最佳实践是推荐由服务器端明确设置合适的HTTP缓存头部信息。
2.1 服务端配置
- 设置合适的
Cache-Control头部，比如针对静态资源设置较长时间的max-age，而对于经常变化的数据则缩短有效期或禁用缓存。 - 生成并返回有意义的
ETag，以便于浏览器进行后续的条件请求。
在Nginx中，可以通过location块来配置针对不同类型的资源设置不同的Cache-Control头部和ETag生成策略。以下是一个简单的Nginx配置示例：
http {
# 设置全局缓存相关选项（可选）
proxy_cache_path /path/to/cache levels=1:2 keys_zone=my_cache:10m inactive=60m;
server {
listen 80;
# 针对静态资源的缓存设置
location ~* \.(jpg|jpeg|png|gif|css|js)$ {
# 开启缓存并设置较长时间的max-age
expires 30d; # 假设设置为30天
add_header Cache-Control "public, max-age=2592000"; # 对应于30天
# 如果服务器端有对应的文件，则启用etag生成
etag on;
# 可以考虑开启代理缓存或FastCGI缓存（如果适用）
# proxy_cache my_cache;
# fastcgi_cache my_cache;
}
# 针对经常变化的数据，禁用缓存或设置很短的有效期
location /api/ {
# 禁止浏览器缓存
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma "no-cache";
add_header Expires "0";
# 虽然不建议缓存动态内容，但如果确实需要根据ETag做条件请求，可以保留下面一行
etag on;
# 其他如proxy_pass、fastcgi_pass等转发配置
# ...
}
}
}
这段配置包括：
- 对于静态资源（图片、样式表、脚本），设置了较长的缓存有效期，允许浏览器缓存这些内容长达30天，并且开启了ETag生成。
- 对于经常变化的API数据，通过
Cache-Control头部明确禁止了缓存，并清除了Pragma和Expires头部信息，确保浏览器每次都会向服务器请求最新数据。
请注意，具体的缓存路径、缓存区域大小以及是否启用代理或FastCGI缓存需根据实际情况调整。
2.2 前端开发
- 使用HTML
标签对网页整体进行缓存控制。 - 对于动态加载的资源，可以在URL后面添加查询参数作为版本标识，如
/static/js/app.js?v=1.0，每次文件更改时更新版本号以绕过缓存。
在HTML中， 标签可以用于设置网页缓存策略，但它的效果相比服务器端通过HTTP头部（如Cache-Control、Expires或ETag）发送的缓存指令较弱，并且不是所有浏览器都完全遵循 标签设置的缓存规则。然而，在某些情况下，特别是对于不支持HTTP/1.1缓存头信息的老式浏览器，使用标签进行缓存控制仍具有一定意义。
以下是一个使用标签设置缓存控制的例子：
<meta http-equiv="Cache-Control" content="max-age=3600, public">
<meta http-equiv="Pragma" content="cache">
<meta http-equiv="Expires" content="Sat, 12 Jan 2024 12:00:00 GMT">
请注意，现代浏览器更倾向于优先处理HTTP响应头部中的缓存指示。因此，最佳做法是结合服务端配置（如Nginx、Apache等服务器软件中的配置）来精确控制缓存策略，同时也可以在HTML文档中使用标签作为补充手段。如果可能的话，直接配置服务器端发送合适的HTTP缓存头部更为可靠和有效。
2.3 HTTP/2特性利用
- HTTP/2引入了HPACK压缩头部，使得重复请求相同资源时的头部开销减小。
- Server Push功能允许服务器预测客户端可能需要的资源并提前推送至客户端缓存。
HTTP/2 中的 Server Push（服务器推送）是一项旨在优化网页加载性能的功能。在传统的HTTP/1.x协议中，浏览器发起请求后，服务器才会逐个响应客户端所需的资源。而在HTTP/2协议下，Server Push 允许服务器在客户端请求一个资源时，预测到客户端可能还需要其他资源，并主动将这些资源“推”送到客户端缓存中，而无需等待客户端显式地发起请求。
例如，当服务器接收到对HTML文档的请求时，它分析文档中的 或