HTML Web Çalışanları API'si
Web çalışanı, sayfanın performansını etkilemeden arka planda çalışan bir JavaScript'tir.
Web Çalışanı nedir?
Bir HTML sayfasında komut dosyaları yürütülürken, komut dosyası tamamlanana kadar sayfa yanıt vermemeye başlar.
Web çalışanı, sayfanın performansını etkilemeden diğer komut dosyalarından bağımsız olarak arka planda çalışan bir JavaScript'tir. Web işçisi arka planda çalışırken, istediğinizi yapmaya devam edebilirsiniz: tıklama, bir şeyler seçme, vb.
Tarayıcı Desteği
Tablodaki sayılar, Web Workers'ı tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML Web Çalışanları Örneği
Aşağıdaki örnek, arka planda sayıları sayan basit bir web çalışanı oluşturur:
Örnek
Web Çalışanı Desteğini Kontrol Edin
Bir web çalışanı oluşturmadan önce, kullanıcının tarayıcısının bunu destekleyip desteklemediğini kontrol edin:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
}
else {
// Sorry! No Web Worker support..
}
Bir Web Çalışanı Dosyası Oluşturun
Şimdi, web çalışanımızı harici bir JavaScript'te oluşturalım.
Burada, sayan bir komut dosyası oluşturuyoruz. Komut dosyası "demo_workers.js" dosyasında saklanır:
var i = 0;
function timedCount()
{
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
Yukarıdaki kodun önemli kısmı postMessage(), HTML sayfasına bir mesaj göndermek için kullanılan yöntemdir.
Not: Normalde web çalışanları bu tür basit komut dosyaları için değil, daha fazla CPU yoğun görev için kullanılır.
Bir Web Çalışanı Nesnesi Oluşturun
Artık web işçi dosyasına sahip olduğ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, değilse - yeni bir web çalışanı nesnesi oluşturur ve kodu "demo_workers.js" içinde çalıştırır:
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
Ardından web çalışanından mesaj gönderip alabiliriz.
Web çalışanına bir "onmessage" olay dinleyicisi ekleyin.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Web çalışanı bir mesaj gönderdiğinde, olay dinleyicisindeki kod yürütülür. Web çalışanından alınan veriler, event.data'da saklanır.
Bir Web Çalışanını Sonlandırma
Bir web işçisi nesnesi oluşturulduğunda, sonlandırılana kadar (harici komut dosyası tamamlandıktan sonra bile) mesajları dinlemeye devam edecektir.
Bir web çalışanını ve ücretsiz tarayıcı/bilgisayar kaynaklarını sonlandırmak için şu
terminate()yöntemi kullanın:
w.terminate();
Web Çalışanını Yeniden Kullanın
Çalışan değişkeni tanımsız olarak ayarlarsanız, sonlandırıldıktan sonra kodu yeniden kullanabilirsiniz:
w = undefined;
Tam Web Çalışanı Örnek Kodu
Worker kodunu .js dosyasında zaten görmüştük. HTML sayfasının kodu aşağıdadır:
Ö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>
<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 = "Sorry! No Web Worker support.";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Web Çalışanları ve DOM
Web çalışanları harici dosyalarda olduğundan, aşağıdaki JavaScript nesnelerine erişimleri yoktur:
- pencere nesnesi
- belge nesnesi
- ana nesne