JavaScript如何实现延迟加载？

夢幻星辰 2025-12-25 00:00:00 次阅读

JavaScript延迟加载有defer、async、动态创建script和Intersection Observer四种方式：defer按序执行且在DOM加载完后；async下载不阻塞但执行时机不可控；动态创建最灵活；Intersection Observer实现可视区加载，核心是平衡首屏性能与用户需求。

JavaScript延迟加载的核心是让脚本在需要时才执行，而不是页面一加载就全部运行，从而减少首屏阻塞、提升性能。

用defer属性加载外部脚本

适用于依赖DOM但不需立即执行的外部JS文件。浏览器会并行下载脚本，等HTML解析完成后再按顺序执行，且保证执行时机在DOMContentLoaded之前。

只对有效，内联脚本不支持
多个defer脚本按书写顺序执行
写法：

用async属性实现异步加载

适合独立、无依赖的脚本（如统计代码、广告SDK）。下载不阻塞HTML解析，下载完立刻执行，执行时机不可控，可能早于DOM就绪。

多个async脚本执行顺序不确定
不保证与DOM加载顺序一致，慎用于操作DOM的逻辑
写法：

动态创建script标签

最灵活的方式，可在任意时机（如滚动到某区域、点击按钮、空闲时段）按需插入并执行脚本。

通过document.createElement('script')创建，设置src后插入head或body
可监听load事件确保加载完成后再调用相关函数

示例：

const s = document.createElement('script');

    s.src = 'lazy-module.js';

    s.onload = () => initLazyFeature();

    document.head.appendChild(s);