文档头中的脚本是否总是在 DOMContentLoaded 触发之前执行？答案

【问题标题】：Do scripts in the document head always execute before DOMContentLoaded fires?文档头中的脚本是否总是在 DOMContentLoaded 触发之前执行？
【发布时间】：2018-09-29 10:08:45
【问题描述】：

在下面的文档中，

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

example.js 在哪里：

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

日志语句是否保证执行？

【问题讨论】：

你在问什么？您的标题和问题正文是两个不同的问题。
@Xufox 我很困惑。当且仅当“保证执行日志语句”时，“文档头部中的脚本总是在 DOMContentLoaded 触发之前执行”不是这种情况吗？
除非您添加async 或defer 属性，否则example.js 文件将在正文开始渲染之前加载......因此DOMContentLoaded 事件...... . 这将登录到控制台
从这里向下滚动一点，会有一个综合图表：html.spec.whatwg.org/multipage/scripting.html#script
@ChrisMartin 哦，你关心DOMContentLoaded事件是否总是在定义事件监听器之后发生？我将“是否保证执行日志语句？”解释为“保证DOMContentLoaded完全触发？”。

标签： javascript dom domcontentloaded

【解决方案1】：

根据MDN，

当初始 HTML 文档完全加载和解析时触发 DOMContentLoaded 事件，无需等待样式表、图像和子框架完成加载。

注意：同步 JavaScript 会暂停解析 DOM。

在您的情况下，您引用外部 Javascript 文件的方式被视为同步，即它将在解析之后的元素之前被获取和加载。

所以，答案是，是的，它会一直执行——只要外部 JS 文件对浏览器可用。

如果您已指示浏览器应尝试异步下载脚本（通过将 async attribute 设置为 true），则该事件可能会或可能不会触发您注册的回调。

【讨论】：

【解决方案2】：

是的，请参阅MDN: : The Script element

在浏览器继续解析页面之前，会立即获取并执行没有 async 或 defer 属性的脚本以及内联脚本。

文档直到结束才会被完全解析，当遇到script标签时，它会停止解析并等待脚本下载（如果需要）并运行后再继续。

这很糟糕——你不想延迟页面被解析和呈现。最好给你的脚本标签一个defer（或async）属性——这样，它会在解析完成后自动运行而不会阻塞，也不需要你将整个脚本包装在一个DOMContentLoaded监听器中。

【讨论】：