async 和 defer 属性
加载脚本而不阻塞 HTML 解析
async 和 defer 属性 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
默认脚本行为
没有 async 或 defer 的普通 <script src="..."> 会在下载和执行期间阻塞 HTML 解析。脚本下方所有内容的渲染都会暂停，这就是脚本传统上放在 <body> 底部的原因。
async 并行下载
<script async src="..."> 会在 HTML 解析的同时下载脚本，并在脚本到达后立即执行。执行期间仍会暂停 HTML 解析，但暂停时间很短——该脚本不会阻塞其他资源的下载。
async 的执行顺序不可预测
两个 async 脚本会按照下载完成的先后顺序运行。对于相互依赖的脚本，切勿使用 async（例如先加载 jQuery，再加载 jQuery 插件），因为依赖脚本可能会在前置脚本可用之前运行。
defer 等待 HTML
<script defer src="..."> 与 async 一样并行下载，但会延迟到 HTML 完全解析之后、DOMContentLoaded 事件触发之前执行。该脚本不会阻塞解析。
<script defer src="app.js"></script>
<script defer src="analytics.js"></script>defer 保持顺序
多个 defer 脚本会按照声明顺序执行，就像放在 body 末尾的普通脚本一样。因此，defer 适合相互依赖的脚本：工具脚本会在使用它们的脚本之前加载，无需手动编排。
在 async 和 defer 之间选择
对于不操作 DOM 且没有依赖关系的独立第三方代码片段（分析工具、广告），请使用 async。对于需要 DOM 且依赖其他脚本的应用代码，请使用 defer。
模块默认采用延迟执行
<script type="module"> 会自动表现得像 defer：并行下载、解析完成后执行，并保持顺序。给模块添加 defer 是允许的，但没有必要；添加 async 则会恢复 async 的行为。
内联脚本会忽略 async 和 defer
async 和 defer 只适用于外部脚本（带有 src）。内联 <script> 标签无论是否设置这些属性，都会立即执行，因此对于 <script>console.log(1)</script>，这些属性会被静默忽略。
脚本位置变得不那么重要
使用 defer（或模块）时，<script> 标签可以放在 <head> 中而不会阻塞解析——放在那里还能让浏览器比放在 <body> 底部更早发现并开始下载脚本。
<head>
<script defer src="app.js"></script>
</head>与 preload 结合使用
对于对延迟敏感的脚本，可以在 head 中使用 <link rel="preload" as="script" href="...">，并在下方配合延迟执行的 <script>。preload 会立即开始下载，而 defer 可确保执行顺序保持正确。
常见陷阱
未确认脚本完全没有依赖关系就将其标记为 async，是导致“在我的机器上能运行，部署到生产环境却出问题”这类竞态条件的最常见原因。无法确定时，优先选择 defer——它比 async 宽容得多。
知识检查
对于第二个脚本依赖第一个脚本的情况，async 和 defer 有什么区别？
总结
async 和 defer 都会在 HTML 解析的同时并行下载脚本。async 到达后立即执行，顺序不可预测，适用于独立的第三方代码片段。defer 会在解析完成后按照声明顺序执行，适用于存在依赖关系的应用代码。模块默认采用 defer 行为。
常见问题解答
「async 和 defer 属性」课时是免费的吗？
是的 — 「async 和 defer 属性」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「async 和 defer 属性」这节课中我会学到什么？
加载脚本而不阻塞 HTML 解析 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「async 和 defer 属性」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- async 和 defer 属性
- 预加载、预获取与预连接
- 图像延迟加载：loading=lazy
- 资源提示：modulepreload