JavaScript 中 JavaScript 延迟加载的方式有哪些？

JavaScript 中有多种方式可以实现延迟加载：

1. async 和 defer 属性： 在 <script> 标签中使用 async 或 defer 属性来延迟脚本的执行。

   • async：异步加载，不阻塞页面解析，脚本加载完成后立即执行，但不保证执行顺序。

   <script src="example.js" async></script>
   

   • defer：延迟加载，脚本加载后会等待整个文档解析完成后再执行，按照页面上的顺序执行。

   <script src="example.js" defer></script>
   

2. 动态创建 <script> 元素： 使用 JavaScript 动态创建 <script> 元素并插入到文档中，以实现延迟加载。

   var script = document.createElement('script');
   script.src = 'example.js';
   document.body.appendChild(script);
   

3. Intersection Observer（交叉观察器）： 可以利用 Intersection Observer API 在元素进入视口时动态加载 JavaScript 资源。

4. setTimeout 和 defer 加载： 使用 setTimeout 函数来延迟执行脚本加载，也可以结合 defer 属性一起使用。

这些方式都可以延迟加载 JavaScript 脚本，根据具体的需求和场景选择适合的方式。延迟加载脚本有助于提高页面加载性能，特别是对于一些不需要立即执行的脚本或对网页核心功能不是必需的脚本。