JavaScript, tek iş parçacıklı (single-threaded) bir dil olduğu için uzun süren işlemler kullanıcı arayüzünü dondurabilir. Web Workers, bu sorunu aşmak için ağır hesaplamaları arka planda çalıştırmanıza olanak tanır. Bu yazıda, Web Workers’ın ne olduğunu, nasıl oluşturulduğunu, ana iş parçacığıyla nasıl iletişim kurduğunu ve gerçek dünya senaryolarında nasıl kullanıldığını detaylıca inceleyeceğiz.
Web Workers Nedir ve Neden Kullanılır?
Web Workers, bir web sayfasının ana iş parçacığından bağımsız olarak çalışan JavaScript iş parçacıklarıdır. Ağır matematiksel hesaplamalar, büyük veri setlerini işleme, resim filtreleme veya dosya sıkıştırma gibi işlemleri ana iş parçacığını bloke etmeden gerçekleştirebilirsiniz. Bu sayede kullanıcı arayüzü duyarlı kalır, sayfa kaydırma ve tıklama gibi etkileşimler kesintisiz devam eder.
Önemli: Web Workers’lar DOM’a doğrudan erişemez, ancakpostMessageveonmessageAPI’leri ile ana iş parçacığıyla mesajlaşarak veri alışverişi yapabilirler.
Web Worker Oluşturma ve Kullanma
Bir Web Worker oluşturmak için ayrı bir JavaScript dosyasına ihtiyacınız vardır. Aşağıda basit bir örnek görebilirsiniz.
Adım 1: Worker Dosyasını Yazma (worker.js)
// worker.js
self.onmessage = function(event) {
const sayi = event.data;
let toplam = 0;
for (let i = 0; i < sayi; i++) {
toplam += i;
}
self.postMessage(toplam);
};
Adım 2: Ana Dosyada Worker’ı Başlatma
// main.js
const worker = new Worker('worker.js');
worker.postMessage(1000000000); // büyük bir sayı
worker.onmessage = function(event) {
console.log('Sonuç:', event.data);
};
Yukarıdaki örnekte, ana iş parçacığı postMessage ile worker’a bir sayı gönderir. Worker bu sayıya kadar olan tüm sayıları toplar ve sonucu geri yollar. Bu işlem sırasında ana iş parçacığı bloke olmaz.
Worker’lar Arası Veri İletimi: Yapısal Klonlama ve Transferable Objects
Mesajlar yapısal klonlama (structured clone) ile kopyalanır. Ancak büyük veriler (örneğin ArrayBuffer) için Transferable Objects kullanarak veriyi kopyalamadan taşıyabilirsiniz. Bu, bellek kullanımını ve performansı iyileştirir.
// Ana iş parçacığı
const buffer = new ArrayBuffer(1024 * 1024 * 100); // 100 MB
worker.postMessage(buffer, [buffer]);
postMessage'ın ikinci parametresi, transfer edilecek nesnelerin listesidir. Bu sayede veri kopyalanmaz, sahiplik devredilir.
Web Worker Türleri
- Dedicated Workers: Tek bir ana iş parçacığı tarafından kullanılır. Yukarıdaki örnek buna girer.
- Shared Workers: Birden fazla sayfa veya iframe tarafından paylaşılabilir.
SharedWorkerile oluşturulur. - Service Workers: Web sayfasından bağımsız çalışır ve ağ isteklerini yönetir. Progresif web uygulamalarında (PWA) sıkça kullanılır.
Hata Yönetimi ve Worker’ı Sonlandırma
Worker içinde oluşan hataları yakalamak için onerror olayını kullanabilirsiniz:
worker.onerror = function(event) {
console.error('Worker hatası:', event.message);
worker.terminate(); // Worker’ı durdur
};
Worker’ı ana iş parçacığından worker.terminate() ile sonlandırabilir veya worker içinde self.close() çağırabilirsiniz.
Gerçek Dünya Kullanım Senaryoları
Görüntü İşleme
Büyük çaplı resim filtreleme veya piksel düzeyinde işlemler worker’larla hızlanır. Tarayıcı donmaz, kullanıcı deneyimi iyileşir.
Büyük Veri Setleri Üzerinde Hesaplama
CSV dosyalarını ayrıştırma, JSON işleme veya istatistiksel analiz gibi yoğun CPU işlemleri için idealdir. Örneğin, React'te Debounce ve Throttle yöntemleriyle birlikte kullanarak kullanıcı girdilerini işleyebilirsiniz.
Gerçek Zamanlı Veri İşleme
WebSocket veya EventSource gibi API’lerden gelen verileri worker’da işleyip ana iş parçacığına sadece sonuçları gönderebilirsiniz. Bu, n8n ile Webhook Entegrasyonu gibi arka plan iş akışlarına benzer bir yaklaşımdır.
Sık Yapılan Hatalar ve Dikkat Edilmesi Gerekenler
- DOM erişimi: Worker içinde
document,windowgibi nesnelere erişemezsiniz. SadeceselfvepostMessagegibi sınırlı API’ler mevcuttur. - Kaynak paylaşımı: Worker’lar dosyaları HTTPS üzerinden yüklemelidir.
file://protokolü çalışmaz. - Performans: Worker oluşturma maliyeti düşüktür ancak çok fazla worker oluşturmak sistem kaynaklarını tüketebilir. Genellikle 1-4 worker yeterlidir.
- Hata ayıklama: Worker’lar tarayıcının geliştirici araçlarında ayrı bir bağlamda çalışır. Chrome DevTools’ta “Sources” panelinde worker dosyalarını bulabilirsiniz.
Sonuç
Web Workers, JavaScript uygulamalarında performansı artırmak için vazgeçilmez bir araçtır. Ağır hesaplamaları arka plana taşıyarak kullanıcı arayüzünün duyarlı kalmasını sağlar. Özellikle büyük veri işleme, görüntü manipülasyonu ve gerçek zamanlı uygulamalar gibi alanlarda etkili bir çözüm sunar. Kendi projelerinizde denemeler yaparak worker’ların gücünü keşfedebilirsiniz.
Sık Sorulan Sorular
Web Workers ile ana iş parçacığı arasında veri nasıl paylaşılır?
Veri alışverişi postMessage ve onmessage API’leri ile yapılır. Gönderilen veriler yapısal klonlama ile kopyalanır. Büyük veriler için Transferable Objects kullanarak kopyalama maliyetinden kaçınılabilir.
Web Workers DOM'a erişebilir mi?
Hayır, Web Workers doğrudan DOM'a erişemez. Ancak, mesajlaşma yoluyla ana iş parçacığından DOM güncellemeleri talep edebilirsiniz.
Birden çok Web Worker oluşturmak performansı artırır mı?
Teoride evet, ancak her worker kendi iş parçacığını kullanır ve çok fazla worker sistem kaynaklarını tüketebilir. Genellikle 1-4 worker önerilir. CPU yoğun işlemleri paralel yapmak için worker havuzu kullanabilirsiniz.
Shared Worker ile Dedicated Worker arasındaki fark nedir?
Dedicated Worker yalnızca bir ana iş parçacığına hizmet ederken, Shared Worker aynı origin altındaki birden çok sayfa veya iframe tarafından paylaşılabilir. Shared Worker, eşzamanlılık ve ortak durum yönetimi gerektiren durumlar için uygundur.
Web Worker'lar hangi tarayıcılarda desteklenir?
Modern tüm tarayıcılar (Chrome, Firefox, Safari, Edge) Web Workers’ı destekler. Eski tarayıcılar için polyfill bulunmamaktadır, bu nedenle kullanmadan önce destek durumunu kontrol edin.
