预加载、预获取与预连接
提示浏览器尽早获取关键资源
预加载、预获取与预连接 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
为什么需要资源提示？
现代浏览器只有在解析 HTML 时才会发现资源。资源提示（<head> 中 link rel 属性）可以告诉浏览器“我很快就会需要这个资源”，让网络请求比正常发现资源的时间更早开始。
preload 立即加载
<link rel="preload" as="..." href="..."> 会告诉浏览器立即获取资源，并根据 as 类型设置适当的优先级。请将它用于页面必定需要的资源：主视觉图片、关键字体和路由级 JavaScript。
<link rel="preload" as="font" type="font/woff2" href="/inter.woff2" crossorigin>as 属性
始终设置 as——它决定请求优先级、Accept 标头以及 CSP 的执行方式。常见值包括：“script”“style”“font”“image”和“fetch”。如果没有 as，浏览器会忽略 preload 并记录警告。
字体需要 crossorigin
即使字体来自同源，字体 preload 也需要 crossorigin。没有它，浏览器会在实际使用字体时以 CORS 模式获取，但在 preload 时以匿名模式获取，导致下载两次——这是一个隐蔽而常见的性能错误。
prefetch 稍后加载
<link rel="prefetch" href="..."> 提示浏览器某个资源将在未来的导航中使用。浏览器会在空闲时间以最低优先级获取它，然后将其缓存，使下一页面能够立即完成绘制。
<link rel="prefetch" href="/next-page.html">preconnect 预热连接
<link rel="preconnect" href="https://api.example.com"> 会告诉浏览器在首次请求到达之前，先与第三方源站完成 DNS、TCP 和 TLS 握手。请将它用于页面即将访问的 API 主机和内容分发网络。
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>dns-prefetch 是更轻量的选择
<link rel="dns-prefetch"> 只执行 DNS 查询，比 preconnect 的成本更低。当第三方主机很多、无法为每个主机建立完整的 preconnect 时，可以使用它；对最关键的少数源站使用 preconnect。
限制资源提示
过多的 preload 会争夺相同的带宽，拖慢页面速度。只对阻塞关键渲染路径的资源使用 preload——通常是一张主视觉图片和一两种关键字体。其他资源可以正常发现。
使用 modulepreload 预加载 ES 模块
<link rel="modulepreload" href="/app.js"> 不仅会预加载模块文件，还会预加载其依赖树。这可以避免原生 ES 模块常见的级联下载瀑布：每个导入都要等待前一个导入完成解析。
衡量影响
使用网络面板的 Initiator 列确认预加载资源确实提前获取，并使用 Lighthouse 的“预连接到所需源站”审计来发现遗漏的机会。移除一个缓慢但未使用的 preload，往往和添加一个有效的 preload 带来同样多的收益。
每种提示的特性
如果资源在约 3 秒内未被使用，preload 会触发控制台警告。在网络或内存压力下，浏览器可能会取消 prefetch。preconnect 连接在闲置约 10 秒后会关闭，因此应将它用于即将请求的资源。
知识检查
preconnect 做了什么，而 dns-prefetch 没有做什么？
总结
preload 会立即获取关键资源（必要时配合 as 和 crossorigin）。prefetch 会在空闲时间缓存可能在下一次导航中使用的资源。preconnect（TCP+TLS）和 dns-prefetch（仅 DNS）会预热到第三方源站的连接。请谨慎使用并进行测量。
常见问题解答
「预加载、预获取与预连接」课时是免费的吗？
是的 — 「预加载、预获取与预连接」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「预加载、预获取与预连接」这节课中我会学到什么？
提示浏览器尽早获取关键资源 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「预加载、预获取与预连接」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。