Web worker’lar: hesaplama yükünü ana iş parçacığından çıkarmak

Kısaca: Bir web worker, JavaScript’i kendi iş parçacığında çalıştırır; böylece ağır hesaplamalar arayüzü dondurmaz; iletişim mesajlarla olur.

Biraz daha ayrıntılı: Tarayıcıdaki JavaScript normalde işleme ve girdiyi de yöneten ana iş parçacığında çalışır. Uzun bir döngü (bir görseli işlemek, büyük JSON ayrıştırmak, arama dizini kurmak) sayfanın takılmasına/donmasına neden olur ve INP’yi kötüleştirir. Bir worker yardımcı olur.

Ayrıntılı

Özel worker

// main.js
const worker = new Worker(new URL('./compute.js', import.meta.url), { type: 'module' });
worker.postMessage({ numbers: bigList });
worker.onmessage = (e) => show(e.data.sum);
// compute.js
self.onmessage = (e) => {
  const sum = e.data.numbers.reduce((a, b) => a + b, 0);
  self.postMessage({ sum });
};

Worker’ın DOM’a ve window’a erişimi yoktur, ama fetch, IndexedDB, WebAssembly, crypto ve zamanlayıcılara vardır. Veriler yapılandırılmış klonlamayla kopyalanır; büyük arabellekler transferable olarak (postMessage(buf, [buf])) kopyalanmak yerine taşınır ya da SharedArrayBuffer ile paylaşılır (cross-origin isolation gerekir).

Türler

• Özel worker: tek bir sayfaya aittir.
• Paylaşılan worker: birkaç sekme tarafından kullanılır.
• Service worker: ağ proxy’si/çevrimdışı/push (kendi konusu).
• Özel işleme görevleri için Worklet’ler (ses/boyama).
• OffscreenCanvas: worker’da çizim (oyunlar/grafikler).

Kütüphaneler: Comlink worker çağrılarını normal async işlevlere dönüştürür; Vite/Webpack worker dosyalarını paketler.

Ne zaman değer

Değer: görsel/ses/video işleme, ayrıştırma/sıkıştırma, kriptografi, WASM programları (Pyodide’de Python, emülatörler), arama/dizin, oyunlarda fizik hesabı, editörlerde sözdizimi analizi. Değmez: küçük işler (başlatma ve kopyalama maliyeti), DOM işi (worker’da imkânsız). Alternatif olarak, ana iş parçacığı nefes alabilsin diye uzun işi parçalara böl (requestIdleCallback, scheduler.yield()).

Uygulama

• Hataları yakala (worker.onerror), iptal et (worker.terminate()), ilerlemeyi mesajlarla ilet.
• Worker sayısını çekirdeklere uyarla (navigator.hardwareConcurrency), bir havuzu yeniden kullan.
• Güvenlik: worker kodu aynı kaynaktan, CSP worker-src’ye dikkat; mesajları doğrula.
• Hata ayıklama: DevTools worker’ları kendi iş parçacıkları olarak gösterir.
• Node.js’te worker_threads, Python’da multiprocessing vardır (aynı fikir: paylaşılan durum olmadan paralellik).

Ayrıca bak: Service worker, Olay döngüsü, Lighthouse ve Core Web Vitals