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标签
最灵活的方式，可在任意时机（如滚动到某区域、点击按钮、空闲时段）按需插入并执行脚本。
情感家园企业站5.0 多语言多风格版
下载
一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
立即学习“Java免费学习笔记（深入）”；
- 通过
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）可形成完整懒加载链路
不复杂但容易忽略：延迟加载不是“越晚越好”，关键看依赖关系和用户路径。核心原则是——不影响首屏渲染，又不错过用户真实需要的时机。
