Cara berkomunikasi dengan pekerja web di JavaScript
创建Web Worker并使用postMessage发送消息；2. 主线程通过onmessage或addEventListener接收消息；3. Worker内部监听message事件处理数据并回传；4. 使用terminate()或self.close()终止Worker；5. 通过onerror监听错误；通信基于异步消息传递，数据被复制而非共享，适用于CPU密集型任务，且不能访问DOM，必须通过消息机制实现主线程与Worker间交互。
Communicating with a Web Worker in JavaScript is done through message passing using the postMessage() method and listening for messages with the onmessage event handler. Web Workers run in the background, separate from the main UI thread, so they can’t access the DOM or variables directly. Instead, you send and receive data asynchronously via messages.
Here’s how to set up and use communication between your main script and a Web Worker:
1. Creating and Sending Messages to a Web Worker
First, create a new Web Worker by passing the path to a JavaScript file:
const worker = new Worker('worker.js');Then, send data to the worker using postMessage():
worker.postMessage('Hello Worker');You can send more complex data like objects or arrays:
worker.postMessage({ command: 'start', data: [1, 2, 3, 4, 5] });Note: Only structured-clonable data (like strings, numbers, objects, arrays) can be passed. Functions and DOM elements cannot be sent.
2. Receiving Messages from the Web Worker
In the main thread, listen for responses using the onmessage event:
worker.onmessage = function(event) {
console.log('Message from worker:', event.data);
};Or use addEventListener (preferred for multiple listeners):
worker.addEventListener('message', function(event) {
console.log('Received:', event.data);
});3. Handling Messages Inside the Web Worker
Inside worker.js, listen for messages from the main thread:
self.onmessage = function(event) {
console.log('Message received:', event.data);
// Process data
const result = event.data.data.map(x => x * 2);
// Send result back
self.postMessage({ result: result });
};Again, you can also use addEventListener:
self.addEventListener('message', function(event) {
// Do work...
self.postMessage('Work completed');
});4. Terminating a Web Worker
When you’re done, clean up by terminating the worker from the main thread:
worker.terminate();
This immediately stops the worker, even if it’s in the middle of an operation.
Alternatively, the worker can terminate itself:
self.close();
5. Error Handling
You can also listen for errors in the worker:
worker.onerror = function(error) {
console.error('Worker error:', error.message);
};Errors in the worker won’t crash the main page but should still be handled.
Example: Full Workflow
main.js
const worker = new Worker('worker.js');
worker.postMessage({ numbers: [1, 2, 3, 4, 5] });
worker.onmessage = function(event) {
console.log('Result:', event.data); // Output: { doubled: [2, 4, 6, 8, 10] }
};
worker.onerror = function(error) {
console.error('Error:', error.message);
};worker.js
self.onmessage = function(event) {
const data = event.data.numbers;
const doubled = data.map(n => n * 2);
self.postMessage({ doubled: doubled });
};Key Points to Remember
- Communication is asynchronous and based on events.
- Data is copied, not shared (though
Transferableobjects likeArrayBuffercan be transferred for better performance). - Web Workers cannot access
window,document, or the DOM. - Use workers for CPU-intensive tasks like parsing large data, image processing, or complex calculations.
Basically, it’s all about postMessage and onmessage. Set up listeners on both sides, pass data as needed, and keep the main thread responsive.
Atas ialah kandungan terperinci Cara berkomunikasi dengan pekerja web di JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Jenis Bersyarat Lanjutan dalam TypeScript
Aug 04, 2025 am 06:32 AM
Jenis Keadaan Lanjutan TypeScript Melaksanakan penghakiman logik antara jenis melalui Textendsu? X: Y Sintaks. Keupayaan terasnya ditunjukkan dalam jenis keadaan yang diedarkan, kesimpulan jenis kesimpulan dan pembinaan alat jenis kompleks. 1. Jenis bersyarat diedarkan dalam parameter jenis kosong dan secara automatik boleh memecah jenis bersama, seperti toarray untuk mendapatkan rentetan [] | number []. 2. Menggunakan Pengagihan untuk Membina Alat Penapisan dan Pengekstrakan: Tidak termasuk Kecualikan Jenis Melalui Textendsu? Tidak pernah: T, Ekstrak Ekstrak Persamaan melalui Textendsu? 3
Mikro Frontends Architecture: Panduan Pelaksanaan Praktikal
Aug 02, 2025 am 08:01 AM
Microfrontendssolvescalingchallengesinlargeteamsbyenablingindependentdevelopmentanddeployment.1) chooseanInintegrationstration: useModulefederationInwebPack5formruntimeLoadingandtrueindectivence, Build-timeIntegrationForseMlesetups, Oriframes/Web
Apakah perbezaan antara var, biarkan, dan const dalam javascript?
Aug 02, 2025 pm 01:30 PM
varisfunction-scoped, canbereassigned, omredwithundefined, andattachedtotheglobalwindowobject; 2.Letandconstareblock-scoped, withletallowingreassignmentandconstnotallowingit, everconstobjectscanhaveMutabeTerSties;
Menjana teka -teki coklat berganda yang diselesaikan: Panduan untuk struktur data dan algoritma
Aug 05, 2025 am 08:30 AM
Artikel ini meneroka secara mendalam bagaimana untuk menghasilkan teka-teki yang dapat diselesaikan secara automatik untuk permainan teka-teki double-choco. Kami akan memperkenalkan struktur data yang cekap - objek sel berdasarkan grid 2D yang mengandungi maklumat sempadan, warna, dan keadaan. Atas dasar ini, kami akan menghuraikan algoritma pengiktirafan blok rekursif (serupa dengan carian kedalaman pertama) dan bagaimana untuk mengintegrasikannya ke dalam proses penjanaan teka-teki berulang untuk memastikan teka-teki yang dihasilkan memenuhi peraturan permainan dan dapat diselesaikan. Artikel ini akan menyediakan kod sampel dan membincangkan pertimbangan utama dan strategi pengoptimuman dalam proses penjanaan.
Bagaimanakah anda boleh mengeluarkan kelas CSS dari elemen DOM menggunakan JavaScript?
Aug 05, 2025 pm 12:51 PM
Kaedah yang paling biasa dan disyorkan untuk membuang kelas CSS dari elemen DOM menggunakan JavaScript adalah melalui kaedah mengeluarkan () harta klasik. 1. Gunakan elemen.classlist.remove ('className') untuk memadamkan satu kelas tunggal atau berganda dengan selamat, dan tiada kesilapan akan dilaporkan walaupun kelas tidak wujud; 2. Kaedah alternatif adalah untuk mengendalikan harta kelas secara langsung dan mengeluarkan kelas dengan penggantian rentetan, tetapi mudah untuk menyebabkan masalah disebabkan oleh pemprosesan yang tidak tepat atau pemprosesan ruang yang tidak betul, jadi tidak disyorkan; 3. 4.Classlist
Apakah sintaks kelas dalam JavaScript dan bagaimana ia berkaitan dengan prototaip?
Aug 03, 2025 pm 04:11 PM
Sintaks kelas JavaScript adalah gula sintaks yang diwarisi oleh prototaip. 1. Kelas yang ditakrifkan oleh kelas pada dasarnya adalah fungsi dan kaedah ditambah kepada prototaip; 2. Contohnya mencari kaedah melalui rantaian prototaip; 3. Kaedah statik tergolong dalam kelas itu sendiri; 4. Memperluas mewarisi melalui rantaian prototaip, dan lapisan asas masih menggunakan mekanisme prototaip. Kelas tidak mengubah intipati warisan prototaip JavaScript.
Routing Vercel Spa dan Pemuatan Sumber: Selesaikan masalah akses URL yang mendalam
Aug 13, 2025 am 10:18 AM
Artikel ini bertujuan untuk menyelesaikan masalah penyegaran URL yang mendalam atau akses langsung menyebabkan kegagalan memuatkan sumber halaman apabila menggunakan aplikasi halaman tunggal (SPA) di VERECE. Inti adalah untuk memahami perbezaan antara mekanisme penulisan semula Vercel dan laluan penyemak imbas yang relatif. Dengan mengkonfigurasi vercel.json untuk mengalihkan semua laluan ke index.html, dan membetulkan kaedah rujukan sumber statik dalam HTML, mengubah laluan relatif ke jalan mutlak, memastikan bahawa aplikasi itu dapat memuatkan semua sumber dengan betul di bawah mana -mana URL.
Menguasai Kaedah Array JavaScript: `Map`,` Penapis`, dan `Mengurangkan`
Aug 03, 2025 am 05:54 AM
Kaedah Array JavaScript Peta, Penapis dan Mengurangkan digunakan untuk menulis kod yang jelas dan berfungsi. 1. Peta digunakan untuk menukar setiap elemen dalam array dan mengembalikan array baru, seperti menukar Celsius ke Fahrenheit; 2. Penapis digunakan untuk menapis unsur -unsur mengikut keadaan dan mengembalikan array baru yang memenuhi syarat -syarat, seperti mendapatkan nombor atau pengguna aktif; 3. Mengurangkan digunakan untuk mengumpul hasil, seperti menjumlahkan atau menghitung kekerapan, dan nilai awal perlu disediakan dan dikembalikan kepada penumpuk; Tiada satu daripada tiga mengubah suai array asal, dan boleh dipanggil dalam rantai, sesuai untuk pemprosesan data dan penukaran, meningkatkan kebolehbacaan dan fungsi kod.
