HTML 5推迟属性

Question

我正在尝试理解async和deferHTML 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.writefrom deferred(异步)脚本是有道理的.考虑到这一点:

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

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

还有一个问题是"内容应该写在哪里？" 在你的问题中,你期望得到一个结果Abc Hello World,但我希望Hello World Abc我仍然期望在script标签之后而不是在文档末尾写入内容.

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