JS 脚本延迟加载的方式有哪些（详解 defer、async 与动态加载的性能博弈）

在 Web 性能优化的核心指标中，首屏加载时间（FCP）和可交互时间（TTI）始终是关键。JavaScript 作为现代网页的“大脑”，其体积日益庞大，若处理不当，极易成为阻塞渲染的罪魁祸首。浏览器在解析 HTML 时，一旦遇到 <script> 标签，默认会暂停 DOM 构建，立即下载并执行脚本，这种现象称为“阻塞渲染”。为了解决这一痛点，前端工程师们探索出了多种脚本延迟加载的策略。从 HTML5 原生的 defer 和 async 属性，到灵活的动态创建元素，再到现代模块系统的 import()，每种方案都有其独特的执行时序和适用场景。错误的使用方式不仅无法提升性能，反而可能导致页面逻辑错乱或白屏时间延长。本文将深入剖析这些技术的底层机制，帮助你在 2026 年的复杂业务场景中做出最优选择。

原生属性的双雄：defer 与 async 的深度辨析

HTML5 引入了两个布尔属性 defer 和 async，它们都能让脚本下载过程不阻塞 HTML 解析，但在执行时机和顺序上有着本质区别。理解它们的差异是优化加载策略的第一步。

1. defer：有序延迟，DOM 的守护者

defer 属性的设计初衷是为了让脚本在文档解析完成后按顺序执行。

下载行为：浏览器发现带有 defer 的 <script> 标签时，会立即在后台异步下载脚本文件，同时继续解析 HTML 文档，不会阻塞渲染。
执行时机：脚本的执行被推迟到整个 HTML 文档解析完成（即 DOMContentLoaded 事件触发前）之后。
执行顺序：如果有多个 defer 脚本，它们会严格按照在 HTML 中出现的顺序依次执行。

<!-- 推荐用法：放置在 head 中 -->
<script src="lib.js" defer></script>
<script src="main.js" defer></script>

适用场景：

脚本依赖于 DOM 结构（如需要操作页面上的元素）。
多个脚本之间存在依赖关系（如先加载 jQuery，再加载插件）。
需要保证执行顺序的业务逻辑。
最佳实践：在现代开发中，defer 通常是默认首选，因为它既保证了非阻塞下载，又提供了可控的执行环境。

2. async：独立异步，速度的极致

async 属性则更加激进，它追求的是“下载完立刻执行”。

下载行为：与 defer 一样，异步下载，不阻塞 HTML 解析。
执行时机：一旦脚本下载完成，立即暂停 HTML 解析并执行脚本。执行完毕后，再恢复 HTML 解析。
执行顺序：不保证顺序。谁先下载完，谁就先执行。这取决于网络状况和文件大小。

<!-- 典型用法：统计代码、广告脚本 -->
<script src="analytics.js" async></script>

适用场景：

脚本完全独立，不依赖 DOM，也不依赖其他脚本（如 Google Analytics、百度统计）。
脚本之间没有依赖关系。
对执行时机不敏感，只要加载了就行。
风险提示：如果 async 脚本中尝试访问尚未解析的 DOM 元素，会抛出错误。因此，它不适合操作页面结构的业务代码。

3. 核心对比图谱

特性	默认 `<script>`	`defer`	`async`
下载是否阻塞	是	否	否
执行是否阻塞解析	是	否 (在解析后执行)	是 (下载完立即中断解析执行)
执行时机	立即下载并执行	HTML 解析完成后	下载完成后立即执行
执行顺序	按顺序	严格按 HTML 顺序	无序 (取决于下载速度)
DOM 访问安全性	需放在 body 底部	安全 (DOM 已就绪)	不安全 (DOM 可能未就绪)
典型用途	老式写法/内联脚本	业务逻辑、框架入口	统计、广告、第三方 SDK

动态创建脚本：灵活控制的终极手段

当原生属性无法满足需求时（例如需要根据用户登录状态决定是否加载某个模块，或者在特定交互后加载），动态创建 <script> 元素是最灵活的方案。

基础实现原理

通过 JavaScript 的 DOM API 动态创建标签，并将其插入到文档中。浏览器一旦检测到新的 <script> 节点被加入 DOM 树，就会立即开始下载和执行。

function loadScript(src, callback) {
    const script = document.createElement('script');
    script.src = src;
    script.async = true; // 可选：设置为异步执行
    
    // 监听加载完成事件
    script.onload = () => {
        console.log(`脚本 ${src} 加载成功`);
        if (callback) callback(null, script);
    };
    
    // 监听加载失败事件
    script.onerror = () => {
        console.error(`脚本 ${src} 加载失败`);
        if (callback) callback(new Error('Load failed'), null);
    };

    document.head.appendChild(script);
}

// 使用示例：点击按钮后加载重型图表库
document.querySelector('#loadChartBtn').addEventListener('click', () => {
    loadScript('https://cdn.example.com/heavy-chart-lib.js', (err) => {
        if (!err) {
            initChart(); // 库加载完后初始化图表
        }
    });
});

优势：

按需加载：只在真正需要时才发起网络请求，极大节省首屏带宽。
条件控制：可以结合业务逻辑（如用户权限、设备类型）动态决定加载内容。
回调通知：通过 onload 和 onerror 精确掌握加载状态，便于后续逻辑衔接。

进阶技巧：

预加载提示：配合 <link rel="preload"> 提前告知浏览器资源重要性，加速动态加载。
并发控制：如果需要加载多个有依赖的脚本，可以封装一个队列管理器，确保依赖顺序。

现代模块系统：import() 与 type=”module”

随着 ES6 模块的普及，原生的模块加载机制也成为了延迟加载的重要工具。

1. type=”module” 的隐式 defer

在 HTML 中使用 <script type="module"> 引入模块时，浏览器会自动将其视为 defer 处理。

它默认异步下载，不阻塞解析。
它在 DOM 解析完成后执行。
它天然支持模块化语法（import/export），且自动开启严格模式。

<script type="module" src="app.js"></script>

这是现代前端项目（如 Vite、Webpack 打包产物）的标准入口写法，既享受了 defer 的性能红利，又获得了模块化的工程优势。

2. 动态 import()：代码分割的基石

import() 是一个返回 Promise 的函数，允许在代码的任何位置动态导入模块。它是实现“路由级代码分割”和“组件级懒加载”的核心技术。

// 路由懒加载示例 (React/Vue 常见模式)
button.addEventListener('click', async () => {
    try {
        // 只有点击时才下载 heavy-module.js
        const module = await import('./heavy-module.js');
        module.init();
    } catch (error) {
        console.error('模块加载失败:', error);
    }
});

优势：

细粒度控制：可以将庞大的应用拆分成无数个小块，用户访问到哪里的代码才加载哪里的。
原生支持：无需额外库，浏览器原生支持（现代浏览器覆盖率极高）。
Promise 友好：与现代异步编程模型完美契合，易于处理加载状态和错误。

其他辅助策略与实战组合拳

除了上述主流方法，还有一些辅助策略可以进一步优化体验：

定时器延迟（setTimeout）：
对于非关键脚本（如非核心的动画、日志上报），可以使用 setTimeout(() => { ... }, 0) 将其推入宏任务队列，确保主线程优先处理渲染和用户交互。但这只是推迟执行，不推迟下载，适合内联小脚本。
Intersection Observer 懒加载：
结合动态加载，利用 Intersection Observer API 监听元素是否进入视口。只有当用户滚动到特定区域时，才加载对应的脚本（如评论区脚本、视频播放器内核）。
Preload/Prefetch 预取：
- <link rel="preload">：强制当前页面尽快下载关键资源（配合动态加载使用，减少等待时间）。
- <link rel="prefetch">：利用空闲带宽下载下一页可能需要的资源。

淘宝客落地页的实战组合

在淘宝客推广页面中，性能直接关乎转化率。一个典型的优化方案可能是：

核心骨架：使用 type="module" 加载主框架，确保首屏快速渲染。
统计数据：使用 async 加载第三方统计代码，不干扰主流程。
互动组件：如“抽奖转盘”或“优惠券弹窗”，使用 Intersection Observer 监测可见性，结合 import() 动态加载重型逻辑，用户没看到之前绝不浪费流量。
长尾内容：底部的“猜你喜欢”列表，使用动态创建 script 标签的方式，在主内容加载完毕后再静默加载。

总结与选型建议

JS 脚本延迟加载没有唯一的真理，只有最适合场景的组合：

默认首选：defer 或 type="module"。适用于绝大多数业务脚本，平衡了性能与可靠性。
独立第三方：async。适用于统计、广告等无依赖的外部资源。
按需交互：动态 import() 或动态创建标签。适用于大型库、非首屏功能、条件性加载。
极致优化：结合 preload 预取和 Intersection Observer 视觉监听，实现毫秒级的资源调度。

在 2026 年的前端开发中，构建工具（如 Vite、Rollup）已经能自动处理大部分代码分割和 import() 转换，但理解底层的加载机制，依然能帮助我们在面对复杂的定制化需求时，设计出更优雅、更高效的加载策略。