JS延迟加载的方式有哪些

JavaScript延迟加载（也称为懒加载）是一种优化网页性能的技术，它允许脚本在页面加载完成后再执行，从而加快页面初始加载速度。

以下是几种常见的JavaScript延迟加载方式：

异步加载（async）:
- 使用async属性可以让浏览器异步地加载和执行脚本，不会阻塞页面的其他操作。
- 示例：<script src="myscript.js" async></script>
延迟加载（defer）:
- 使用defer属性可以让脚本在文档完全解析后，但在DOMContentLoaded事件之前执行。
- 示例：<script src="myscript.js" defer></script>
动态创建<script>标签:
- 通过JavaScript动态创建<script>标签并插入到DOM中，可以控制脚本的加载时机。
- 示例：
```
var script = document.createElement('script');
script.src = 'myscript.js';
document.head.appendChild(script);
```
使用模块加载器（如RequireJS）:
- 模块加载器允许你按需加载模块，通常用于大型应用程序中。
- 示例（使用RequireJS）：
```
require(['module'], function(module) {// 模块加载完成后执行的代码
});
```
使用Webpack等打包工具的代码分割:
- 打包工具如Webpack允许你将代码分割成多个块，并按需加载。
- 这通常通过使用import()函数或Webpack的require.ensure来实现。
- 示例（使用Webpack和import()）：
```
import('module.js').then(module => {// 模块加载完成后执行的代码
});
```
使用Intersection Observer API:
- 对于图片或视频等资源，可以使用Intersection Observer API来检测元素是否进入视口，然后加载相应的资源。
- 示例：
```
var observer = new IntersectionObserver(function(entries) {if (entries[0].isIntersecting) {// 元素进入视口，加载资源}
});
observer.observe(targetElement);
```