HTML 5推迟属性

Question

我正在尝试理解async和defer HTML 5属性。 这是我的测试代码：

<body>
    <script type="text/javascript" src="script.js" **defer**></script>
    <div id="div1">
        Abc
    </div>  
</body>

的script.js：

document.write("Hello World!")

据我了解，并根据定义，“延迟...指定脚本在页面完成解析时执行”输出不应该是：

Abc
Hello World!

代替

Abc

是这样的？

为什么document.write()不能用于延迟？

答案“document.write清除页面”没有考虑延迟属性。 最终的答案是类似的，但我的问题是从另一个角度提出的。

Answer 1

如果您在Chrome上打开JavaScript控制台，则会看到以下消息：

无法在'Document'上执行'write'：除非明确打开，否则无法从异步加载的外部脚本写入文档。

不从延迟（异步）脚本执行document.write是有道理的。 考虑到这一点：

defer表示浏览器在加载和解析文档时等待并执行代码。
document.write写入文档流。
如果document.write当关闭文档被称为（加载），则document.open被自动调用，文档被清除并用的内容替换document.write 。

阻止在延迟脚本中执行document.write将阻止清除页面/文档，并仅显示document.write的内容。

还有一个问题是“内容应该写在哪里？” 在你的问题中，你期待Abc Hello World的结果，但我希望Hello World Abc因为我仍然期望在script标签之后而不是在文档末尾写入内容。

最好使用异步情况下支持的不同方法，这样可以控制内容的放置位置，例如appendChild或insertBefore 。