17370845950

使用 async 和 defer 可避免 JavaScript 阻塞 DOM 构建，提升首屏速度。默认脚本会中断 HTML 解析，导致白屏或延迟；async 适用于独立脚本，异步下载后立即执行，仍会阻塞解析；defer 脚本异步下载，待解析完成后按序执行，适合依赖 DOM 的代码；内联关键脚本可前置执行，但需控制体积，非必要脚本应延迟加载，配合 preload 提升资源获取效率，优化关键渲染路径。

JavaScript 加载方式直接影响页面的渲染速度，尤其是在关键渲染路径中，不当的脚本处理会引发阻塞，导致页面白屏或交互延迟。核心问题在于：浏览器在解析 HTML 时遇到 script 标签会暂停 DOM 构建，进而推迟首次渲染时间。

默认脚本加载会阻塞解析

当浏览器读取到 这类同步脚本时，会停止 HTML 解析，转而下载并执行脚本。这个过程会中断 DOM 构建，直到脚本执行完毕才继续。如果脚本体积大或网络慢，用户会明显感知到卡顿。

常见表现：

• 页面内容迟迟不显示
• 首屏时间（FCP）显著延长
• 关键元素无法及时响应

使用 async 和 defer 破解阻塞

通过调整脚本加载行为，可以避免阻塞 DOM 构建：

async：适用于独立脚本（如统计代码）。脚本异步下载，下载完成后立即执行，执行时仍会阻塞解析。 defer：适用于依赖 DOM 的脚本。脚本异步下载，但等到 HTML 解析完成后、DOMContentLoaded 事件前按顺序执行。

示例对比：

• 同步加载：
• async：
• defer：

内联脚本与关键逻辑前置

对于极小且必须尽早执行的代码（如设置主题、防闪烁），可使用内联脚本放在 head 中。但需控制体积，避免影响主文档下载。

建议做法：

• 将初始化逻辑压缩后写入
• 延迟非必要脚本（如广告、社交插件）
• 配合 preload 提前获取重要资源

基本上就这些。合理使用 async/defer，区分脚本优先级，就能大幅缩短关键路径，提升首屏体验。