认识
一、认识
Web Worker 是一种运行在浏览器后台线程的 JavaScript 脚本，用于执行耗时的任务，而不会阻塞主线程（也就是页面的 UI 渲染和用户交互）。它的主要作用是让复杂的计算或长时间的任务在后台运行，从而提升 Web 应用的响应性。Web Worker 在浏览器中运行于独立的线程，与主线程隔离开来。主线程 和 Web Worker 通过消息传递 (postMessage 和 onmessage) 进行通信。Web Worker 无法直接操作 DOM，也不能调用主线程中的方法。Web Worker 可以使用 importScripts() 动态加载外部脚本。Web Worker 必须与页面脚本位于同一源（协议、域名和端口）。现代浏览器普遍支持 Web Worker，但在老旧浏览器（如 IE10 以下）中可能不受支持。当不再需要 Worker 时，主线程可以通过 terminate 方法停止 Worker。Worker 可以使用 XMLHttpRequest 发送请求，但是请求的 responseXML 与 channel 两个属性值始终返回 null （fetch 仍可正常使用，没有类似的限制）。
二、语法
const worker = new Worker(aURL, options);
-
aURL: 是一个DOMString表示worker将执行的脚本的URL。它必须遵守 同源策略。 -
options: 包含可在创建对象实例时设置的选项属性的对象。可用属性如下:-
type: 用以指定worker类型的DOMString值。该值可以是classic或module. 如果未指定，将使用默认值classic. -
credentials: 用以指定worker凭证的DOMString值。该值可以是omit,same-origin，或include。如果未指定，或者type是classic，将使用默认值omit(不要求凭证)。 -
name: 在DedicatedWorkerGlobalScope的情况下，用来表示worker的scope的一个DOMString值，主要用于调试目的。
-
三、用法
3.1 创建 Worker
创建一个单独的文件作为 Worker 脚本，比如 worker.js：
// worker.js
importScripts('script1.js', 'script2.js'); // Web Worker 可以通过 importScripts 动态加载其他脚本
self.onmessage = function(event) {
const result = event.data * 2; // 简单计算
self.postMessage(result); // 返回计算结果
};
3.2 引用 Worker
在主线程中创建 Worker 实例并与之通信：
// 主线程
const worker = new Worker('worker.js');
// 发送消息到 Worker
worker.postMessage(10);
// 接收 Worker 返回的消息
worker.onmessage = function(event) {
console.log('Worker 返回的结果:', event.data); // 输出: 20
};
// 捕获 Worker 中的错误
worker.onerror = function(error) {
console.error('Worker 错误:', error.message);
};
worker.terminate(); // 当不再需要 Worker 时，主线程可以通过 terminate 方法停止 Worker