Web Worker API'si

Web Worker, sayfa performansını etkilemeyen arka planda çalışan JavaScript'tir.

Web Worker nedir?

HTML sayfasında betik çalıştırırken, sayfa betik tamamlanana kadar yanıt vermez.

Web Worker, arka planda çalışan ve diğer betiklerden bağımsız olan JavaScript'tir, sayfa performansını etkilemez. Herhangi bir şey yapmakta devam edebilirsiniz: tıklama, içerik seçme vb., aynı zamanda web worker arka planda çalışır.

Tarayıcı desteği

Tablo, Web Workers'ın tamamen desteklenen ilk tarayıcı sürümlerini belirtmektedir:

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
2010 Ocak 2012 Eylül 2009 Haziran 2009 Haziran 2011 Haziran

Web Worker örneği

Aşağıdaki örnek, arka planda hesaplayan basit bir Web Worker oluşturur:

Örnek

Sayı:

Kişisel Deneyim

Web Worker tarayıcısını kontrol etme

Web Worker oluşturmadan önce, kullanıcının tarayıcısının bunu destekleyip desteklemediğini kontrol edin:

if (typeof(Worker) !== "undefined") {
  // Evet! Web Worker desteği!
  // Bazı kodlar.....
} else {
  // Özür dileriz! Web Worker desteği yok.
}

Web Worker dosyası oluşturma

Şimdi, dışarıdaki JavaScript'te Web Worker'ımızı oluşturalım.

Burada, önemli bir betiği oluşturuyoruz. Bu betik "demo_workers.js" dosyasında saklanır:

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

Yukarıdaki kodun önemli kısmı: postMessage() Yöntem - Mesajı HTML sayfasına göndermek için kullanılır.

Açıklama:Genellikle web worker, bu tür basit betikler için değil, CPU yoğun görevler için kullanılır.

Web Worker nesnesi oluşturma

Şimdi web worker dosyamızı elde ettik, HTML sayfasından onu çağırmamız gerekiyor.

Aşağıdaki kod satırı worker'ın var olup olmadığını kontrol eder, yoksa yeni bir web worker nesnesi oluşturur ve "demo_workers.js" dosyasındaki kodu çalıştırır:

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

Sonra web worker'dan gelen mesajları gönderip alabiliriz.

Web worker'a bir "onmessage" olay dinleyicisi ekleyin.

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

Web Worker mesaj gönderdiğinde, olay dinleyicisindeki kod çalıştırılır. Web Worker'dan gelen veriler event.data'da saklanır.

Web Worker'ı sonlandırma

Web worker nesnesi oluşturulduğunda, dışarıdaki betik tamamlansa bile mesajları dinlemeye devam eder (sonlandırılmadıkça).

Web worker nesnesini sonlandırmak ve tarayıcı/computer kaynaklarını serbest bırakmak için aşağıdaki komut kullanın: terminate() Yöntem:

w.terminate();

Web Worker'ı yeniden kullanma

worker değişkeni undefined olarak ayarlandığında, worker sona erdiğinde aşağıdaki kodu yeniden kullanabilirsiniz:

w = undefined;

Tam Web Worker örneği kodu

Biz Worker kodunu .js dosyasında gördük. Aşağıda HTML sayfasının kodu bulunmaktadır:

Örnek

<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Worker Durdur</button>
<script>
let w;
function startWorker() {
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}
function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>
</body>
</html>

Kişisel Deneyim

Web Worker ve DOM

Web Worker dış dosyada bulunması nedeniyle, aşağıdaki JavaScript nesnelerine erişemezler:

  • window Nesnesi
  • document Nesnesi
  • parent Nesnesi