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

Question

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

​

​

作为一个实验，我在包含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”也是如此:等待事件触发的代码期望页面导入的所有脚本内容都可以被利用。