我们何时可以使用异步？

Question

异步脚本加载是我现在正在学习的内容。我对脚本标记中的async attr有疑问 - <script async src="...">。

这里有一些信息，http://www.w3schools.com/tags/att_script_async.asp我的问题是关于这个 - 当存在时，它指定脚本一旦可用就会异步执行。 line。

问题： 如果我有2个脚本：

<script async src="url1.js"><script> // 200kb
<script async src="url2.js"><script> // 2kb

并且第二个script必须先执行（它使用了一些Objects或functions） - 页面加载后会是这样吗？首先在加载后首先执行脚本，然后 - 第二个，或不是？

从上面的粗体字符串开始 - 我理解这一点，加载script比加快速度 - 执行得越快，在我们的例子中我们会有错误，而第一个script则没有t加载并执行，但第二个已经尝试得到它。 （当我们可以使用async脚本加载时？只有当我们的脚本不是彼此独立的时候？）

P.S。 lazy loading script是获得正确脚本执行顺序的唯一方法 - 防止错误？

Answer 1

如果url2.js依赖于url1.js你不能对脚本文件使用异步加载，则必须使用同步（急切加载）以确保在url2.js之前加载并执行url1.js。

可以使用异步两种情况：

1. url1.js加载并执行然后url2.js加载并执行。这是可以的，因为url1将为url2做好准备。
2. url2.js加载并执行然后url1.js加载并执行。这将失败，因为url2依赖于url1，而url2在url2时尚未就绪。

使用非异步加载只能出现一种情况，即在url2.js加载和执行之前加载和执行url1.js，如果它们相互依赖则需要这些。

在异步加载中，您无法控制它们何时被执行，它们会在加载后立即执行。

Answer 2

如果没有async属性，浏览器将停止处理页面并首先下载引用的脚本;下载并执行脚本后，它将继续处理页面上的下一个标记。这有两个后果：

1. 保证所有脚本按照它们包含在HTML中的顺序加载，并确保依赖关系正确解析。
2. 如果早期包含这些脚本，页面加载会明显延迟。应始终在页面末尾包含同步脚本，以免让访问者不必要地等待。

如果您设置了async属性，浏览器将继续加载页面而不会停止处理script标记，并会在稍后的某个时间加载脚本。何时加载脚本是未定义的，您不能依赖于任何特定的执行顺序。如果你有两个脚本之间的依赖关系，你就不能加载它们async，因为那么一个人是否会在另一个脚本之前加载它是真正的运气。

因此，async加载仅对没有其他依赖项的脚本有用。 或者： 您将脚本挂钩到window.onload事件，并避免在此之前进行任何交叉引用;加载所有脚本后将触发该事件，包括async脚本。

Answer 3

我们之前有过类似的问题。

Script Tag - async & defer

关于执行的顺序，JavaScript执行按照它们放在HTML中的顺序发生。如果您的页面依赖于某些事件的JavaScript，并且如果在您的Page之前加载了JS方法，那么它们将导致JS错误。

我建议你尽可能使用CallBack函数来避免上述错误。 Here是开始了解CallBack函数以及如何实现它们的好地方。