En son web geliştirme öğreticiler

HTML Web Workers

❮ Önceki Sonraki Bölüm ❯

Bir web worker bir JavaScript sayfanın performansını etkilemeden arka planda çalışıyor.

Bir nedir Web Worker ?

Bir HTML sayfası komut dosyalarını yürütürken komut bitene kadar, sayfa tepkisiz hale gelir.

Bir web worker sayfasının performansını etkilemeden, bağımsız diğer komut, arka planda çalışan bir JavaScript'tir. Tıklayarak, vb şeyler seçerek ederken: İstediğinizi yapmaya devam edebilir web worker arka planda çalışır.

Tarayıcı Desteği

Tablodaki rakamlar tamamen destekleyen ilk tarayıcı sürümü belirtmek Web Workers .

API
Web Workers 4.0 10.0 3.5 4.0 11.5

HTML Web Workers Örneği

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

Örnek

Count numbers:

Kendin dene "

Kontrol Web Worker Destek

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

if(typeof(Worker) !== "undefined") {
    // Yes! Web worker support!
    // Bir oluşturma Web Worker Dosyası

Şimdi, bizim yapalım web worker harici JavaScript.

Burada, sayar bir komut dosyası oluşturun. Komut saklanır "/html/demo_workers.js" dosyası:

var i = 0;

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

timedCount() ;

Kodun önemli parçası üzerindedir postMessage() geri HTML sayfasına bir mesaj göndermek için kullanılır - yöntemi.

Note: Normalde web workers böyle basit komut dosyaları için kullanılan, ancak daha fazla CPU yoğun görevler için değildir.

Bir oluşturma Web Worker Nesnesi

Şimdi sahip olduğumuz web worker dosyasını, biz bir HTML sayfasından demen gerekiyor.

Aşağıdaki satırlar denetler web worker değilse zaten var - bu yeni oluşturur web worker nesnesi ve kod çalışır "/html/demo_workers.js" :

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

Sonra gönderip gelen mesajları alabilir web worker .

Bir ekleme "onmessage" için olay dinleyicisi web worker .

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

Ne zaman web worker mesajlar bir mesaj, olay dinleyicisi içinde kod yürütülür. Veri web worker event.data depolanır.

Bir sonlandırma Web Worker

Bir zaman web worker nesnesi oluşturulduğunda, bu mesajlar için dinlemeye devam edeceğiz (even after the external script is finished) o sonlandırılır kadar.

Bir sonlandırmak için web worker kullanın ve ücretsiz tarayıcı / bilgisayar kaynaklarını terminate() yöntemini:

w.terminate();

Yeniden Web Worker

Eğer ayarlarsanız web worker tanımsız değişkeni o son verdikten sonra, kodu yeniden kullanabilirsiniz:

w = undefined;

Tam Web Worker Örnek Kod

Biz zaten gördük Web Worker kodu .js dosyası. Aşağıda HTML sayfası kodu şöyledir:

Örnek

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>
var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("/html/demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}

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

</body>
</html>
Kendin dene "

Web Workers ve DOM

Yana web workers dış dosyalarda, onlar aşağıdaki JavaScript nesnelere erişimi yok:

  • pencere nesne
  • belge nesne
  • üst nesne

❮ Önceki Sonraki Bölüm ❯