Early Hints（HTTP 103）是HTTP/2下服务器在主响应前发送的轻量提示，用于提前预加载关键JS等资源，缩短首屏时间；需服务端支持（如Nginx 1.21.4+、Apache 2.4.52+、Node.js 18.12+），聚焦确定立即执行的脚本，Chrome 103+等支持，Safari暂不支持。
Early Hints（HTTP 状态码 103） 是 HTML5 生态中一项被低估但实用的性能优化机制，它允许服务器在主响应（如 200 OK）发出前，先发送一个轻量级的 103 响应，提前告知浏览器：接下来要加载的资源（比如关键 JS、CSS、字体或预连接目标）。这能有效利用服务器后端处理（如数据库查询、模板渲染）的空档期，让浏览器尽早发起预加载（Link: rel=preload）或预连接（Link: rel=preconnect），从而缩短首屏时间。
服务端需支持 HTTP/2 + 103 响应
Early Hints 依赖 HTTP/2（因 HTTP/1.1 不支持多响应），且必须由 Web 服务器或反向代理主动触发。常见支持方式：
-
Nginx 1.21.4+：启用
http_103指令，并在 location 块中用add_header Link发送 103；需配合proxy_buffering off避免缓冲阻塞。 -
Apache 2.4.52+：启用
mod_http2和mod_headers，用H2EarlyHints on并通过Header add Link设置。 -
Node.js（如 Express）：需使用支持 103 的 HTTP/2 服务器（如原生
http2模块），在调用response.writeEarlyHints()（Node.js 18.12+）或手动 writeHead(103) 后立即发送 Link 头。
只预取「确定下一步会用」的关键脚本
Early Hints 不是盲目 preload 所有资源，而是聚焦于主 HTML 渲染后**立刻执行**的 JS（例如框架启动脚本、核心业务逻辑）。错误示例：预取某个按钮点击后才加载的懒加载模块——此时浏览器已收到完整 HTML，103 早已失效。
- 典型适用场景：React/Vue 应用的
main.js、vendor.chunk.js；含defer或module的入口脚本。 - 推荐写法：
Link: /js/main.a1b2c3.js>; rel=preload; as=script—— 必须带as=script，否则浏览器按默认类型处理，可能不提升优先级。 - 避免滥用：不要在 103 中预取 CSS（除非 JS 执行强依赖某 CSS）、图片或非关键字体；它们更适合在 HTML
内声明或用rel=preload内联。
验证是否生效：看 Network 面板与 Timing
浏览器开发者工具是唯一可信依据。打开 Network 面板并刷新页面：
立即学习“前端免费学习笔记（深入）”；
- 找到目标 HTML 请求，查看 Headers → Response Headers 区域是否有
HTTP/2 103行；展开该请求，应能看到两个响应：第一个是 103（含 Link 头），第二个是 200（主 HTML）。 - 检查预取脚本的请求 Timing：若其
Start Time明显早于主 HTML 的Response End（甚至早于 200 响应开始），说明 Early Hints 成功抢占了空档。 - 注意兼容性：Chrome 103+、Edge 103+、Firefox 110+ 支持；Safari 尚未支持，需降级为常规 preload（不影响功能，仅损失部分时序优势）。
搭配其他优化，避免负优化
Early Hints 是「锦上添花」，不是万能药。若基础链路慢，它无法逆转瓶颈。
- 确保后端渲染耗时 > 100ms：如果服务端瞬间返回 HTML（如纯静态页），103 几乎无意义；它最适合 SSR、CMS 或 API 聚合类应用。
- 禁用不必要的中间件：如某些 Node.js 框架的压缩中间件（
compression()）会延迟响应流，需配置flush或改用流式压缩。 - 监控真实效果：用 Lighthouse 或 WebPageTest 对比开启/关闭 103 的
FCP和LCP；若提升不足 5%，可能当前瓶颈在 JS 执行或渲染，而非网络。
