MENU

Web Worker 特性

• March 16, 2023 • Read: 738 • Life

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 不支持使用一些全局变量和方法,如 windowdocumentalert() 等。

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