外部文件中的 JavaScript 在脚本标签的 onload 事件之前执行

Question

我读过它defer不一定会延迟外部脚本的加载，但它会将脚本的执行推迟到 HTML 被解析之后。

作为一个实验，我在包含 jQuery 的文件的底部添加了一行，当执行到达 JavaScript 末尾时，它会发出一个事件：

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

我在我的测试页面中包含了具有defer属性的 jQuery 文件：

<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>

我onload在脚本标签上有一个处理程序，告诉我文件何时加载，其他函数输出控制台登录 DOMContentLoaded 以及何时执行 jQuery。

为什么当我查看此页面时会得到这个？

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

Answer 1

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

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