文档头部脚本是否总在DOMContentLoaded前执行？特定代码执行确定性问询

问题1：文档头部的脚本是否总会在DOMContentLoaded事件触发之前执行？ #

其实不能直接说“总会”，得分不同的脚本类型和属性情况来看：

• 内联脚本（无src属性）：正常情况下，浏览器解析到头部的内联脚本时，会立刻暂停HTML解析流程，先执行这段脚本。这时候DOM还在构建过程中，所以脚本肯定会在DOMContentLoaded事件触发前完成执行。
• 外部脚本（带src属性）：
  • 若脚本没有加async或defer属性：浏览器会暂停HTML解析，先下载脚本文件，下载完成后立即执行，这个过程是在DOMContentLoaded之前完成的。
  • 若脚本加了defer属性：脚本会异步下载，但会特意等到DOMContentLoaded事件触发之前才执行，所以也符合“在事件前执行”的情况。
  • 若脚本加了async属性：脚本是异步下载，下载完成后就立刻执行，这时候就不一定了——如果脚本下载速度特别快，可能DOM还没构建完，就在事件前执行；但如果DOM构建得快，脚本下载完时DOM已经就绪，那脚本就会在DOMContentLoaded之后执行。

问题2：给定代码中的console.log('hello')是否能保证被执行？ #

先看一下你给出的代码：
页面代码：

<!doctype html>
<html>
<head>
<script language="javascript" src="example.js"></script>
</head>
<body>
</body>
</html>

example.js内容：

document.addEventListener('DOMContentLoaded', function () {
  console.log('hello');
});

答案是：只要example.js成功加载并执行，这段console.log就一定能被执行。

原因很简单：这个外部脚本没有加async或defer，所以浏览器会按顺序解析HTML，遇到这个脚本时暂停解析，先下载并执行example.js里的代码——这时候我们成功给DOMContentLoaded注册了一个监听回调。而DOMContentLoaded事件的触发条件是整个DOM树构建完成，哪怕body是空的，html、head、body这些节点也已经被正确构建，所以这个事件一定会触发，对应的回调函数也就会被调用，console.log自然会输出'hello'。

唯一的例外情况是：如果example.js因为网络故障、文件不存在等原因加载失败，那这段注册监听的代码根本没机会执行，自然不会输出。但只要脚本加载成功，就可以保证执行。

内容的提问来源于stack exchange，提问作者Chris Martin