使用 async 和 defer 可避免 JavaScript 阻塞 DOM 构建，提升首屏速度。默认脚本会中断 HTML 解析，导致白屏或延迟；async 适用于独立脚本，异步下载后立即执行，仍会阻塞解析；defer 脚本异步下载，待解析完成后按序执行，适合依赖 DOM 的代码；内联关键脚本可前置执行，但需控制体积，非必要脚本应延迟加载，配合 preload 提升资源获取效率，优化关键渲染路径。
JavaScript 加载方式直接影响页面的渲染速度，尤其是在关键渲染路径中，不当的脚本处理会引发阻塞，导致页面白屏或交互延迟。核心问题在于：浏览器在解析 HTML 时遇到 script 标签会暂停 DOM 构建，进而推迟首次渲染时间。
默认脚本加载会阻塞解析
当浏览器读取到 <script src="app.js"></script> 这类同步脚本时，会停止 HTML 解析，转而下载并执行脚本。这个过程会中断 DOM 构建，直到脚本执行完毕才继续。如果脚本体积大或网络慢，用户会明显感知到卡顿。
常见表现：
- 页面内容迟迟不显示
- 首屏时间（FCP）显著延长
- 关键元素无法及时响应
使用 async 和 defer 破解阻塞
通过调整脚本加载行为，可以避免阻塞 DOM 构建：
立即学习“Java免费学习笔记（深入）”；
async：适用于独立脚本（如统计代码）。脚本异步下载，下载完成后立即执行，执行时仍会阻塞解析。 defer：适用于依赖 DOM 的脚本。脚本异步下载，但等到 HTML 解析完成后、DOMContentLoaded 事件前按顺序执行。示例对比：
- 同步加载：<script src="script.js"> → 阻塞解析
- async：<script async src="analytics.js"> → 异步下载，立即执行
- defer：<script defer src="main.js"> → 异步下载，解析后执行
内联脚本与关键逻辑前置
对于极小且必须尽早执行的代码（如设置主题、防闪烁），可使用内联脚本放在 head 中。但需控制体积，避免影响主文档下载。
建议做法：
- 将初始化逻辑压缩后写入 <script> 内
- 延迟非必要脚本（如广告、社交插件）
- 配合 preload 提前获取重要资源
