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

Question

我读到 defer 不一定会延迟外部脚本的加载，但它会 defer the execution of the script直到 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>

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

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

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

Answer 1

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

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