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 ve betik tamamlanana kadar bu şekilde kalır.

Web worker, arka planda çalışan, diğer betiklerden bağımsız JavaScript'tir ve sayfa performansını etkilemez. Siz her istediğinizi yapabilirsiniz: tıklama, içerik seçme vb., bu sırada web worker arka planda çalışır.

Tarayıcı desteği

Tablodaki sayılar, 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:

Kişisel olarak 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.....
}
    // Üzgünüm! 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 - HTML sayfasına bir mesaj göndermek için kullanılır.

Açıklama: Web worker genellikle bu kadar basit betikler için değil, daha çok CPU kaynakları tüketen görevler için kullanılır.

Web Worker nesnesi oluşturma

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

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 onu 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'ya saklanır.

Web Worker'ı sonlandırma

Web worker oluşturulduktan sonra, mesajları dinlemeye devam eder (dışarıdaki betik tamamlandıktan sonra bile) ve sonlandırılmadıkça durmaz.

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

w.terminate();

Web Worker'ı tekrar kullanma

Eğer worker değişkenini tanımsız olarak ayarlırsanız, 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>

Kişisel olarak deneyin

Web Worker ve DOM

Web Worker dış dosyada yer aldığı için aşağıdaki JavaScript nesnelerine erişemezler:

  • window nesnesi
  • document nesnesi
  • parent nesnesi