Mi az a web worker és mire való?

A web worker-ek olyan módszert jelentenek, amellyel JavaScript-kódot futtathatunk a böngésző fő felhasználói felület szálától elkülönített háttérszálon.

Cél:

• Erőforrás-igényes számítások végrehajtása anélkül, hogy blokkolnánk a fő szálat, ezáltal megakadályozva az interfész lefagyását.
• Nagy adatmennyiség feldolgozása vagy hosszú műveletek (pl. parsing, tömörítés, hálózati kérések bizonyos esetekben) háttérben történő végrehajtása.
• A webalkalmazások teljesítményének és reakciókészségének javítása.

Web worker típusok:

1. Dedicated Worker: A szkripthez kapcsolódik, amely létrehozta.
2. Shared Worker: Több szkript között osztható meg, amelyek különböző ablakokban vagy lapokban futnak ugyanazon a domainen.
3. Service Worker: Interceptálja a hálózati kéréseket, kezeli a cache-t, offline hozzáférést biztosít, push értesítéseket támogat.

Példa a Dedicated Worker létrehozására és használatára:

// main.js (fő szál)
const worker = new Worker('worker.js');

// Üzenet küldése a workernek
worker.postMessage('Nehéz számítások indítása');

// Üzenet fogadása a worker-től
worker.onmessage = function(event) {
  console.log('A worker-től kapott:', event.data);
};

// worker.js (worker kód)
self.onmessage = function(event) {
  console.log('A workerben kapott:', event.data);

  // Nehéz számítások szimulálása
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Üzenet küldése vissza a fő szálnak
  self.postMessage('A számítások befejeződtek, eredmény: ' + result);
};

Korlátozások:

• Nincs közvetlen hozzáférés a DOM-hoz.
• Néhány globális változót nem lehet használni a fő szálból (pl. window, document).
• Az kommunikáció aszinkron üzenetváltáson keresztül történik (postMessage és onmessage/addEventListener('message')).
• A szálak közötti adatok másolással (structured clone algoritmus) kerülnek átadásra, de nagy adatok esetén használhatók Transferable Objects a referencia szerinti átadásra (amely elveszíti a hozzáférést az eredeti szálon).