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

Question

在下面的文档中，

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

其中 example.js 是：

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

日志语句是否保证执行？

Answer 1

根据MDN，

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

Note: Synchronous JavaScript pauses parsing of the DOM.

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

所以，答案是，是的，它将始终执行 - 只要外部 JS 文件对浏览器可用。

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

Answer 2

是的，见MDN: : The Script element

Scripts without async or defer attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.

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

虽然这很糟糕 - 您不想延迟页面的解析和呈现。最好给你的脚本标签一个 defer （或 async）属性 - 这样，一旦解析完成它就会自动运行而不会阻塞，并且不需要你包装你的DOMContentLoaded 侦听器中的整个脚本。

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

Do scripts in the document head always execute before DOMContentLoaded fires?

javascript

dom

domcontentloaded