// worker.js self.onmessage = function(event) { const input = event.data; const result = // 处理输入数据的操作,例如复杂的计算或数据处理 self.postMessage(result); };在上述代码中,self.onmessage 定义 Web Worker 接收来自主线程的消息的事件处理函数。在事件处理函数中,可以执行一些耗时的操作,并通过 self.postMessage 方法向主线程发送处理结果。
// 主线程代码 const worker = new Worker('worker.js');在上述代码中,new Worker('worker.js') 创建了一个 Web Worker 实例,指定了要运行的 Worker 文件。可以根据实际的文件路径和命名来指定正确的 Worker 文件路径。
// 主线程代码 worker.onmessage = function(event) { const result = event.data; // 处理 Web Worker 返回的结果 console.log('Web Worker 的结果:', result); }; worker.postMessage('需要传递的数据');在上述代码中,worker.onmessage 定义了主线程接收来自 Web Worker 的消息的事件处理函数。在事件处理函数中,可以处理 Web Worker 返回的结果。通过 worker.postMessage() 向 Web Worker 发送消息,可以传递需要在后台线程中处理的数据。
// 主线程代码 worker.terminate();高级用法
// 主线程 // 堆代码 duidaima.com const worker1 = new Worker('worker.js'); const worker2 = new Worker('worker.js'); worker1.postMessage({ task: 'Task 1' }); worker2.postMessage({ task: 'Task 2' }); worker1.onmessage = function(event) { console.log('Worker 1 result:', event.data); }; worker2.onmessage = function(event) { console.log('Worker 2 result:', event.data); }; // worker.js self.onmessage = function(event) { const task = event.data.task; // 执行任务的逻辑 const result = doTask(task); self.postMessage(result); };数据共享(Data Sharing)
// 主线程 const buffer = new SharedArrayBuffer(4); const arr = new Int32Array(buffer); const worker1 = new Worker('worker.js'); const worker2 = new Worker('worker.js'); worker1.postMessage({ array: arr }, [arr]); worker2.postMessage({ array: arr }, [arr]); // worker.js self.onmessage = function(event) { const array = event.data.array; // 访问和修改共享数组的元素 Atomics.store(array, 0, 42); // 同步修改后的数据 Atomics.notify(array, 0); };导入外部脚本(Importing External Scripts)
// worker.js importScripts('external.js'); self.onmessage = function(event) { // 使用导入的外部脚本中定义的函数或变量 const result = externalFunction(event.data); self.postMessage(result); };错误处理(Error Handling)
// worker.js self.onerror = function(error) { console.error('Worker error:', error); }; self.onmessage = function(event) { try { // 执行可能导致错误的逻辑 const result = doTask(event.data); self.postMessage(result); } catch (error) { self.postMessage({ error: error.message }); } };终止和重启(Termination and Restart)
// 主线程 const worker = new Worker('worker.js'); worker.postMessage('Start Task'); // 在需要的时候终止 Worker 的执行 worker.terminate(); // 重新启动 Worker const newWorker = new Worker('worker.js'); newWorker.postMessage('Restart Task');进度报告(Progress Reporting)
// 主线程 const worker = new Worker('worker.js'); worker.onmessage = function(event) { if (event.data.type === 'progress') { const progress = event.data.progress; console.log('Progress:', progress); } else if (event.data.type === 'result') { const result = event.data.result; console.log('Result:', result); } }; worker.postMessage({ task: 'Task 1' }); // worker.js self.onmessage = function(event) { const task = event.data.task; // 根据任务进行计算,并定期发送进度报告 for (let i = 0; i <= 100; i += 10) { self.postMessage({ type: 'progress', progress: i }); // 执行任务的逻辑 doTask(task); } self.postMessage({ type: 'result', result: 'Task Completed' }); };长时间运行的任务 (Long-running Tasks)
// 主线程 const worker = new Worker('worker.js'); worker.onmessage = function(event) { const result = event.data.result; console.log('Result:', result); }; worker.postMessage({ task: 'Long Task' }); // worker.js self.onmessage = function(event) { const task = event.data.task; // 模拟长时间运行的任务 setTimeout(function() { const result = doLongTask(task); self.postMessage({ result }); }, 5000); };WebSocket 通信 (WebSocket Communication)
// worker.js const socket = new WebSocket('wss://example.com/socket'); socket.onopen = function() { console.log('WebSocket connection established'); socket.send('Hello Server!'); }; socket.onmessage = function(event) { const message = event.data; console.log('Received message:', message); }; socket.onclose = function() { console.log('WebSocket connection closed'); }; // 主线程中没有代码示例,可以在主线程中实现其他逻辑,例如处理用户输入、更新 UI 等。Worker线程数据通讯方式
// 主线程中 const worker = new Worker('worker.js'); worker.postMessage('Hello Worker!');工作线程接收并处理消息
// worker.js self.onmessage = function(event) { const message = event.data; console.log('Received message from main thread:', message); // 在工作线程中进行处理 // ... // 向主线程发送响应消息 self.postMessage('Message received by worker!'); };主线程接收工作线程的响应消息
// 主线程中 worker.onmessage = function(event) { const response = event.data; console.log('Received response from worker:', response); };使用SharedWorker进行数据共享
// shared-worker.js self.onconnect = function(event) { const port = event.ports[0]; port.onmessage = function(event) { const message = event.data; console.log('Received message from main thread:', message); // 在共享Worker线程中进行处理 // ... // 向主线程发送响应消息 port.postMessage('Message received by shared worker!'); }; port.start(); };主线程连接共享Worker并发送消息
// 主线程中 const sharedWorker = new SharedWorker('shared-worker.js'); sharedWorker.port.onmessage = function(event) { const response = event.data; console.log('Received response from shared worker:', response); }; sharedWorker.port.postMessage('Hello Shared Worker!');Worker上下文
独立的执行环境:Worker上下文在单独的线程(Worker线程)中运行,与主线程(页面上的JavaScript代码运行的环境)相互独立。这意味着Worker上下文中的代码执行不会影响主线程的响应性能,反之亦然。
无法访问DOM和主线程全局对象:Worker上下文与主线程分离,因此无法访问主线程的DOM(文档对象模型)结构和全局JavaScript对象(如window对象)。它没有直接的访问权,因此也无法直接操作HTML页面上的UI元素。
具有自己的全局对象:Worker上下文拥有自己的全局对象,称为"self",用于表示Worker自身。通过self对象,可以在Worker上下文中执行各种操作,如发送和接收消息、注册事件监听器等。
没有页面和用户界面(UI) :Worker上下文是用于执行后台任务的,它没有图形用户界面(GUI)。因此,无法在Worker上下文中创建或操作HTML元素,并且不能执行与UI相关的操作。
在Worker上下文中,您可以使用标准的JavaScript语法与语言功能进行编码,包括变量声明、函数定义、条件语句、循环等。可以使用自定义的函数、引入外部JavaScript文件等进行代码组织和封装。