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

Question

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

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

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

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

Answer 1

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

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

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

JavaScript in external file is executed before the script tag's onload event

javascript

jquery

loading

event-handling

jquery-events