Javascript:是否有任何方法可以检测所有异步脚本何时加载?

Javascript: Is there any way to detect when all async scripts have loaded?

本文关键字：异步 脚本 何时 加载 检测 是否 任何 方法 Javascript      更新时间：2023-09-26

如果在HTML页面上使用普通脚本标记，则在脚本下载并解析之前，呈现将被阻止。为了避免这种情况，为了更快地显示页面，您可以添加'async'属性，该属性告诉浏览器继续处理页面，而不必等待脚本。然而，这本质上意味着引用该脚本中的任何内容的其他javascript可能会崩溃，因为它所需的对象还不存在。

据我所知，没有allscriptloaded事件可以绑定，所以我正在寻找方法来模拟一个。

我知道以下策略延迟运行其他代码，直到异步脚本可用:

  • 对于单个脚本，使用它们的'onload'事件或属性。但是，如果有多个脚本，我知道没有内置的方法来告诉所有脚本何时加载。
    • 运行附加到窗口的onload事件处理程序中的所有依赖代码。但是，它们也会等待所有的图像，而不仅仅是所有的脚本，所以运行的时间要晚一些。
  • 使用加载器库加载所有脚本;这些通常提供了一个回调，当一切都已加载时运行。缺点(除了需要一个库来完成这一点，它必须提前加载)是，所有代码都必须包装在一个(通常是匿名的)函数中，您将该函数传递给加载器库。这是相反的，只是创建一个函数运行时，我的神话的allscriptloaded火灾。

是我错过了什么，还是这是最先进的技术?

您所希望的最好情况是知道是否有任何未完成的异步调用(XMLHttpRequest, setTimeout, setInterval, setimmedium, process)。nextTick, Promise)，然后等待没有。然而，这是底层本机代码丢失的实现细节——javascript只有自己的事件循环，异步调用被传递给本机代码，如果我理解正确的话。最重要的是，您无法访问事件循环。你只能插入，你不能读取或控制流(除非你在io.js中并且感觉很兴奋)。

模拟的方法是自己跟踪脚本调用，并在所有脚本完成后调用。(例如，跟踪每次在事件循环中插入相关脚本的时间。)

但是DOM并没有提供NoAsyncPending全局变量，这才是你真正需要的

相关文章：