资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

如何实现js异步加载

创作时间:

作者:

@小白创作中心

如何实现js异步加载

引用

来源

https://docs.pingcode.com/baike/2473163

JavaScript异步加载是前端开发中优化网页性能的重要技术手段。本文详细介绍了五种实现JS异步加载的方法，包括使用async和defer属性、动态创建script标签、使用回调函数、使用Promise以及结合AJAX。每种方法都有其特点和适用场景，可以帮助开发者根据具体需求选择最适合的方案。

实现JS异步加载的方法包括：利用async和defer属性、动态创建script标签、使用回调函数、使用Promise、结合AJAX。下面将详细解释其中一种方法：利用async和defer属性。这两个属性都用于非阻塞加载脚本，但它们在加载和执行顺序上有所不同。async属性表示脚本会在后台异步加载，并在加载完成后立即执行。defer属性则保证脚本在页面解析完毕后才会执行，且多个带有defer属性的脚本会按顺序执行。以下是详细的实现和其他方法的介绍。

一、利用async和defer属性

1. async属性

使用
async
属性可以让脚本在后台加载，不会阻塞页面的解析。如下所示：

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

当使用
async
属性时，浏览器会在继续解析HTML文档的同时请求该脚本。一旦脚本加载完毕，浏览器会立即停止解析HTML，执行脚本。需要注意的是，多个带有
async
属性的脚本的执行顺序并不固定，因为它们是并行加载的。

2. defer属性

使用
defer
属性可以确保脚本在HTML文档解析完成后执行，并且多个带有
defer
属性的脚本会按顺序执行。如下所示：

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

当使用
defer
属性时，浏览器会在解析HTML文档的同时请求该脚本，但不会立即执行，直到文档完全解析完毕。多个带有
defer
属性的脚本会按照它们在文档中的顺序依次执行。

二、动态创建script标签

动态创建
script
标签也是一种常见的异步加载JS的方法。这种方法允许你在运行时根据需要加载脚本。以下是实现方法：

  
function loadScript(url, callback) {
  
  var script = document.createElement('script');  
  script.type = 'text/javascript';  
  script.src = url;  
  script.onload = function() {  
    callback();  
  };  
  document.head.appendChild(script);  
}  
loadScript('example.js', function() {  
  console.log('Script loaded and executed.');  
});

在这个例子中，我们创建了一个新的
script
标签，并将其插入到文档的
head
中。
onload
事件会在脚本加载完成并执行后触发，从而调用回调函数。

三、使用回调函数

回调函数是一种在异步操作完成后执行的函数。通过将回调函数传递给异步操作，可以确保在脚本加载完成后执行特定的操作。以下是一个示例：

  
function loadScript(url, callback) {
  
  var script = document.createElement('script');  
  script.type = 'text/javascript';  
  script.src = url;  
  script.onload = function() {  
    callback();  
  };  
  document.head.appendChild(script);  
}  
function scriptLoaded() {  
  console.log('Script loaded and executed.');  
}  
loadScript('example.js', scriptLoaded);

在这个例子中，当脚本加载完成后，
scriptLoaded
函数会被调用。

四、使用Promise

Promise是一种用于处理异步操作的现代JavaScript特性。通过使用Promise，可以更优雅地处理异步加载脚本的情况。以下是一个示例：

  
function loadScript(url) {
  
  return new Promise(function(resolve, reject) {  
    var script = document.createElement('script');  
    script.type = 'text/javascript';  
    script.src = url;  
    script.onload = function() {  
      resolve();  
    };  
    script.onerror = function() {  
      reject(new Error('Script load error'));  
    };  
    document.head.appendChild(script);  
  });  
}  
loadScript('example.js').then(function() {  
  console.log('Script loaded and executed.');  
}).catch(function(error) {  
  console.error(error);  
});

在这个例子中，我们创建了一个返回Promise的
loadScript
函数。使用Promise可以更简洁地处理成功和失败的情况。

五、结合AJAX

AJAX（Asynchronous JavaScript and XML）可以用于异步请求和加载脚本。以下是一个示例：

  
function loadScript(url, callback) {
  
  var xhr = new XMLHttpRequest();  
  xhr.open('GET', url, true);  
  xhr.onreadystatechange = function() {  
    if (xhr.readyState === 4 && xhr.status === 200) {  
      var script = document.createElement('script');  
      script.type = 'text/javascript';  
      script.text = xhr.responseText;  
      document.head.appendChild(script);  
      callback();  
    }  
  };  
  xhr.send();  
}  
loadScript('example.js', function() {  
  console.log('Script loaded and executed.');  
});

在这个例子中，我们使用XHR（XMLHttpRequest）对象来异步请求脚本内容，然后将其插入到文档中并执行。

六、结论

实现JS异步加载的方法多种多样，每种方法都有其优缺点和适用场景。利用async和defer属性是最简单直接的方法，适用于大多数情况。动态创建script标签和使用回调函数提供了更大的灵活性，适用于需要在运行时动态加载脚本的情况。使用Promise则提供了一种更加现代化和优雅的异步处理方式。结合AJAX则适用于需要在加载脚本之前进行一些预处理或验证的情况。

无论选择哪种方法，都需要根据具体的需求和场景来决定。希望通过本文的介绍，能够帮助你更好地理解和实现JS异步加载。