Web Worker

Q: Bir web worker DOM'a erişebilir mi?

Hayır. Worker'lar DOM'u, document'ı ya da window'u okuyamaz veya değiştiremez. Sonuçlarını postMessage() ile geri gönderirler ve sayfayı ana iş parçacığındaki kod günceller.

Okunuşu: veb vörkır

Güncellendi 30 Eylül 20262 dk okuma

Kısaca

Web worker, JavaScript'i bir arka plan iş parçacığında çalıştıran tarayıcı özelliğidir; böylece ağır hesaplamalar çalışırken sayfanın arayüzü donmaz.

Web worker nedir?

Bir web sayfasındaki JavaScript normalde tek bir ana iş parçacığında çalışır; bu iş parçacığı aynı zamanda render, tıklama ve kaydırmayı da yönetir. Bir betik sayı işlemeye iki saniye harcarsa sayfa o iki saniye boyunca donar. Web worker, ayrı bir betiği arka plan iş parçacığında çalıştırarak ana iş parçacığını serbest bırakır ve arayüzün yanıt vermeye devam etmesini sağlar.

Bir worker'ı new Worker("worker.js") ile oluşturursunuz; worker import kullanıyorsa { type: "module" } eklersiniz. Sayfa ile worker yalnızca postMessage() ile mesaj göndererek ve message olaylarını dinleyerek iletişim kurar. Veri iş parçacıkları arasında kopyalanır; ancak ArrayBuffer gibi büyük ikili veriler bunun yerine aktarılabilir (transfer), ki bu çok daha hızlıdır. Worker'ların DOM'a ya da window'a erişimi yoktur, fakat fetch, zamanlayıcıları, IndexedDB'yi ve WebAssembly'yi kullanabilirler. Bir dedicated worker tek bir sayfaya aittir; shared worker ise aynı siteden birkaç sekme tarafından kullanılabilir.

Web worker, garson müşterilere hizmet vermeye devam ederken arka odada sebze doğrayan bir mutfak yardımcısı gibidir; ortak bir çalışma alanı paylaşmak yerine bir pencereden not geçirirler. Tipik kullanım alanları görsel ve video işleme, büyük dosyaları ayrıştırma, şifreleme, kod editörlerinde sözdizimi vurgulama ile tarayıcıda WebAssembly modülleri veya küçük makine öğrenimi modelleri çalıştırmadır.

Web worker'lar çoğunlukla service worker'larla karıştırılır. Service worker da bir arka plan betiğidir ama görevi sayfa ile ağ arasında durup önbellekleme, çevrimdışı destek ve push bildirimleri için istekleri yakalamaktır ve hiçbir sayfa açık değilken de çalışabilir. Web worker ise yalnızca sayfası onu kullandığı sürece vardır ve hesaplama içindir. Worker ayrıca kodu kendi başına daha hızlı yapmaz: toplam iş aynıdır, yalnızca ana iş parçacığından taşınır.

Önemli noktalar

Web worker, JavaScript'i ana arayüz iş parçacığından ayrı bir arka plan iş parçacığında çalıştırır.
Sayfa ve worker yalnızca postMessage() ve message olayları aracılığıyla konuşur.
Worker'lar DOM'a dokunamaz ama fetch, zamanlayıcılar ve WebAssembly kullanabilir.
Büyük ikili veri, zaman kazanmak için kopyalanmak yerine aktarılabilir.
Service worker'lar ağ isteklerini ve çevrimdışı desteği; web worker'lar ağır hesaplamayı üstlenir.

Örnek

Ağır bir döngüyü ana iş parçacığından çıkarmakjavascript

// main.js: hand heavy work to a background thread
const worker = new Worker("worker.js");
worker.postMessage({ limit: 10_000_000 });
worker.onmessage = (event) => console.log("Sum:", event.data);
// The page stays responsive while the worker is busy

// worker.js: no DOM access here, only messages in and out
self.onmessage = (event) => {
  let sum = 0;
  for (let i = 0; i < event.data.limit; i++) sum += Math.sqrt(i);
  self.postMessage(sum);
};

Sık sorulan sorular

Bir web worker DOM'a erişebilir mi?

Hayır. Worker'lar DOM'u, document'ı ya da window'u okuyamaz veya değiştiremez. Sonuçlarını postMessage() ile geri gönderirler ve sayfayı ana iş parçacığındaki kod günceller.

Web worker'lar JavaScript'i çok iş parçacıklı yapar mı?

Her worker kendi olay döngüsüyle kendi iş parçacığında çalışır ve varsayılan olarak worker'lar değişken paylaşmaz; bu yüzden sıradan nesneler iki iş parçacığı tarafından aynı anda bozulamaz. Gerçek paylaşımlı bellek yalnızca SharedArrayBuffer ile mümkündür ve bu, sayfanın cross-origin isolated olmasını gerektirir.

Web worker'ı ne zaman kullanmalıyım?

Bir görev sayfanın takılmasına yol açacak kadar uzun sürdüğünde, kabaca 50 milisaniyeyi aşan her şeyde, örneğin büyük bir dosyayı ayrıştırırken ya da bir görseli işlerken kullanın. Kısa görevler ve ağ istekleri worker gerektirmez; çünkü fetch zaten asenkrondur.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin