HTTP 之 HTTP头部优化策略（九）

1. 缓存控制（Cache-Control）：

使用Cache-Control头部来告诉浏览器如何缓存响应。
例如，Cache-Control: max-age=3600表示资源在一个小时后过期。
对于不经常变化的资源，如CSS、JavaScript文件和图片，可以设置更长的过期时间。

//服务器端设置缓存控制（使用Apache为例）
<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

2. 内容编码（Content-Encoding）：

使用Content-Encoding头部启用压缩，如gzip或deflate，减少传输的数据量。

3. ETag和Last-Modified：

ETag和Last-Modified头部用于验证缓存，如果资源未改变，服务器可以返回304 Not Modified状态码，告知浏览器使用本地缓存的副本。

//nginx
location ~* \.(jpg|jpeg|png|gif|ico)$ {
  etag on;
}

4. 预加载（Preloading）：

使用Link头部的rel="preload"属性预加载关键资源，如首屏渲染所需的字体或脚本。

//预加载关键资源（HTML中使用）：
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="script.js" as="script">

5. DNS预解析（DNS-Prefetch）：

使用Link头部的rel="dns-prefetch"属性提前解析第三方域名的DNS，减少第三方脚本或资源加载的延迟。

//DNS预解析（HTML头部使用）：
<link rel="dns-prefetch" href="//example.com">

6. 预连接（Preconnect）：

使用Link头部的rel="preconnect"属性提前建立与关键第三方域的连接。

// 预连接（HTML头部使用）：
<link rel="preconnect" href="https://cdn.example.com">

7. 预渲染（Prerender）：

使用Link头部的rel="prerender"属性让浏览器预渲染页面，这适用于预计用户很快就会访问的页面。

8. 服务端推送（Server Push）：

HTTP/2引入了服务端推送，允许服务器在客户端请求之前主动发送资源。

9. 优化资源（Optimize Resources）：

使用Accept-Ranges头部支持资源的按范围请求，允许浏览器请求资源的一部分。

10. Vary头部：

Vary头部告知代理服务器考虑使用缓存的响应是否与请求的头部匹配。

11. 连接保持活动（Keep-Alive）：

Connection: keep-alive头部用于保持TCP连接打开，减少连接建立和关闭的开销。

12. 跨域资源共享（CORS）：

正确配置Access-Control-Allow-Origin和其他CORS相关的头部，确保资源可以被正确地跨域访问。

//设置CORS头部（服务器配置示例）：
location / {
  add_header 'Access-Control-Allow-Origin' '*';
  # 或者指定特定域名
  # add_header 'Access-Control-Allow-Origin' 'https://www.example.com';
}

13. 安全策略（Content-Security-Policy）：

使用Content-Security-Policy头部减少XSS攻击的风险。

// 设置内容安全策略（HTML头部使用）：
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted.cdn.com; object-src 'none';">

14. 节省带宽（节省资源请求）：

使用Accept头部告知服务器客户端支持的数据格式，减少不必要的数据传输。

//使用Accept头部（客户端请求示例，使用JavaScript）：
fetch('https://api.example.com/data', {
  headers: {
    'Accept': 'application/json',
  },
});

15. HTTP/2和HTTP/3：

利用HTTP/2的多路复用减少连接数，利用HTTP/3的QUIC减少连接建立时间和提高传输效率。

//使用HTTP/2服务端推送（服务器配置）：
# 这通常是在服务器配置中自动处理的，例如在Nginx中：
http2_push /path/to/pushed.css;