JavaScript如何实现延迟加载？

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);

结合Intersection Observer做可视区加载

当某个模块进入视口时再加载对应JS，特别适合长列表、图片懒加载后的交互增强逻辑。

• 监听目标元素是否出现在可视区域，触发时再动态加载脚本
• 避免预加载未看到的内容，节省带宽和CPU
• 配合loading="lazy"（图片/iframe）可形成完整懒加载链路

不复杂但容易忽略：延迟加载不是“越晚越好”，关键看依赖关系和用户路径。核心原则是——不影响首屏渲染，又不错过用户真实需要的时机。