JavaScript 延迟加载的方法（ 7种 ）

JavaScript脚本的延迟加载（也称为懒加载）是指在网页的主要内容已经加载并显示给用户之后，再加载或执行额外的JavaScript代码。这样做可以加快页面的初始加载速度，改善用户体验，并减少服务器的压力。

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

1. defer 属性：

   • 使用 <script> 标签的 defer 属性可以让浏览器在解析文档的同时下载脚本文件，但会在整个文档解析完成后再执行这些脚本。
   • 语法：<script src="example.js" defer></script>

2. async 属性：

   • async 属性告诉浏览器立即开始下载脚本，并且在下载完成后尽快执行它，而不需要等待HTML文档解析完成。这适用于与页面内容无关的脚本，因为它不会阻塞DOM构建。
   • 语法：<script src="example.js" async></script>

3. 动态创建 <script> 元素：

   • 通过JavaScript动态地创建 <script> 元素并添加到文档中，可以在特定事件发生时（如窗口加载完成、用户滚动到某个位置等）才加载脚本。
   • 示例代码：

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

4. 使用 Intersection Observer API：

   • 对于按需加载的内容（例如，当用户滚动到页面的某一部分时），可以使用 Intersection Observer API 来监听元素是否进入视口，并在该时刻加载相应的脚本。
   • 示例代码：

     let observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {// 加载脚本let script = document.createElement('script');script.src = 'example.js';document.body.appendChild(script);observer.unobserve(entry.target); // 取消观察}});
     });
     observer.observe(document.querySelector('.lazy-load-script'));
     

5. 模块化和代码分割：

   • 在现代JavaScript开发中，可以使用模块化工具（如 Webpack）进行代码分割。根据路由或者组件的需求来加载必要的JavaScript代码，这样可以确保只有需要的代码被加载，提高性能。

6. preload 和 prefetch：

   • preload 提示浏览器尽早开始加载资源，但并不立即执行；prefetch 则是提示浏览器在空闲时间预取可能会在未来使用的资源。它们都可以帮助优化加载策略，但不是严格意义上的延迟加载。
   • 语法：<link rel="preload" href="example.js" as="script"> 或 <link rel="prefetch" href="example.js">

7. 服务端渲染 (SSR) 和客户端水合作用 (hydration)：

   • 对于使用框架如React, Vue, Angular的应用程序，可以通过服务端渲染生成静态HTML，并在客户端进行水合作用（即应用JavaScript行为）。这种方式可以让用户更快看到页面内容，同时保证交互性。

选择哪种方法取决于具体的场景和需求。对于大多数情况，defer 和 async 是最简单且有效的解决方案。而对于更复杂的场景，可能需要结合多种技术来实现最佳的性能。