Question

我的页面上有一个脚本，大部分时间都在工作，但并不总是如此，我想知道原因。

此脚本通过以下方式导入：

<script src="script.js" async></script>` tag in `<head>

脚本的内容是：

console.log("loading"); // always gets printed
document.addEventListener("DOMContentLoaded", function() {
    console.log("outer"); // sometimes get not printed
    (function() {
        console.log("inner"); // sometimes get not printed
    })();
});

浏览器控制台始终输出loading，但有时它不输出其余内容（outer和inner）。在页面上进行硬刷新或者只是重新加载它（在地址栏上点击Enter）似乎不会影响这种行为（每种方式都有相同的结果）。

我还要补充一点，outer和inner总是按对打印，没有另一个没有。

我在听DOMContentLoaded的方式有问题吗？或者我是否必须在<head>之外加载脚本（如果可能的话我不想这样做）？

Answer 1

无论是否已加载DOM内容，只要加载代码，就会执行

async脚本标记。所以一般情况下，不要将它用于与DOM相关的操作。

相反，如果您希望加载文件但仅在DOMContentLoaded之后执行代码，请使用defer属性。在这种情况下，您不需要在代码中使用事件监听器：

_{图片来源：http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/}

但请注意defer is buggy in IE9 and below.

Answer 2

你的脚本在之后执行了触发了DOMContentLoaded事件，因此设置一个监听器为时已晚。

DOMContentLoaded上的事件侦听器随机触发

2 个答案: