我是在问一个问题，这个问题已经被很好地探索，并且对我的问题有很多接近答案，但是我一直无法找到一个简单问题的确切答案。
我知道延迟脚本按照它们在页面上显示的顺序运行，但是仅在构建DOM之后才运行，而且我知道异步脚本会尽快运行，而且我知道没有一个会阻止HTML解析器。
问题是：在所有异步脚本执行完毕之前，是否可以执行延迟脚本？本质上，如果HTML解析器已解析了整个文档并准备运行延迟脚本，但仍有一些异步脚本尚未加载，它将等待这些异步脚本加载（并执行），还是将其运行延迟脚本？
谢谢！
从一个非常简单的测试来看，似乎defer并没有等待async脚本加载...但是（总是有一个but）似乎也取决于浏览器。
我在Chrome 41，Firefox 36和Internet Explorer 11上进行了测试，并且Chrome和FF的结果相同（defer执行之前async），而IE上的结果却不同（async始终执行之前defer）。
如果IE忽略该async属性（立即解析和执行代码），则可以解释这一点，但是根据W3Schools和MDN的说法，asyncIE10支持该属性。因此，我猜想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将立即执行，并且defer等待页面解析（即使交换script位置，我们也会得到相同的结果）。
最后测试没有异步/延迟的异步脚本（无需测试另一种方法，因为它将在调用异步之前立即执行）：
码：
<script type="text/javascript" src="./async.js" async></script>
<script type="text/javascript" src="./defer.js"></script>
结果：
延迟
异步
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句