HTML Web Workers

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

Web Worker nedir?

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

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

Tarayıcı desteği

Tablodaki rakamlar, Web Worker'ı tamamen destekleyen ilk tarayıcı sürümünü gösterir.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

HTML Web Workers örneği

Aşağıdaki örnek, arka planda sayım yapan basit bir web worker oluşturur:

Sayım:

Kendi Kendine Deneyin

Web Worker desteği kontrolü

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

if (typeof(Worker) !== "undefined") {
    // Evet! Web worker destekleniyor!
    // Bazı kodlar.....
}
    // Özür dileriz! Web Worker desteklenmiyor!
}

Web Worker dosyası oluşturma

Şimdi, dışarıdaki bir JavaScript dosyasında web worker'ımızı oluşturalım.

Burada, sayım betiğini oluşturduk. Bu betik "demo_workers.js" dosyasında saklanmaktadır:

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

Bu kodun önemli kısmı postMessage() yöntemidir - bu yöntem HTML sayfasına bir mesaj göndermek için kullanılır.

Açıklama: Web worker genellikle bu kadar basit bir betik için değil, daha fazla CPU kaynağı gerektiren görevler için kullanılır.

Web Worker nesnesi oluşturma

Şimdi web worker dosyamızı elimizde. HTML sayfasından bu dosyayı çağırmanın gerektiğini gördük.

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

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

Sonra web worker'dan gelen ve alabileceğimiz mesajları 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 içinde saklanır.

Web Worker'ı sonlandırma

Web worker oluşturulduktan sonra, sonlandırılmadan önce mesajları dinlemeye devam eder (dışarıdaki betik tamamlandıktan sonra bile).

Web worker'ı sonlandırıp tarayıcı/computer kaynaklarını serbest bırakmak için terminate() yöntemini kullanın:

w.terminate();

Web Worker'ı tekrar kullanma

worker değişkenini tanımsız olarak ayarladığınızda, sonlandırıldıktan sonra bu kodu yeniden kullanabilirsiniz:

w = tanımsız;

Tam Web Worker örneği kodu

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

Örnek

<!DOCTYPE html>
<html>
<body>
<p> Sayıları sayın: <output id="result"></output></p>
<button onclick="startWorker()">Worker Başlat</button> 
<button onclick="stopWorker()">Worker Durdur</button>
<br><br>
<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;
        };
    }
        document.getElementById("result").innerHTML = "Maalesef! Web Worker desteği yok.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

Kendi Kendine Deneyin

Web Worker ve DOM

Web Worker dışarıdaki bir dosyada olduğundan, aşağıdaki JavaScript nesnelerine erişemezler:

  • window nesnesi
  • document nesnesi
  • parent nesnesi