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

Question

我记得在某处读到，如果使用 appendChild 将 script 标记添加到 DOM，它不会阻塞，并且表现得好像它具有 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 的定义，每个未标记为 async 的 <link rel="import> 标记都会阻止解析器。

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

如果之后添加另一个标签 - 带有 appendChild()- 被导入文档引用，您仍然需要指定 async 属性。

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

Are importing nodes not added as async to DOM