Mi azok a web worker-ek és mire jók?

A web worker-ek olyan módszerek, amelyek segítségével szkriptek futtathatók háttérszálakon, elkülönítve a fő felhasználói felület szálától.

Fő céljuk:

• A teljesítmény növelése: Erőforrás-igényes feladatok (összetett számítások, nagy adatmennyiség feldolgozása, parsing) áthelyezése a fő szálról, amely a felület rendereléséért és a felhasználói események kezeléséért felelős. Ez megakadályozza az oldal lefagyását és javítja az alkalmazás válaszkészségét.
• Párhuzamosság: Lehetővé teszi több feladat egyidejű végrehajtását, hatékonyabban kihasználva a többmagos processzorokat.

Három típusú web worker létezik:

1. Dedicated Workers: Egy adott oldalhoz kötöttek, és csak az adott oldalról érhetők el.
2. Shared Workers: Több oldal vagy lap között is elérhetők ugyanazon domainen.
3. Service Workers: Hálózati proxy-ként működnek, elfogják a hálózati kéréseket, és lehetővé teszik offline funkciók, push értesítések és más fejlett webalkalmazás (PWA) képességek megvalósítását.

Működési elvek:

• Külön kontextus: A worker saját globális objektummal rendelkezik, és hozzáférése van a böngésző API-k egy részéhez (DOM, window, document, parent hozzáférés nélkül).
• Üzenetcsere: A fő szál és a worker közötti kommunikáció az postMessage() és az onmessage eseménykezelő segítségével történik. Az adatok érték szerint (másolva) vagy hivatkozás szerint (Transferable Objects) kerülnek átadásra.

Példa egy dedikált worker használatára:

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

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

worker.postMessage('Komplex művelet indítása'); // Üzenet küldése a worker-nek

// worker.js (worker fájl)
onmessage = (event) => {
  // Üzenet feldolgozása a fő szálról
  console.log('A fő szál-tól kapott:', event.data);

  // Komplex feladat végrehajtása
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Eredmény visszaküldése
  postMessage(result);
};