js延迟加载的方式有哪些？

在前端开发中，JavaScript（JS）的延迟加载是一种优化策略，用于提高页面加载速度和用户体验。以下是JS延迟加载的几种主要方式：

1. 使用defer属性：

   • 在<script>标签中添加defer属性，可以使脚本在文档解析完毕后执行。
   • 这种方式适用于希望按顺序加载多个脚本文件，并且不阻塞页面渲染的情况。

2. 使用async属性：

   • 给<script>标签添加async属性，脚本会在加载完成后立即执行。
   • 这种方式适用于独立的脚本文件，不需要按顺序加载的情况。

3. 动态创建DOM：

   • 使用JavaScript动态创建<script>标签，并将其添加到文档中。
   • 这种方式可以在需要延迟加载脚本的地方触发。

4. 使用setTimeout或setInterval：

   • 通过设置一个定时器来延迟加载JS脚本文件。
   • 例如，可以使用setTimeout(function(){ /* 加载脚本的代码 */ }, 2000);来在2秒后加载脚本。

5. 将JavaScript脚本放在文档底部：

   • 将<script>标签放在</body>标签之前，这样脚本会在页面渲染完毕后加载和执行。
   • 这是一种简单的方法，可以确保页面内容优先加载和显示。

6. 使用事件监听器进行延迟加载：

   • 可以监听页面滚动、鼠标移动等事件，当事件触发时再执行相关代码或加载资源。

7. 使用Intersection Observer API：

   • Intersection Observer API可以观察元素是否进入视口，并在满足条件时执行相关代码或加载资源。
   • 这种方式提供了更高效和精确的延迟加载方法，特别适用于图片或特定区域的延迟加载。

这些方式可以根据实际需求选择，以达到最优的性能优化效果。例如，对于需要按顺序执行的脚本，可以使用defer属性；对于不依赖其他脚本且可以独立执行的脚本，可以使用async属性。如果需要更精细的控制，比如基于用户行为或页面状态来加载脚本，则可以选择动态创建DOM或使用事件监听器等方法。