JS延迟加载的方式有哪些

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

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

1. 异步加载（async）:

   • 使用async属性可以让浏览器异步地加载和执行脚本，不会阻塞页面的其他操作。
   • 示例：<script src="myscript.js" async></script>

2. 延迟加载（defer）:

   • 使用defer属性可以让脚本在文档完全解析后，但在DOMContentLoaded事件之前执行。
   • 示例：<script src="myscript.js" defer></script>

3. 动态创建<script>标签:

   • 通过JavaScript动态创建<script>标签并插入到DOM中，可以控制脚本的加载时机。
   • 示例：

     var script = document.createElement('script');
     script.src = 'myscript.js';
     document.head.appendChild(script);
     

4. 使用模块加载器（如RequireJS）:

   • 模块加载器允许你按需加载模块，通常用于大型应用程序中。
   • 示例（使用RequireJS）：

     require(['module'], function(module) {// 模块加载完成后执行的代码
     });
     

5. 使用Webpack等打包工具的代码分割:

   • 打包工具如Webpack允许你将代码分割成多个块，并按需加载。
   • 这通常通过使用import()函数或Webpack的require.ensure来实现。
   • 示例（使用Webpack和import()）：

     import('module.js').then(module => {// 模块加载完成后执行的代码
     });
     

6. 使用Intersection Observer API:

   • 对于图片或视频等资源，可以使用Intersection Observer API来检测元素是否进入视口，然后加载相应的资源。
   • 示例：

     var observer = new IntersectionObserver(function(entries) {if (entries[0].isIntersecting) {// 元素进入视口，加载资源}
     });
     observer.observe(targetElement);
     

选择哪种延迟加载方式取决于你的具体需求和使用场景。例如，对于简单的脚本加载，可以使用async或defer属性；对于复杂的应用程序，可能需要使用模块加载器或打包工具的代码分割功能。