导入节点是否未作为异步添加到DOM

Question

我记得在某个地方读过如果使用script将DOM标记添加到appendChild，它就不会阻塞，并且表现得好像有async属性一样。今天我正在阅读this article，它有以下代码段：

var link = document.createElement('link');
link.rel = 'import';
link.href = 'file.html';
//link.setAttribute('async', ''); // make it async!

所以我想知道script为link标记标记的行为不是一样的吗？为什么要手动添加async属性？

Answer 1

根据定义in the specification，未标记为<link rel="import>的每个async标记都会阻止解析器。

如果您使用<link>添加appendChild()，它不会阻止当前的脚本执行，但实际上它会阻止解析，直到加载导入的文档。

如果之后您添加了另一个标记 - appendChild() - 导入文档引用了该标记，您仍需要指定async属性。

document.head.appendChild( link )
//link should be async if it uses the element below:
document.body.appendChild( element )