Web Worker 特性

Web Worker

Web Worker 是 HTML5 中的新特性，用于在后台线程中执行 JavaScript 代码，以避免主线程被阻塞。下面是 Web Worker 的基本用法：

• 1.创建 Worker 对象：在主线程中创建 Worker 对象，可以使用以下代码：

const worker = new Worker('worker.js');

• 2.其中，worker.js 是在 Worker 线程中执行的 JavaScript 文件路径。在 Worker 线程中执行 JavaScript 代码：在 Worker 线程中执行的 JavaScript 代码不能访问主线程的 DOM 对象和全局变量，但可以访问一部分 Web APIs 和自定义的 JavaScript 文件。可以在 worker.js 文件中编写 JavaScript 代码：

// worker.js 文件
console.log('Hello from worker!');
self.postMessage('Message from worker');

• 3.其中，self 表示 Worker 线程的全局对象，可以使用 postMessage() 方法向主线程发送消息。接收和处理来自 Worker 线程的消息：在主线程中可以使用 onmessage 事件监听来自 Worker 线程的消息，并使用 postMessage() 方法向 Worker 线程发送消息。

// 主线程
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
  console.log('Message received from worker: ', event.data);
};
worker.postMessage('Message from main');

在上面的代码中，使用 onmessage 事件监听来自 Worker 线程的消息，并使用 postMessage() 方法向 Worker 线程发送消息。

需要注意的是，Web Worker 在浏览器中运行，需要满足同源策略（即 Worker 脚本必须与主页面的脚本同源），并且不支持跨域传输 Cookie 等敏感信息。此外，Web Worker 不支持使用一些全局变量和方法，如 window、document、alert() 等。

Web Worker 的使用场景包括但不限于：处理大量数据、计算密集型任务、网络请求等。