HTML Web Workers API

Web Worker, sayfanın performansını etkilemeden arka planda çalışan bir JavaScript’tir.

Web Worker Nedir?

Bir HTML sayfasında komut dosyalarını çalıştırırken, komut dosyası tamamlanana kadar sayfa yanıt vermez hale gelir.

web worker, diğer komut dosyalarından bağımsız olarak, sayfanın performansını etkilemeden arka planda çalışan bir JavaScript’tir. web worker arka planda çalışırken, istediğiniz her şeyi yapmaya devam edebilirsiniz. Örneğin bir yerlere tıklamak, bir şeyler seçmek gibi.

Tarayıcı Desteği

HTML Web Worker Örneği

Aşağıdaki örnek, arka planda sayıları sayan basit bir web worker oluşturur: demo_worker.js dosyası oluşturulmadığı için kod çalışmayacaktır. Daha aşağıda js dosyası için uygun kodlar vereceğim.

<!DOCTYPE html>
<html>
<body>

<p>Sayaç: <output id="result"></output></p>
<button onclick="startWorker()">Başlat</button> 
<button onclick="stopWorker()">Durdur</button>

 
<script>
var w;

function startWorker() {
  if(typeof(Worker) !== "undefined") {
    if(typeof(w) == "undefined") {
      w = new Worker("demo_workers.js");
    }
    w.onmessage = function(event) {
      document.getElementById("result").innerHTML = event.data;
    };
  } else {
    document.getElementById("result").innerHTML = "Tarayıcınız Desteklemiyor...";
  }
}

function stopWorker() { 
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

Web Worker Destekliyor Mu?

Bir web worker oluşturmadan önce kullanıcının tarayıcısının bunu destekleyip desteklemediğini kontrol etmek gerekir:

if (typeof(Worker) !== "undefined") {
  // Destekliyor
  // Çalışacak Kodlar.....
} else {
  // Desteklemiyorsa yapılacak işlemler çalışacak kodlar..
}

Web Worker Dosyası Oluşturma

Web Worker için harici bir JavaScript dosyası oluşturalım.

Komut dosyası adını “demo_workers.js” yapıyoruz.

var i = 0;

function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();

Yukarıdaki kodun önemli kısmı, bir mesajı HTML sayfasına geri göndermek için kullanılan postMessage() yöntemidir.

Not: Normalde web worker bu kadar basit komut dosyaları için değil, daha fazla CPU kullanan görevler için kullanılır.

Web Worker Nesnesi Oluşturma

Web worker oluşturduğumuza göre onu bir HTML sayfasından çağırmamız gerekiyor.

Aşağıdaki satırlar, çalışanın zaten var olup olmadığını kontrol eder; yoksa yeni bir web çalışanı nesnesi oluşturur ve “demo_workers.js” içindeki kodu çalıştırır:

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

Daha sonra worker’a mesaj gönderip alabiliriz.

web workera bir “onmessage” olay dinleyicisi ekleyin.

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

Web worker bir mesaj gönderdiğinde olay dinleyicisindeki kod yürütülür. Gelen veriler event.data’da saklanır.

Web Worker Sonlandırma

Bir web çalışanı nesnesi oluşturulduğunda, sonlandırılıncaya kadar (harici komut dosyası bittikten sonra bile) mesajları dinlemeye devam edecektir.

Bir web çalışanını sonlandırmak ve tarayıcı/bilgisayar kaynaklarını serbest bırakmak için, terminate() yöntemini kullanın:

w.terminate();

Web Worker’ı Yeniden Kullanma

Çalışan değişkenini tanımsız olarak ayarlarsanız, sonlandırıldıktan sonra kodu yeniden kullanabilirsiniz:

w = undefined;

Aşağıda Web Worker Tam Kod Halini Görebilirsiniz

Worker kodunu zaten .js dosyasında görmüştük. HTML sayfasının kodu aşağıdadır:

<!DOCTYPE html>
<html>
<body>

<p>Sayaç: <output id="result"></output></p>
<button onclick="startWorker()">Başlat</button>
<button onclick="stopWorker()">Durdur</button>

<script>
var w;

function startWorker() {
  if (typeof(Worker) !== "undefined") {
    if (typeof(w) == "undefined") {
      w = new Worker("demo_workers.js");
    }
    w.onmessage = function(event) {
      document.getElementById("result").innerHTML = event.data;
    };
  } else {
    document.getElementById("result").innerHTML = "Tarayıcı Desteklemiyor.";
  }
}

function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>
7 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir