javascript - 文档头中的脚本是否总是在 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');
});

日志语句是否保证执行？

score 2 · Accepted Answer

根据MDN，

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

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

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

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

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

score 0 · Accepted Answer

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

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

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

2 回答 2