Yükleniyor...

HTML Web Workers

Önceki Drag and Drop işaretçi olaylarıyla DOM yüklerini taşıyor veya etiketliyordu. Bu ders işaretçi jestlerini bırakır ve Web Workers’ı tanıtır: uzun döngü UI’yi dondurmasın diye arka plan iş parçacığında JavaScript. Kapsam pratik — oluştur, mesajlaş, worker’da DOM yok — SharedWorker filoları değil.

HTML kursunda neden web workers

Yeni başlayanlar ana iş parçacığında meşgul döngüde donmuş sayfa görür. Worker’lar arka plan hesap için ilk yaygın API’dir. DnD’den sonra bölünme farklıdır: sayfa betiği DOM/UI’ye sahiptir; worker ağır hesaba sahiptir ve yalnızca mesajla konuşur.

Doğrudan yanıt

1) new Worker("worker.js") veya Blob. 2) Sayfadan postMessage. 3) Worker’da onmessage, hesapla, postMessage geri. 4) DOM’u yalnızca sayfada güncelleyin. 5) Doğrudan DOM erişimi yok. 6) http(s) veya Blob tercih edin.

📊 main thread vs worker

Topic Main page script Dedicated worker
Typical role UI, DOM, create Worker Heavy compute off UI thread
Talks via postMessage / onmessage postMessage / onmessage
Can touch DOM? Yes No — return data instead
Beginner entry new Worker(url or Blob) onmessage + compute + postMessage
This course depth Required Required (simple round-trip)
Not this lesson Drag-and-drop gestures SharedWorker / Service Worker products

Küçücük Blob Worker gidiş-dönüş

Tek HTML, ayrı worker.js olmadan Blob’dan worker kurar. Sayfa sayı gönderir; worker döngü toplamı döndürür.

Blob Worker compute round-trip

html 
<button id="go" type="button">Run in worker</button>
<pre id="out"></pre>
<script>
const out = document.getElementById("out");
const src =
"onmessage=function(e){" +
"var n=e.data,s=0,i;" +
"for(i=1;i<=n;i++){s+=i;}" +
"postMessage(s);" +
"};";
const blob = new Blob([src], { type: "application/javascript" });
const w = new Worker(URL.createObjectURL(blob));
w.onmessage = function (e) {
out.textContent = "Sum 1..40 = " + e.data;
};
document.getElementById("go").onclick = function () {
out.textContent = "Working…";
w.postMessage(40);
};
</script>

Gidiş-dönüş çağrılarını okumak

  • Blob + createObjectURL ikinci dosya olmadan
  • new Worker arka plan betiğini başlatır
  • postMessage sayıyı gönderir
  • Worker hesaplar ve yanıtlar
  • Sayfa pre’ye yazar — DOM ana iş parçacığında
  • DnD’den farklı: draggable yok
  • Demoyu küçük tutun

UI ana iş parçacığında kalır

Worker veri döndürür; sayfa betiği kullanıcının ne göreceğine karar verir. Bu demo bir dize ister; sayfa onmessage paragrafı günceller.

Worker replies; page updates DOM

html 
<button id="ask" type="button">Ask worker</button>
<p id="msg">Waiting…</p>
<script>
const msg = document.getElementById("msg");
const src =
"onmessage=function(e){" +
"postMessage('Worker got: ' + e.data);" +
"};";
const w = new Worker(
URL.createObjectURL(new Blob([src], { type: "application/javascript" }))
);
w.onmessage = function (e) {
msg.textContent = e.data;
};
document.getElementById("ask").onclick = function () {
w.postMessage("hello");
};
</script>

UI sahipliği fikrini okumak

  • Worker yalnızca dizeyi yankılar — document yok
  • Sayfa textContent atar
  • Aynı mesaj köprüsü
  • DnD değil
  • Service Worker kursu değil
  • İş UI donma riski taşıyorsa worker kullanın
  • Sonraki: SSE

Worker ne zaman kullanılır

  • Uzun CPU döngüsü: iyi intro
  • Minik dize değişikliği: çoğu zaman ana iş parçacığı
  • Kartı bölgeye taşımak: DnD idi
  • GPS: Geolocation idi
  • SharedWorker/Service Worker ürünleri: bu girişin ötesi
  • Worker içinden düğme güncellemek: izin yok

Alıştırma — oluşturun, mesajlaşın, boyayın

  1. Toplam demosunu deneyin.
  2. 40’ı değiştirin.
  3. Yankı demosunu deneyin.
  4. İsteğe bağlı: http(s) üzerinde worker.js.
  5. Cümle: DnD işaretçiyle; Worker’lar mesajla off-thread.
  6. http(s)/Blob tercih edin.
  7. İleri: SSE.

Kolay hatalar

  • Worker içinde querySelector beklemek
  • Minik iş için worker
  • DnD ile karıştırmak
  • Kırılgan file:// yolları
  • Sayfada onmessage unutmak
  • Blob’u tek prod kalıbı saymak
  • Girişi tam SharedWorker kursu saymak

Özet

  • Worker’lar JS’yi UI iş parçacığının dışında çalıştırır
  • postMessage/onmessage; DOM yalnızca sayfada
  • Klasik worker’da document/window yok
  • Demolar için Blob; worker.js için http(s)
  • DnD işaretçiyle taşı/etiketle idi; bu ders arka plan hesap + mesajlar
  • Sonraki: SSE

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
5
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 66 / 68
Html Ders