我正在学习JavaScript中的Web Worker API,并使用Mozilla Developer Network (MDN)文档作为主要来源。 文档建议,新的Worker构造函数接受一个type
参数。根据同一份文档,此type
参数可以接受classic
或module
的值。
不幸的是,该文档未描述classic
和module
之间的区别。什么时候我会想要使用classic
而不是module
,这两种“类型”的Worker之间有什么行为差异呢?
我正在学习JavaScript中的Web Worker API,并使用Mozilla Developer Network (MDN)文档作为主要来源。 文档建议,新的Worker构造函数接受一个type
参数。根据同一份文档,此type
参数可以接受classic
或module
的值。
不幸的是,该文档未描述classic
和module
之间的区别。什么时候我会想要使用classic
而不是module
,这两种“类型”的Worker之间有什么行为差异呢?
module
类型的作用与type="module"
属性类似于script标签。它告诉浏览器正在加载的worker脚本是一个ES6模块(这是必要的元数据,以知道如何解析和运行它,正如本文所述)。import
语句),则可以使用它。它还具有从不同来源加载worker的能力,如果启用了CORS,则经典worker无法实现此功能(即使不使用import
语句也可能是一个有吸引力的特性)。到目前为止,我们所有的示例都展示了运行经典脚本的worker。相反,可以使用模块脚本实例化worker,具有通常的好处:使用JavaScript import语句导入其他模块的能力;默认情况下采用严格模式;顶层声明不会污染worker的全局范围。
请注意,与经典worker相比,这种基于模块的worker遵循不同的跨源内容限制。与经典worker不同,只要使用CORS协议公开该脚本,就可以使用跨源脚本来实例化模块worker。此外,在模块worker内,importScripts()方法将自动失败;通常使用JavaScript import语句更好。
截至原帖发布日期,由于ES6模块的浏览器支持不太好,您可能不会在生产中使用它。截至2020年,尽管大多数主要浏览器已经支持ES6模块脚本,但这并不适用于工作者。目前只有Chrome 80+支持此功能。