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

Question

我已经读过defer不一定会延迟加载外部脚本，但在解析HTML之后它将defer the execution of the script。

作为一个实验，我在包含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”事件，那么拥有一个“加载”处理程序并没有用。

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