HTML 5 defer attribute

HTML 5 defer attribute

本文关键字：attribute defer HTML      更新时间：2023-09-26

我正在努力理解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!")

据我所知，根据定义，"defer…指定当页面完成解析时执行脚本"，输出不应该是：

Abc
Hello World!

而不是

Abc

情况是这样的？

为什么document.write()不能与defer一起工作？

答案"document.write清除页面"没有考虑defer属性。最终得到的答案是相似的，但我的问题是从另一个角度提出的。

如果您在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。

相关文章：