如何延迟加载JavaScript

延迟加载JavaScript是一种优化网页性能的技术，主要用于减少页面初始加载时间，特别是对于那些非必需的脚本，比如用户可能不会立即看到的内容相关的脚本。以下是实现延迟加载的一些常见方法：

1. **异步加载**：
- `<script async>` 标签：在HTML文件中插入脚本标签，并添加`async`属性，浏览器会并行下载和执行这些脚本，不会阻塞页面渲染。

   <script src="delayed-script.js" async></script>

2. **defer属性**：
- `<script defer>` 也用于异步加载，但它保证脚本会在文档解析完成后，在DOMContentLoaded事件触发之前执行。

   <script src="delayed- 使用JavaScript库，如`Intersection Observer API`，当特定元素进入视口范围时才加载对应的脚本。

function loadScript(src, callback) {
const script = document.createElement('script');
script.src = src;
script.onload = callback;
document.body.appendChild(script);
}

// 使用时
loadScript('delayed-script.js', function() {
// 脚本加载完成后的回调
});

4. **模块化加载** (AMD、CMD等)：
   - 如果项目较大，可以采用模块化工具（如RequireJS或Webpack），按需加载依赖的脚本。

5. **代码分割**：
   - 针对大型应用，现代前端构建工具（如Rollup、Vite等）支持将代码分割成小块，只在需要的地方引入。

延迟加载有助于提高用户体验，特别是对于那些内容较长或数据量大的网页。