具有 async 属性的脚本是在单独的线程上执行还是在与 JavaScript 中的 HTML 解析器相同的线程上执行？

Question

在脚本标签上使用 defer 或 async 属性会导致其在单独的线程上下载，从而不会阻止 HTML 解析。但是一旦脚本下载完毕，对于 async 属性，它会立即执行。

1. 这是否意味着它也在单独的线程上执行。
2. 我对线程了解不多，但如果第 1 点的答案是“是”，那么异步脚本线程是否能够从 HTML 解析器线程访问数据，例如 DOM 元素（我知道不能保证所述 DOM 元素将可用）或有关文档的任何元数据。
3. 如果第 1 点的答案为“否”，并且异步脚本与 HTML 解析器在同一线程上执行，则解析器将被阻塞，直到脚本执行完成，在这种情况下，我们无法实现我们没有实现的优化希望页面渲染被阻止。
4. 如果第 1 点的答案仍然是“否”，但情况是一旦下载了异步脚本，HTML 解析器线程首先完成解析器的执行，然后才执行脚本，那么 defer 的意义何在？他们的行为方式相同。

Answer 1

1. 没有。只有一个线程用于执行 JavaScript（我忽略了 WebWorkers，但必须在代码中显式调用它们）。

2. 不适用，因为第一个问题的答案是否定的。

3. 它会阻塞解析器，但只有在它完成下载脚本之后。因此，解析将与等待脚本下载并行进行。这可能非常重要，因为网络比 CPU 慢得多。

4. defer

   具有与

   async

   相同的并行优势。但由于它在文档完全解析后才会运行，因此它可以引用文档中加载的任何元素。这类似于将整个脚本放入

   DOMContentLoaded

   事件的侦听器中（延迟脚本实际上是在该事件触发之前运行，因此它们可以创建侦听器可见的元素）。

如果不使用

async

，解析器会在等待脚本下载 和 执行时被阻塞，而不仅仅是在脚本执行时。