使用 async 和 defer 可避免 JavaScript 阻塞 DOM 构建，提升首屏速度。默认脚本会中断 HTML 解析，导致白屏或延迟；async 适用于独立脚本，异步下载后立即执行，仍会阻塞解析；defer 脚本异步下载，待解析完成后按序执行，适合依赖 DOM 的代码；内联关键脚本可前置执行，但需控制体积，非必要脚本应延迟加载，配合 preload 提升资源获取效率，优化关键渲染路径。
JavaScript 加载方式直接影响页面的渲染速度，尤其是在关键渲染路径中，不当的脚本处理会引发阻塞，导致页面白屏或交互延迟。核心问题在于：浏览器在解析 HTML 时遇到 script 标签会暂停 DOM 构建，进而推迟首次渲染时间。
默认脚本加载会阻塞解析当浏览器读取到这类同步脚本时，会停止 HTML 解析，转而下载并执行脚本。这个过程会中断 DOM 构建，直到脚本执行完毕才继续。如果脚本体积大或网络慢，用户会明显感知到卡顿。
常见表现：
页面内容迟迟不显示首屏时间（FCP）显著延长关键元素无法及时响应使用 async 和 defer 破解阻塞通过调整脚本加载行为，可以避免阻塞 DOM 构建：立即学习“Java免费学习笔记（深入）
”；
Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载async：适用于独立脚本（如统计代码）。脚本异步下载，下载完成后立即执行，执行时仍会阻塞解析。
defer：适用于依赖 DOM 的脚本。脚本异步下载，但等到 HTML 解析完成后、DOMContentLoaded 事件前按顺序执行。
示例对比：
同步加载：