【问题标题】：Defer attribute and onload event延迟属性和 onload 事件
【发布时间】：2016-01-12 20:52:31
【问题描述】：

代码如下：

<html>
    <head>  

        <script>            
            function elem_onload() {
                console.log("elem_onload");
            };      
        </script>

    </head>

    <body onload="elem_onload()">       
        <script type="text/javascript" src="script.js" defer></script>      
    </body>
</html>

script.js:

console.log("external script");

defer 属性似乎不起作用。输出是：

external script
elem_onload

不管有没有defer属性。不应该吗

elem_onload
external script

定义了延迟？

重复的答案！？

我想声明我的答案与

不重复

How exactly does <script defer=“defer”> work?

引用的推荐答案是关于内联脚本，其中浏览器行为对我来说很清楚 - 它只是忽略了defer。我的问题是关于外部脚本，在这种情况下浏览器应该执行外部延迟脚本

文档被解析后

正如文档所述，因此在 onload 事件之后。

所以我正在等待适当的答案...

【问题讨论】：

4.21.1 Script element: "使用这些属性可以选择三种可能的模式。如果存在异步属性，则脚本将在可用时立即执行，但不会进一步阻塞页面解析。如果 async 属性不存在但 defer 属性存在，则在页面完成解析后执行脚本。如果两个属性都不存在，则获取脚本并在用户代理继续解析页面之前立即执行”
所以你建议“onload”事件总是在页面被解析时触发，因此在延迟脚本之后？
尝试在<script type=""></script> 的末尾设置type 和src elem_onload
12.2.6 The end: 第三步，执行所有延迟脚本；第四步，开火DOMContentLoaded； ... 第 7 步：触发 load 事件

标签： javascript

【解决方案1】：

defer 属性延迟的外部脚本在 (DOMContentLoaded) 触发之前执行，即当初始 HTML 文档已完全加载和解析时。另一方面，<body> 标记上的 onLoad 属性仅在网页完全加载时触发。

因此，defer 属性确实有效。您可以通过尝试以下两种情况来测试它。在这两种情况下，script.js 文件的内容应该是这样的：

console.log(document.getElementById('sample').innerHTML);

CASE 1 HTML - 带有defer --> 记录“示例文本”

<body onLoad="elem_onload()">       
<script type="text/javascript" src="script.js" defer></script>    
<div id="sample">Sample text</div>
</body>

CASE 2 HTML - 没有defer --> 记录错误

<body onLoad="elem_onload()">       
<script type="text/javascript" src="script.js"></script>    
<div id="sample">Sample text</div>
</body>

【讨论】：

他们被执行之前 DOMContentLoaded被解雇
这里定义顺序-> 12.2.6 The end

【解决方案2】：

谢谢。一切为了帮助。

因此，原始文档中的语句“...在文档被解析后”。 (MDN <script> tag) 从12.2.6 The end引用说步骤#0

当文档被完全解析时，现在有几个任务要完成。这些任务包括运行外部延迟脚本早于 (#3) onload 事件。

我说的对吗？

【讨论】：

是的。 load 事件在第 7 步触发。