使用 @defer 延迟加载
使用 @defer 延迟加载模板区域。
使用 @defer 延迟加载 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。
使用 defer 延迟加载
at-defer 区块会延迟加载模板的一部分及其依赖项，从而提升初始加载性能。延迟内容会被拆分到单独的代码块中。
基本 defer 语法
将内容包裹在 at-defer 区块中。默认情况下，它会在浏览器空闲时加载。
// @defer {
// <app-heavy-chart></app-heavy-chart>
// }为何使用 defer
延迟加载较重或位于首屏以下的组件，可以保持初始包较小并加快首次绘制。组件只会在确实需要时加载。
placeholder 区块
at-placeholder 块会在延迟块触发前显示内容。
// @defer {
// <app-comments></app-comments>
// } @placeholder {
// <p>Comments will load soon</p>
// }加载块
获取延迟代码块期间会显示 at-loading 块。
// @defer {
// <app-comments></app-comments>
// } @loading {
// <p>Loading comments...</p>
// }错误块
如果加载延迟依赖项失败，就会渲染 at-error 块。
// @defer {
// <app-comments></app-comments>
// } @error {
// <p>Failed to load comments</p>
// }触发器
您可以通过 on 子句中的触发器控制何时开始加载，例如空闲时、进入视口时、交互时、悬停时或计时器触发时。
// @defer (on viewport) {
// <app-chart></app-chart>
// }进入视口时
进入视口时触发器会在内容滚动到可视区域时加载内容，非常适合放在首屏以下的区域。
交互时和悬停时
交互时会在用户点击或聚焦占位内容时加载；悬停时会在指针悬停在占位内容上时加载。
// @defer (on interaction) {
// <app-editor></app-editor>
// } @placeholder {
// <button>Open editor</button>
// }when 条件
您也可以使用 when 根据布尔表达式触发，在表达式变为 true 后加载内容。
// @defer (when shouldLoad()) {
// <app-details></app-details>
// }预取
您可以将延迟代码块的预取与渲染分开，例如在空闲时预取，这样在渲染触发器触发前，内容就已经准备就绪。
// @defer (on viewport; prefetch on idle) {
// <app-chart></app-chart>
// }快速检查：defer
触发延迟内容。
回顾：延迟加载
您学习了用于延迟加载的 at-defer 块，以及 at-placeholder、at-loading 和 at-error 块；还学习了空闲时、进入视口时、交互时、悬停时、计时器触发时和 when 等触发器，以及预取。您已完成“内置控制流”课程。
常见问题解答
「使用 @defer 延迟加载」课时是免费的吗？
是的 — 「使用 @defer 延迟加载」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。
「使用 @defer 延迟加载」这节课中我会学到什么？
使用 @defer 延迟加载模板区域。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Angular Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「使用 @defer 延迟加载」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Angular Academy 课中编写并运行代码吗？
能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 使用 @if 进行条件渲染
- 使用 @for 循环
- 使用 @switch 进行切换
- 使用 @defer 延迟加载