概述HTTP/3基于QUIC降低握手与队头阻塞, Early Hints在首字节前提前宣告关键资源, FetchPriority在浏览器侧表达资源优先级。三者协同可显著缩短关键路径与首屏时间。关键实践与参数传输协议: 启用HTTP/3与 `Alt-Svc` 宣告Early Hints: 服务器发送 `103` 响应与 `Link` 头- 优先级表达: 使用 `fetchpriority="highlow"` 与 `rel=preload`关键资源: 首屏CSS与关键JS设置高优先级, 次要资源标记低优先级监测指标: `FCP` `LCP` `INP` `TBT` 与网络耗时示例/配置/实现server {
listen 443 ssl http2;
listen 443 quic reuseport;
ssl_certificate /etc/ssl/fullchain.pem;
ssl_certificate_key /etc/ssl/privkey.pem;
add_header Alt-Svc "h3=\":443\"; ma=86400" always;
location / {
root /var/www;
}
}
<!doctype html>
<link rel="preload" href="/css/app.css" as="style" fetchpriority="high">
<link rel="preload" href="/js/critical.js" as="script" fetchpriority="high">
<script src="/js/critical.js" defer></script>
<script src="/js/non_critical.js" defer fetchpriority="low"></script>
<img src="/img/hero.jpg" fetchpriority="high">
import http from "http"
const server = http.createServer((req, res) => {
if (req.url === "/") {
res.writeHead(103, { Link: "</css/app.css>; rel=preload; as=style, </js/critical.js>; rel=preload; as=script" })
res.writeHead(200, { "Content-Type": "text/html" })
res.end("<html><head></head><body>OK</body></html>")
return
}
res.writeHead(404)
res.end()
})
server.listen(8080)
验证连接协议: 使用支持HTTP/3的客户端访问并确认 `Alt-Svc` 与QUIC握手提前宣告: 通过网络面板观察Early Hints阶段预连接与资源请求提前发生优先级效果: 在网络限速下比较关键与非关键资源调度顺序与耗时指标改进: 使用Lighthouse与性能监测记录 `FCP` `LCP` `INP` `TBT` 的变化注意事项Early Hints需上游或应用服务器支持, 需在CDN与应用层协同HTTP/3启用需TLS与服务器版本支持, 注意兼容性与回退优先级表达为建议, 浏览器仍会按自身策略调度保持关键资源体积最小化与缓存策略合理配置
发表评论 取消回复