外部文件中的JavaScript在脚本标记'；s onload事件

我已经读到，

defer

不一定会延迟外部脚本的加载，但它会一直延迟到HTML被解析之后

作为一个实验，我在一个包含jQuery的文件的底部添加了一行，该文件在JavaScript执行结束时会发出一个事件：

window.dispatchEvent(new Event('jQuery-executed'));

我在我的测试页面中包含jQuery文件，并带有

defer

属性：

<script src="jquery-3.2.1.js" defer onload="console.log('jQuery loaded', Date.now());"></script>
<script>
    window.addEventListener('DOMContentLoaded', function(){
        console.log('DOMREADY', Date.now());
    });

    window.addEventListener('jQuery-executed', function(){
        console.log('jQuery executed', Date.now());
    });
</script>

addEventListener（'DOMContentLoaded'，function（）{
log（'DOMREADY'，Date.now（））；
});
addEventListener（'jQuery-executed'，function（）{
log（'jqueryexecuted'，Date.now（））；
});

我在脚本标记上有一个

onload

处理程序来告诉我文件何时加载，其他函数输出控制台记录DOMContentLoaded和jQuery何时执行

为什么当我查看此页面时会得到此信息

---

事情应该以不同的顺序发生吗？jQuery不应该只在包含它的文件加载后执行吗？为什么要在加载DOMContentLoaded之前执行它呢？

HTML5规范很奇怪，很难阅读，但它确实说应该在触发“加载”事件之前评估延迟的脚本内容。如果您仔细想想，这确实是一件好事：如果您有一些代码正在等待脚本加载，可能是因为您想使用脚本提供的一些代码。如果在脚本运行之前触发了“load”事件，那么拥有一个“load”处理程序就没有什么用处了

---

“DOMContentReady”也是如此：等待该事件正确触发的代码期望页面导入的所有脚本内容都准备好被利用。

检查W3C HTML5规范。“load”事件在脚本内容运行之后触发，而不是之前。DOMContentLoaded等待脚本加载也是有意义的，因为它的处理程序中的代码应该正确地期望所有脚本都存在。“…在文档被解析后执行，但在触发DOMContentLoaded之前。”啊，谢谢各位，这很好地澄清了这一点。你想在Pointy上发布答案吗？如果其他人对W3C规范中的拜占庭式语言有问题，Pointy似乎在谈论的部分是，“在脚本元素处激发名为load的事件”在“运行脚本脚本给定的经典脚本”之后。有趣的是，当我使用async而不是defer时，我会按照DOMREADY、jQuery执行的顺序获取日志，jQuery已加载。所以async似乎从DOMContentLoaded序列中删除了脚本。很好的解释，谢谢。这种事件顺序对我来说确实非常有用：它让我相信文件中的JS是可用的。