Javascript：有没有办法检测所有异步脚本何时加载？ [英] Javascript: Is there any way to detect when all async scripts have loaded?

问题描述

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

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

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

• 单个脚本，使用他们的'onload'事件或属性。但是，如果有多个脚本已经加载，那么就没有内置的方法来告诉所有脚本。


• 在附加到窗口的onload事件处理程序中运行所有相关代码。但是，那些等待所有图像的人，不仅仅是所有脚本，所以运行时间要晚于理想状态。


• 使用加载程序库加载所有脚本;那些通常提供回调以在所有内容都已加载时运行。下行（除了需要一个库来执行此操作，必须提前加载），所有代码都必须包含在一个（通常是匿名的）函数中，并传递给加载器库。这与创建一个在mythical allScriptsLoaded激活时运行的函数相反。

我错过了什么，或者是你知道最好的异步调用（XMLHttpRequest，setTimeout， setInterval，SetImmediate，process.nextTick，Promise），等待那里不是一个。但是，这是底层本机代码丢失的实现细节 - javascript只有自己的事件循环，如果我理解正确，异步调用将传递给本机代码。最重要的是，您无权访问事件循环。你只能插入，你无法读取或控制流量（除非你在io.js和感觉很活泼）。

模拟一个的方法是自己跟踪你的脚本调用，然后调用在所有脚本完成之后。 （即，每次将相关脚本插入事件循环时进行跟踪。）

但是，DOM不提供NoAsyncPending全局或其他东西，这是什么你真的需要。

If you use plain script tags on an HTML page, rendering is blocked until the script has been downloaded and parsed. To avoid that, for faster page display, you can add the 'async' attribute, which tells the browser to continue processing down the page without waiting for that script. However, that inherently means that other javascript that refers to anything in that script will probably crash, because the objects it requires don't exist yet.

As far as I know, there's no allScriptsLoaded event you can tie into, so I'm looking for ways to simulate one.

I'm aware of the following strategies to defer running other code until an async script is available:

• For a single script, use their 'onload' event or attribute. However, there's no built-in way I know of to tell when ALL scripts have loaded if there's more than one.
• Run all dependent code in onload event handlers attached to the window. However, those wait for all images too, not just all scripts, so the run later than would be ideal.
• Use a loader library to load all scripts; those typically provide for a callback to run when everything has loaded. Downside (besides needing a library to do this, which has to load early), is that all code has to wrapped in a (typically anonymous) function that you pass into the loader library. That's as opposed to just creating a function that runs when my mythical allScriptsLoaded fires.

Am I missing something, or is that the state of the art?

解决方案

The best you could hope for would be to know if there are any outstanding async calls (XMLHttpRequest, setTimeout, setInterval, SetImmediate, process.nextTick, Promise), and wait for there to not be one. However, that is an implementation detail that is lost to the underlying native code--javascript only has its own event loop, and async calls are passed off to the native code, if I understand it correctly. On top of that, you don't have access to the event loop. You can only insert, you can't read or control flow (unless you're in io.js and feeling frisky).

The way to simulate one would be to track your script calls yourself, and call after all script are complete. (i.e., track every time you insert a relevant script into the event loop.)

But yeah, the DOM doesn't provide a NoAsyncPending global or something, which is what you'd really require.

这篇关于Javascript：有没有办法检测所有异步脚本何时加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！