为什么它显示延迟为异步，异步显示为延迟？把“多姆分析事件”说对了！但没有吗？

Question

我有一个加载程序，希望学习异步和延迟时间。它是一个动态插入的外部脚本标记--没有内联延迟。

一开始，我与理解异步为何表现为延迟(在DOMContentLoaded之后执行)进行了斗争。

使用2000个DOM元素，异步启动显示它可以在DOMContentLoaded之前执行。它是从本地硬盘装载的。通过从主机获取，在等待响应的同时执行脚本异步就更有意义了。这样就行了。

然后我改变了测试延迟和超价。现在，我要反驳为什么延迟在DOMContentLoaded之前作为异步执行的行为的笑话！

由于100000个DOM元素花费了30多个时间，所以脚本的执行仍然发生在DOMContentLoaded之前。怎么啦？

这是我测试过的相关部件..。

loader.js

window.addEventListener('DOMContentLoaded', function() {
  console.log("DOMContentLoaded");
});


  var s = document.head.appendChild(document.createElement('script'))
//  s.async = true; s.defer = false;
  s.async = false; s.defer = true;
  s.src = "script.js"
  console.log("Fetch script");

script.js

console.log("Execute script");

index.html

<html>
  <head>
    <script src="loader.js"></script>
  </head>
  <body>

    <script>  window.ti = performance.now() </script>

    --- put here every html you can find ---

    <script>
      var n = document.getElementsByTagName('*').length
      var t = parseInt(performance.now() - ti) / 1000
      document.write("<br>Parsed " + n + " elements in " + t + " s ")
    </script>

  </body>
</html>

FF和Chrome中的控制台

Fetch script
Execute script
DOMContentLoaded

延迟脚本永远不应该在DOM准备好使用之前执行。

现在，我们有了一个例子，在DOM出现之前，DOMContentLoaded会在屏幕上触发。多么?

编辑#1

小心DOMContentLoaded -我想要“多姆内容分析”！

(这就是代码中的错误--或者说在我的脑海中)

一次更正(感谢尖刻)-用我的话说.

延迟脚本在dom解析后执行，但dom仍在加载。当完成延迟脚本和最终事件时，DOMContentLoaded会触发。

所以我需要某种"DOMContentParsed“。我发现的最好的是readystatechange事件和document.readyState。

让我们用以下行扩展loader.js：

s.onload = function(){ console.log(document.readyState) }

它在Chrome和Firefox控制台上显示了足够的dom：

Fetch script
Execute script
loading
DOMContentLoaded

这意味着在DOM正在加载执行时执行延迟脚本！是的，是的-它正在装货，直到DOMContentLoaded。遗憾的是，readyState没有说出多玛何时被解析！我也试过..。

document.addEventListener('readystatechange', function() {
  console.log(">>" + document.readyState); 
});

这不会触发“加载”，因为它已经启动了，但是它在延迟加载脚本之后说“交互式”，并在DOMContentLoaded所在的地方说“完成”(它们是相同的吗？)它没有更多的话要说。

我没有解析时触发的方法或事件的idéa。它必须在继续加载其他东西之前，在其他时间之前得到一个正确的时间标记！

没什么好找的了！在生活水平-最后更新日期为2019年4月15日第12.2.7节的第一点结束(甚至是标题与我开玩笑)之前，没有什么更多的了:在任何脚本之前，应该进行“交互式”的是readystatechange，但实际上并非如此。为什么？

对我来说，似乎readyState在本地index.html上有一个大于2000个元素的bug，因为我可以在它说“交互式”之前执行一个延迟脚本。现在，当将该readyState也放入脚本中时(我忘记了)，并且它写着“加载”，这意味着在执行时仍然有一个大的html正在加载：

script.js

console.log("Execute script " + document.readyState);

结论：有时延迟行为为异步行为，异步为延迟行为

Answer 1

defer属性在脚本元素的MDN页面上的定义

此布尔属性设置为向浏览器指示脚本打算在解析文档之后执行，但在触发DOMContentLoaded之前执行。 带有延迟属性的脚本将防止DOMContentLoaded事件触发，直到脚本加载并完成计算。

你看到的是你想要的行为。