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，

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

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

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

因此，只要外部JS文件可供浏览器使用，答案就是，是的，它将始终执行。

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

Answer 2

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

文档在结束之前不会被完全解析，当它遇到script标记时，它将停止解析并等待脚本下载（如果需要）并在继续之前运行。< / p>

这非常糟糕 - 你不想让页面延迟被解析和渲染。最好给脚本标记一个defer（或async）属性 - 这样，一旦解析完成而没有阻塞，它将自动运行，并且不需要你将整个脚本包装在一个DOMContentLoaded监听器。