HTML <脚本defer>能在< async>之前执行吗？

Question

我正在问一个问题，这个问题已经得到了很好的探索，我的问题有很多相近的答案，但我还没有找到一个简单问题的确切答案。

我理解延迟脚本按照它们在页面上出现的顺序运行，但只在DOM构建之后才运行，并且我尽可能地让异步脚本运行，而且我知道没有一个阻止HTML解析器。

问题是:在所有异步脚本执行之前，是否存在延迟脚本可以执行的情况？本质上，如果HTML解析器已经解析了整个文档并准备好运行延迟脚本，但仍然有一些异步脚本尚未加载，那么它会等待这些异步脚本加载(并执行)，还是会运行延迟脚本？

谢谢!

Answer 1

从一个非常简单的测试来看，defer似乎没有等待async脚本加载.但是(总是有一个但是)它似乎也取决于浏览器。

我在Chrome 41、Firefox 36和Internet 11上进行了测试，对Chrome和FF ( defer在async之前执行)得到了相同的结果，但在IE上得到了不同的结果(async总是在defer之前执行)。

如果IE忽略了async属性(解析并立即执行代码)，这可以解释，但是根据W3Schools和MDN，IE10支持async。因此，我猜IE以与其他浏览器不同的方式处理异步调用，使它在分析整个页面之前(然后在延迟脚本之前运行)加载和执行得更快。

这是我用于测试的HTML代码：

<!doctype html>
<html>

    <head>
        <title>Test</title>
        <script type="text/javascript" src="./async.js"></script>
        <script type="text/javascript" src="./defer.js"></script>
    </head>

    <body>
        Testing
    </body>

</html>

现在，async.js的内容：

console.log("async");

以及defer.js的内容：

console.log("defer");

如果我运行它“如实”，控制台的结果是：

异步 延时

这是预期的，因为脚本在浏览器继续解析页面之前立即执行。

现在让我们来看看async和defer，看看结果：

代码：

<script type="text/javascript" src="./defer.js" defer></script>
<script type="text/javascript" src="./async.js" async></script>

结果：

延时 异步

注意:这是Chrome和Firefox的结果；对于IE，控制台是异步的，然后推迟

Defer.js在async.js之前执行。但这可能是因为async.js在后面的代码中被放置，所以让我们交换它们。

代码：

<script type="text/javascript" src="./async.js" async></script>
<script type="text/javascript" src="./defer.js" defer></script>

结果：

延时 异步

注意:这是Chrome和Firefox的结果；对于IE，控制台是异步的，然后推迟

Defer.js仍然在async.js之前执行，即使以前已经调用了async.js。因此，回答您的问题：是的，在加载和解析所有异步脚本之前，会有延迟脚本执行的情况。

代码：

<script type="text/javascript" src="./async.js"></script>
<script type="text/javascript" src="./defer.js" defer></script>

或

<script type="text/javascript" src="./defer.js" defer></script>
<script type="text/javascript" src="./async.js"></script>

结果：

异步 延时

这个结果是预期的，因为在本例中，async.js将立即执行，并推迟等待页面解析(即使交换script位置，我们也会得到相同的结果)。

最后，测试在没有异步/延迟的异步脚本之前调用的异步脚本(不需要反过来测试，因为它将在调用异步之前立即执行)：

代码：

<script type="text/javascript" src="./async.js" async></script>
<script type="text/javascript" src="./defer.js"></script>

结果：

延时 异步

Answer 2

是的，理论上，具有async属性的脚本在具有defer脚本的脚本之后执行是可能的。您应该相应地对脚本进行编程。

即使在实践中没有出现这种情况，您仍然应该按照这种期望编写脚本，因为规范并不保证async脚本将在defer脚本之后执行，因此浏览器可以自由地以这种方式实现执行。