异步脚本保证会在页面的load事件前执行，但可能会在DOMContentLoaded之前或之后

原创已于 2023-12-31 20:50:08 修改 · 541 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2022-02-22 19:46:12 首次发布

Javascript(Promise/asyncAwait) 专栏收录该内容

377 篇文章

订阅专栏

本文介绍了JavaScript异步脚本的执行原理，它们在页面加载过程中的行为以及如何确保在所有异步脚本加载完毕后执行特定代码。通过示例代码展示了利用DOMContentLoaded事件和Promise.all等待异步脚本加载完成的方法，强调了异步脚本可能在DOMContentLoaded事件之前或之后执行，因此需要谨慎处理依赖于DOM状态的脚本。同时，还讨论了异步脚本与页面性能的关系，以及良好的Web开发实践建议。

异步脚本是一种JavaScript脚本，它们可以在页面的加载过程中并行执行，这意味着它们不会阻塞页面的加载过程。为了实现这一点，异步脚本使用HTML的<script>标签，并将async属性设置为true。
异步脚本的执行时间是不确定的，因为它们会与其他并行加载的资源（如图片、CSS文件等）一起被加载。所以，虽然异步脚本可以在页面的load事件之前执行，但它们可能会在DOMContentLoaded事件之前或之后执行。
这意味着，如果你希望在DOM完全加载后执行某些操作，使用异步脚本可能不是最佳选择，因为这些操作可能会在DOMContentLoaded事件之前就执行。在这种情况下，你应该使用DOMContentLoaded事件或等待所有异步脚本都加载完毕后再执行你的代码。
这是一个示例，说明如何等待所有异步脚本加载完毕：

let asyncScripts = [].slice.call(document.getElementsByTagName('script')).filter(s => s.async);
let asyncScriptPromises = asyncScripts.map(s => new Promise(resolve => {
  s.onload = resolve;
}));
Promise.all(asyncScriptPromises).then(() => {
  // 这里的代码会在所有异步脚本都加载完毕后执行
});
```在继续编写之前，让我们先了解一下这个任务的背景和要求。您提供了一个开头，提到了异步脚本的执行时间是不确定的，可能会在DOMContentLoaded之前或之后执行。您希望在所有异步脚本都加载完毕后执行某些代码。
基于这个要求，我们可以使用JavaScript的Promise和DOMContentLoaded事件来实现。以下是一个可能的实现方式：
```javascript
// 创建一个新的 Promise 对象
let allAsyncScriptsLoaded = new Promise(resolve => {
  // 使用 DOMContentLoaded 事件来等待所有异步脚本加载完毕
  document.addEventListener('DOMContentLoaded', () => {
    // 获取所有的异步脚本元素
    let asyncScripts = [].slice.call(document.getElementsByTagName('script')).filter(s => s.async);
    // 检查是否所有的异步脚本都加载完毕
    if (asyncScripts.length === 0) {
      // 如果所有的异步脚本都加载完毕，则执行 resolve() 方法，解决 Promise
      resolve();
    }
  });
});
// 使用异步函数等待所有异步脚本加载完毕
async function waitForAsyncScripts() {
  await allAsyncScriptsLoaded;
  // 在这里编写需要在所有异步脚本加载完毕后执行的代码
  console.log('所有异步脚本已加载完毕');
}
// 调用函数开始等待异步脚本加载
waitForAsyncScripts();

这个代码片段创建了一个新的Promise对象，使用DOMContentLoaded事件来等待所有异步脚本加载完毕。当所有的异步脚本都加载完毕时，Promise会被解决，然后在waitForAsyncScripts函数中编写需要在所有异步脚本加载完毕后执行的代码。通过调用waitForAsyncScripts函数，您可以开始等待异步脚本的加载。当然可以，以下是对代码的进一步扩展，添加了一些更复杂的逻辑和功能：

// 创建一个新的 Promise 对象
let allAsyncScriptsLoaded = new Promise(resolve => {
  // 使用 DOMContentLoaded 事件来等待所有异步脚本加载完毕
  document.addEventListener('DOMContentLoaded', () => {
    // 获取所有的异步脚本元素
    let asyncScripts = [].slice.call(document.getElementsByTagName('script')).filter(s => s.async);
    // 检查是否所有的异步脚本都加载完毕
    if (asyncScripts.length === 0) {
      // 如果所有的异步脚本都加载完毕，则执行 resolve() 方法，解决 Promise
      resolve();
    } else {
      // 如果还有异步脚本未加载完毕，则每隔100毫秒检查一次
      setInterval(() => {
        let remainingScripts = [].slice.call(document.getElementsByTagName('script')).filter(s => s.async && !s.complete);
        if (remainingScripts.length === 0) {
          // 如果所有的异步脚本都加载完毕，清除定时器并执行 resolve() 方法
          clearInterval(intervalId);
          resolve();
        }
      }, 100);
    }
  });
});
// 使用异步函数等待所有异步脚本加载完毕
async function waitForAsyncScripts() {
  await allAsyncScriptsLoaded;
  // 在这里编写需要在所有异步脚本加载完毕后执行的代码
  console.log('所有异步脚本已加载完毕');
  
  // 例如，您可以在这里执行其他异步操作，例如获取数据或发起网络请求。
  // 假设我们有一个获取数据的函数 fetchData()，它返回一个Promise。
  let data = await fetchData();
  console.log('数据已获取:', data);
}
// 假设 fetchData() 是一个获取数据的函数，它返回一个Promise。
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('数据已获取!'); // 这里只是一个模拟数据获取的示例，实际情况下您可能需要发起网络请求。
    }, 2000); // 假设数据获取需要2秒。
  });
}
// 调用函数开始等待异步脚本加载
waitForAsyncScripts();

这个扩展的代码在异步脚本加载完毕后增加了获取数据的操作，模拟了一个常见的异步任务。请注意，这只是一个示例，您可能需要根据您的实际需求进行修改。
HTML5为

html>
<html>
  <head>
  <title>Example HTML Page</title>
  <script async src="example1.js"></script>
  <script async src="example2.js"></script>
  </head>
  <body>
  <!--这里是页面内容-->
  </body>
</html>

在这个例子中，第二个脚本可能先于第一个脚本执行。因此，重点在于它们之间没有依赖关系。给脚本添加async属性的目的是告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。正因为如此，异步脚本不应该在加载期间修改DOM。
异步脚本保证会在页面的load事件前执行，但可能会在DOMContentLoaded之前或之后。Firefox 3.6、Safari 5和Chrome 7支持异步脚本。使用async也会告诉页面你不会使用document.write，不过好的Web开发实践根本就不推荐使用这个方法。注意　对于XHTML文档，指定async属性时应该写成async=“async”。
在这里插入图片描述