HTML Web Worker’lar

Web worker — sahifa samaradorligiga ta’sir ko‘rsatmasdan fon (background) rejimida ishlaydigan tashqi JavaScript faylidir.

Web Worker nima?

HTML sahifasida skriptlar ishga tushirilganda, sahifa skript tugaguncha javob bermaydigan (unresponsive) holatga o‘tadi.

Web worker — sahifa samaradorligiga ta’sir ko‘rsatmasdan, boshqa skriptlardan mustaqil ravishda fon rejimida ishlaydigan tashqi JavaScript faylidir. Web worker fon rejimida ishlayotganda ham siz istagan ishni qilishda davom etishingiz mumkin: bosish, narsalarni tanlash va h.k.

Web workerlar sahifani javob bermaydigan holatga keltiradigan uzun vazifalarni keltirib chiqarmasdan, asosiy oqimda (main thread) ishlata olmaydigan og‘ir kodlar uchun foydalidir.

Brauzerlarda qo‘llab-quvvatlash

Jadvaldagi raqamlar Web Workers API ni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini bildiradi.

API
Web Workers	4.0	10.0	3.5	4.0	11.5

Web Workers API misoli

Quyidagi misol fon rejimida raqamlarni sanaydigan oddiy web worker yaratadi:

Misol

Count numbers:

O‘zingiz sinab ko‘ring »

Eslatma: odatda Web Worker’lar bunday oddiy skriptlar uchun emas, balki CPU resurslarini ko‘proq talab qiladigan vazifalar uchun ishlatiladi!

Web Worker API qo‘llab-quvvatlanishini tekshirish

Web workerdan foydalanishdan oldin brauzer qo‘llab-quvvatlashini tez tekshirib ko‘rishimiz mumkin:

Misol

Test browser support:

O‘zingiz sinab ko‘ring »

.js Web Worker faylini yaratish

Endi tashqi JavaScript faylida web worker yaratamiz.

Bu yerda sanovchi skript yaratamiz. Skript "demo_workers.js" faylida saqlanadi:

var i = 0;

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

timedCount();

Eslatma: yuqoridagi kodning muhim qismi postMessage() metodidir. U HTML sahifasiga xabarlarni qaytarib yuborish uchun ishlatiladi.

Web Worker obyektini yaratish

.js web worker faylini yaratganimizdan so‘ng, uni HTML sahifadan chaqirishimiz mumkin.

Quyidagi qatorlar worker (w) allaqachon mavjudligini tekshiradi, agar yo‘q bo‘lsa — yangi web worker obyektini yaratadi va "demo_workers.js" fayliga ishora qiladi:

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

So‘ngra web workerga xabar yuborish va undan xabar olishimiz mumkin.

Ma’lumotlar web workerlar va asosiy o‘qim (main thread) o‘rtasida xabarlar tizimi orqali yuboriladi — ikkala tomon ham xabarlarini postMessage() metodi bilan yuboradi va onmessage hodisa ishlovchisi orqali javob beradi.

Web worker obyektiga onmessage hodisa tinglovchisini qo‘shing.

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

.js faylidagi Web Worker xabar yuborganda, hodisani tinglovchi ichidagi kod bajariladi. Web Worker’dan kelgan ma’lumotlar event.data da saqlanadi.

Web Worker’ni to‘xtatish

Web worker obyekti yaratilgach, u tugatilmaguncha xabarlarni tinglashda davom etadi.

Web worker obyektini tugatish va brauzer/kompyuter resurslarini bo‘shatish uchun terminate() metodidan foydalaning:

w.terminate();

Web Worker’ni qayta ishlatish

Agar web worker o‘zgaruvchisini, u tugatilgandan so‘ng, undefined qib qo‘ysangiz, worker/kodni qayta ishlatishingiz mumkin:

w = undefined;

To‘liq Web Worker misoli

.js faylidagi web worker kodini allaqachon ko‘rdik.

Quyida HTML sahifa uchun to‘liq kod keltirilgan:

Misol

<!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>
let w;

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

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

</body>
</html>

O‘zingiz sinab ko‘ring »

Web Workers va DOM

Web workerlar tashqi .js fayllarida bo‘lgani uchun ular quyidagi JavaScript obyektlariga kirish huquqiga ega emas:

window obyekti
document obyekti
parent obyekti

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish