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

JavaScript 的延迟加载是指推迟页面加载时的 JavaScript 文件加载和执行，以优化页面加载性能。以下是几种 JavaScript 延迟加载的方式：

1. defer 属性：

使用 <script> 标签的 defer 属性可以延迟 JavaScript 文件的加载和执行，使得脚本在 HTML 解析完毕后执行。

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

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

使用 JavaScript 动态创建 <script> 标签，并将其添加到文档中，可以控制脚本的加载和执行时机。

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

3. async 属性（异步加载）：

async 属性用于异步加载脚本，在加载过程中不会阻止页面的解析和渲染，并行加载多个脚本。

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

4. 使用动态引入的 import()：

在现代浏览器中，可以使用 ES6 的动态引入语法 import() 来延迟加载模块，这也会异步加载模块并返回一个 Promise。

import('example.js')
  .then(module => {
    // 模块加载成功后的处理
  })
  .catch(err => {
    // 加载失败的处理
  });

注意事项：

• defer 属性和动态创建 <script> 标签会保证脚本的执行顺序与页面中出现的顺序一致，但 async 属性和动态引入的 import() 则不一定保证顺序。

选择适当的延迟加载方式取决于项目的需求和性能优化的目标。常见的场景是将不影响页面加载首屏内容的 JavaScript 脚本进行延迟加载，以提升页面加载性能。

Was this helpful?

YesNo

0 / 0