Hogyan hozzunk létre Web Worker szálat JavaScript-ben?

A JavaScript-ben Web Worker létrehozásához a Worker konstruktor használható, amely elfogadja a szkript útvonalát, amely egy külön szálon fut.

const worker = new Worker('path/to/worker.js');

A worker szkript (worker.js) egy másik globális kontextusban fut, amely nem fér hozzá a DOM-hoz vagy a window globális objektumhoz. Az adatok cseréjéhez a fő szkript és a worker között a postMessage() módszert és az onmessage eseménykezelőt használják.

A fő szkriptben:

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

// Adatok küldése a workernek
worker.postMessage({ data: 'Szia a fő szálról!' });

// Üzenetek feldolgozása a workertől
worker.onmessage = function(event) {
  console.log('A workertől kapott:', event.data);
};

// Hibák kezelése a workernél (nem kötelező)
worker.onerror = function(error) {
  console.error('Hiba a workerben:', error);
};

// A worker befejezése
// worker.terminate();

A worker szkriptben (worker.js):

// Üzenetek feldolgozása a fő szálról
self.onmessage = function(event) {
  console.log('A workerben kapott:', event.data);

  // Hosszú művelet végrehajtása (példa!)
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Eredmény visszaküldése a fő szálnak
  self.postMessage({ result: result, originalData: event.data });
};

// Hibák kezelése a workeren belül (nem kötelező)
self.onerror = function(error) {
  console.error('Hiba a workerben:', error);
};

// A worker más szkripteket is importálhat
// importScripts('utils.js', 'helper.js');

A Web Workers lehetővé teszik erőforrás-igényes számítások külön szálon történő végrehajtását, ezáltal megelőzve az UI fő szálának blokkolását és javítva az alkalmazás válaszkészségét. Figyelembe kell venni a korlátozásokat: a worker-ek nem férnek hozzá közvetlenül a DOM-hoz, window, document, localStorage vagy sessionStorage. Az adatok cseréje másolással vagy Transferable objektumok használatával történik, a nagy adatmennyiség hatékonyabb átvitele érdekében.