“经典”Web Worker和“模块”Web Worker有什么区别？

Question

我正在学习JavaScript中的Web Worker API，并使用Mozilla Developer Network (MDN)文档作为主要来源。 文档建议，新的Worker构造函数接受一个type参数。根据同一份文档，此type参数可以接受classic或module的值。

不幸的是，该文档未描述classic和module之间的区别。什么时候我会想要使用classic而不是module，这两种“类型”的Worker之间有什么行为差异呢？

- user189198

Answer 1

module类型的作用与type="module"属性类似于script标签。它告诉浏览器正在加载的worker脚本是一个ES6模块（这是必要的元数据，以知道如何解析和运行它，正如本文所述）。

如果您的worker模块是一个ES6模块（可能带有import语句），则可以使用它。它还具有从不同来源加载worker的能力，如果启用了CORS，则经典worker无法实现此功能（即使不使用import语句也可能是一个有吸引力的特性）。

来自HTML Living Standard - Using a JavaScript module as a worker：

到目前为止，我们所有的示例都展示了运行经典脚本的worker。相反，可以使用模块脚本实例化worker，具有通常的好处：使用JavaScript import语句导入其他模块的能力；默认情况下采用严格模式；顶层声明不会污染worker的全局范围。

请注意，与经典worker相比，这种基于模块的worker遵循不同的跨源内容限制。与经典worker不同，只要使用CORS协议公开该脚本，就可以使用跨源脚本来实例化模块worker。此外，在模块worker内，importScripts()方法将自动失败；通常使用JavaScript import语句更好。

截至原帖发布日期，由于ES6模块的浏览器支持不太好，您可能不会在生产中使用它。截至2020年，尽管大多数主要浏览器已经支持ES6模块脚本，但这并不适用于工作者。目前只有Chrome 80+支持此功能。

- Alexander O'Mara

---

有没有任何浏览器可以完全支持这个，而不需要任何干预？ - Tomáš Zato

@TomášZato 是的，由于几个与该状态相关的错误，它被隐藏在标志后面。您可以使用捆绑工具（Rollup、Webpack等）来捆绑worker JS，但无法解决CORS问题。Chrome并不总是能够正确处理这些问题（参见HTML导入），但已经出现了几个竞争和古怪/繁琐的模块加载器，现在ES模块正在迅速成为标准。如果他们采用其他方式来处理worker或者放弃worker，我会感到非常惊讶。 - Keith

说“大多数主流浏览器”只是指Blink有点牵强。。。 - Kaiido

@Kaiido 你有相关的来源吗？MDN 和 Can I Use 显示除了 IE（不再更新）之外，ES6 模块在所有主流浏览器中都得到支持。 - Alexander O'Mara

这句话是关于ES6模块还是关于模块工作者？前者确实得到了很好的支持，而后者仍然只有Blink支持。 - Kaiido