Web Worker’lar

Hozirgacha ushbu qo‘llanmadagi barcha misollar brauzerning asosiy oqimida ishlaydi.

Asinxron dasturlash quyidagilarni kutish paytida ilovalarning javob berish qobiliyatini saqlab qoladi:

Timers
User input
Network requests

Biroq, uzoq davom etgan hisob-kitoblar hali ham asosiy oqimni bloklashi va sahifani javob bermasligi mumkin.

Web Worker’lari buni JavaScript-ni alohida oqimda ishga tushirish orqali hal qilishadi.

Nega Web Worker’lar?

JavaScript odatda bir vaqtda bitta vazifani bajaradi.

Agar vazifani bajarish uchun uzoq vaqt kerak bo‘lsa, vazifa bajarilmaguncha brauzer foydalanuvchi kiritishiga javob bera olmaydi.

Bu sahifani qotib qolgandek ko‘rsatishi mumkin.

Hisoblash tugamaguncha sahifa javob bermayapti.

Misol

Uzoq davom etgan hisob-kitob sahifani muzlatib qo‘yadi.

function calculate() {
  let total = 0;
  for (let i = 0; i < 5e9; i++) {
    total += i;
  }
  return total;
}

myDisplayer("Calculating...");

let result = calculate();

myDisplayer(result);

O‘zingiz sinab ko‘ring »

Asinxron dasturlash yordam bera oladimi?

Taymerlar, Promiselar va async/await bu muammoni hal qilmaydi.

Ularning barchasi JavaScript-ni bir xil asosiy oqimda bajaradi.

Agar ip hisob-kitoblarni bajarish bilan band bo‘lsa, brauzer hali ham kutishi kerak.

Misol

myDisplayer("Start");

setTimeout(function () {
myDisplayer("Timer")}, 1000);

let i = 5e9;
while (--i > 0);

myDisplayer("Finished");

Taymer bir soniyadan so‘ng tugaydi, lekin uni callback qilish sikl tugamaguncha bajarilmaydi.

O‘zingiz sinab ko‘ring »

Web Worker nima?

Web Worker JavaScript’ni alohida oqimda bajaradi.

Ishchi hisob-kitoblarni amalga oshirayotganda, brauzerning asosiy oqimi foydalanuvchi kiritishiga javob berish uchun bepul bo‘lib qoladi.

Asosiy tarmoq va ishchi xabarlar yuborish orqali muloqot qiladi.

Brauzerlarda qo‘llab-quvvatlash

Worker yaratishdan oldin brauzer Web Worker’larni qo‘llab-quvvatlashini tekshiring.

Misol

if (typeof(Worker) !== "undefined") {
myDisplayer("Web Workers are supported.");
} else {
myDisplayer("Web Workers are not supported.");
}

O‘zingiz sinab ko‘ring »

Worker yaratish

Yangi Worker() konstruktori yordamida ishchi yarating.

const worker = new Worker("worker.js");

Konstruktorga uzatilgan fayl ishchi ipda ishlaydigan kodni o‘z ichiga oladi.

Xabarlarni qabul qilish

Asosiy mavzu onmessage hodisasi bilan xabarlarni oladi.

Misol

const worker = new Worker("worker.js");

worker.onmessage = function(event) {
myDisplayer(event.data);
};

O‘zingiz sinab ko‘ring »

Xabarlarni yuborish

Asosiy oqim worker’ga postMessage() yordamida ma’lumot yuboradi.

Asosiy sahifa:

const worker = new Worker("worker.js");

worker.postMessage(25);

worker.js

onmessage = function(event) {
postMessage(event.data * event.data);
}

Natija

625

To‘liq misol

Misol

const worker = new Worker("worker.js");

worker.onmessage = function(event) {
myDisplayer(event.data);
};

worker.postMessage(1000000);

worker.js

onmessage = function(event) {
  let sum = 0;
  for (let i = 0; i <= event.data; i++) {
    sum += i;
  }
  postMessage(sum);
};

Eslatma

Hisoblash ishchida sodir bo‘ladi.

Sahifa foydalanuvchi harakatlariga javob berishda davom etadi.

1-qism xulosasi

Web Worker’lar JavaScript’ni alohida oqimda bajaradi.
Worker’lar uzoq davom etadigan hisob-kitoblar paytida asosiy oqimning javob berish qobiliyatini saqlab qoladi.
Worker’ni new Worker() bilan yarating.
Workers communicate using postMessage().
Xabarlarni onmessage hodisasi orqali qabul qiling.

Web Worker’lar, 2-qism

Worker’ga ma’lumot uzatish

postMessage() usuli raqamlar, stringlar, massivlar va obyektlarni yuborishi mumkin.

Brauzer ma’lumotlarni nusxalaydi va nusxasini ishchiga yuboradi.

Asosiy sahifa:

const worker = new Worker("worker.js");

const person = {
  name: "John",
  age: 30
};

worker.postMessage(person);

worker.onmessage = function(event) {
  document.getElementById("demo").innerHTML = event.data;
};

worker.js:

onmessage = function(event) {
  const person = event.data;
  const message = person.name + " is " + person.age + " years old.";
  postMessage(message);
};

Eslatma

Worker obyektni event.data orqali qabul qiladi.

Worker’ning jarayon haqidagi xabarlari

Worker bir nechta xabar yuborishi mumkin.

Bu uzoq hisob-kitoblar davom etayotganda taraqqiyot haqida hisobot berish imkonini beradi.

Asosiy sahifa:

const worker = new Worker("worker.js");

worker.onmessage = function(event) {
document.getElementById("demo").innerHTML = event.data;
};

worker.postMessage(100000000);

worker.js:

onmessage = function(event) {
  const limit = event.data;
  let total = 0;
  for (let i = 0; i <= limit; i++) {
    total += i;
    if (i % 10000000 === 0) {
      postMessage("Progress: " + Math.round(i / limit * 100) + "%");
    }
  }
  postMessage("Result: " + total);
};

Eslatma

Worker asosiy sahifani bloklamasdan jarayon haqidagi xabarlarni yuboradi.

Worker ishlayotgan vaqtda ham asosiy oqim (main thread) tugmalar, sahifani aylantirish (scroll) va boshqa foydalanuvchi harakatlariga javob bera oladi.

Worker’ni ishga tushirish

Foydalanuvchi vazifani boshlaganda ishchi yaratilishi mumkin.

Ishchini o‘zgaruvchida saqlash keyinchalik havolani to‘xtatish yoki qayta ishlatish imkonini beradi.

Misol

let worker;

function startWorker() {
  worker = new Worker("worker.js");

  worker.onmessage = function(event) {
    document.getElementById("demo").innerHTML = event.data;
  };

  worker.postMessage(100000000);
}

Worker’ni to‘xtatish

Worker’ni darhol to‘xtatish uchun terminate() metodidan foydalaning.

worker.terminate();

Eslatma

Ishchi ishdan bo‘shatilgandan so‘ng, uni qayta ishga tushirish mumkin emas.

Agar vazifani qayta bajarish kerak bo‘lsa, yangi worker yarating.

Misol

let worker;

function startWorker() {
  if (worker) {
    return;
  }

  worker = new Worker("worker.js");

  worker.onmessage = function(event) {
    document.getElementById("demo").innerHTML = event.data;
  };

  worker.postMessage(100000000);
}

function stopWorker() {
  if (worker) {
    worker.terminate();
    worker = undefined;
    document.getElementById("demo").innerHTML = "Worker stopped";
  }
}

Ishga tushirish va to‘xtatishning to‘liq misoli

Ushbu misol ishchida uzoq hisob-kitoblarni boshlaydi.

Ishchi taraqqiyot haqida xabar beradi va u tugashidan oldin to‘xtatilishi mumkin.

Misol

Asosiy sahifa:

<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

Ready

let worker;

function startWorker() {
  if (worker) {
    return;
  }

  document.getElementById("demo").innerHTML = "Starting...";

  worker = new Worker("worker.js");

  worker.onmessage = function(event) {
    document.getElementById("demo").innerHTML = event.data;

    if (event.data.startsWith("Result:")) {
      worker.terminate();
      worker = undefined;
    }
  };

  worker.postMessage(100000000);
}

function stopWorker() {
  if (worker) {
    worker.terminate();
    worker = undefined;
    document.getElementById("demo").innerHTML = "Worker stopped";
  }
}

worker.js:

onmessage = function(event) {
  const limit = event.data;
  let total = 0;

  for (let i = 0; i <= limit; i++) {
    total += i;

    if (i % 10000000 === 0) {
      const percent = Math.round(i / limit * 100);
      postMessage("Progress: " + percent + "%");
    }
  }

  postMessage("Result: " + total);
};

Worker xatolari

Ishchi xatolarini qayta ishlash uchun onerror hodisasidan foydalaning.

Misol

const worker = new Worker("worker.js");

worker.onerror = function(error) {
document.getElementById("demo").innerHTML =
"Error: " + error.message;
};

Xato obyekti xabar, fayl nomi va String raqami kabi ma’lumotlarni o‘z ichiga olishi mumkin.

Xususiyat	Tavsif
`message`	Xato xabari.
`filename`	Xatolik yuz bergan fayl.
`lineno`	Xatolik yuz bergan qator raqami.
`colno`	Xatolik yuz bergan ustun raqami.

Worker ichidagi xatolarni qayta ishlash

Ishchi ham o‘z xatolarini qo‘lga olishi va asosiy oqimga xabar yuborishi mumkin.

Asosiy sahifa:

worker.onmessage = function(event) {
  if (event.data.error) {
    document.getElementById("demo").innerHTML = event.data.error;
  } else {
    document.getElementById("demo").innerHTML = event.data.result;
  }
};

worker.js:

onmessage = function(event) {
  try {
    const result = calculate(event.data);
    postMessage({result: result});
  } catch(error) {
    postMessage({error: error.message});
  }
};

Worker’ni ichkaridan yopish

Ishchi close() ni chaqirib, o‘zini to‘xtata oladi.

postMessage("Finished");
close();

close() funksiyasi joriy kod tugagandan so‘ng ishchini to‘xtatadi.

Metod	Qayerdan chaqiriladi	Tavsif
`worker.terminate()`	Main thread	Ishchini darhol to‘xtatadi.
`close()`	Worker thread	Worker’ga o‘zini o‘zi to‘xtatish imkonini beradi.

Yangi worker yaratish

To‘xtatilgan worker’ni qayta ishga tushirib bo‘lmaydi.

Vazifani qayta bajarish uchun yangi Worker obyektini yarating.

worker = new Worker("worker.js");

Ishchi o‘zgaruvchisini tugatishdan keyin undefined yoki null ga o‘rnating.

Bu ishchi hozirda ishlayotganligini bilishni osonlashtiradi.

Bitta worker yoki ko‘p worker?

Sahifa bir nechta worker yaratishi mumkin.

const worker1 = new Worker("worker1.js");
const worker2 = new Worker("worker2.js");

Har bir worker alohida oqimda ishlaydi.

Biroq ko‘p worker yaratish sezilarli xotira va hisoblash quvvatini sarflashi mumkin.

Ishchilardan faqat alohida oqimda ishlashdan foyda ko‘radigan vazifalar uchun foydalaning.

Har bir kichik hisob-kitob uchun yangi ishchi yaratmang.

Worker hayot sikli

Web Worker odatda quyidagi qadamlarni bajaradi:

Asosiy sahifa ishchini yaratadi.
Asosiy sahifa postMessage() yordamida ma’lumot yuboradi.
Ishchi ma’lumotlarni oladi.
Worker o‘z vazifasini bajaradi.
Worker natijalarni qaytarib yuboradi.
Asosiy sahifa natijadan foydalanadi.
Ishchi kerak bo‘lmaganda tugatiladi.

Create Worker
      |
      |
      v
Send Data
      |
      |
      v
Worker Calculates
      |
      |
      v
Send Result
      |
      |
      v
Stop Worker

2-qism xulosasi

Worker’lar stringlar, sonlar, massivlar va obyektlarni qabul qila oladi.
Worker jarayon haqida xabar berish uchun bir nechta xabar yuborishi mumkin.
Ishchini asosiy ipdan to‘xtatish uchun terminate() dan foydalaning.
Ishchini ishchi ichidan to‘xtatish uchun close() dan foydalaning.
Worker xatolarini qayta ishlash uchun onerror’dan foydalaning.
To‘xtatilgan worker’ni qayta ishga tushirib bo‘lmaydi.
Vazifani qayta ishga tushirish uchun yangi ishchi obyektini yarating.

Worker nimalar qila oladi?

Web Worker JavaScript’ni xuddi asosiy oqim kabi bajaradi.

U hisob-kitoblarni amalga oshirishi, taymerlardan foydalanishi, tarmoq so‘rovlarini amalga oshirishi va JavaScript obyektlari bilan ishlashi mumkin.

Bu ishchilarni protsessor talab qiladigan vazifalar uchun foydali qiladi, aks holda sahifani bloklaydi.

Task	Supported
JavaScript calculations	Ha
Looplar	Ha
Functionlar	Ha
Arraylar va obyektlar	Ha
Promises	Ha
fetch()	Ha
setTimeout()	Ha
setInterval()	Ha

Ishchi nima qila olmaydi?

Ishchi veb-sahifaga kira olmaydi.

DOM-ni faqat asosiy oqim o‘zgartirishi mumkin.

Xususiyat	Available
`document`	Yo‘q
`window`	Yo‘q
HTML elementlar	Yo‘q
DOM events	Yo‘q
alert()	Yo‘q

Worker hisob-kitoblarni bajaradi.

Asosiy mavzu foydalanuvchi interfeysini yangilaydi.

Sahifani yangilash

Worker HTML’ni to‘g‘ridan-to‘g‘ri yangilay olmaydi.

Buning o‘rniga u natijani asosiy oqimga yuboradi.

Misol

worker.js:

postMessage("Finished");

Asosiy sahifa:

worker.onmessage = function(event) {
document.getElementById("demo").innerHTML = event.data;
};

Worker ichida fetch()’dan foydalanish

Worker serverdan ma’lumot yuklab olishi mumkin.

Yuklab olingan ma’lumotlar keyinchalik asosiy oqimga yuborilishi mumkin.

Misol

worker.js:

async function loadData() {
  const response = await fetch("data.txt");
  const text = await response.text();
  postMessage(text);
}

loadData();

O‘zingiz sinab ko‘ring »

Taymerlardan foydalanish

Workers support JavaScript timers.

Misol

setInterval(function() {
postMessage(new Date().toLocaleTimeString());
}, 1000);

Ishchidan qachon foydalanish kerak?

Worker’lar uzoq davom etadigan JavaScript vazifalari uchun foydali.

Good Uses
Large mathematical calculations
Image processing
Video processing
Searching large datasets
Siqish va ochish (dekompressiya)
Encryption
Artificial Intelligence
Scientific calculations

Qachon ishchidan foydalanmaslik kerak?

Kichik ishlar uchun ishchilar kerak emas.

Worker yaratish vaqt oladi va xotira sarflaydi.

Oddiy hisob-kitoblar ko‘pincha asosiy oqimda tezroq bajariladi.

Vazifa boshqa ipdan foyda olish uchun yetarlicha katta bo‘lmasa, ishchi yaratmang.

Asinxron dasturlash va Web Worker’lar

Asinxron dasturlash va Web Worker’lar turli muammolarni hal qiladi.

Asynchronous Programming	Web Workers
Bitta JavaScript oqimi	Multiple JavaScript threads
Kutish uchun qulay	Hisoblash uchun qulay
Promise’lar va async/await’dan foydalanadi	Uses Worker objects
Network requests	CPU-intensive tasks
Kutish vaqtida bloklamaydi	Hisoblashda bloklanmaydi

Asynchronous programming keeps JavaScript busy while waiting.

JavaScript hisoblanayotganda Web Worker’lar brauzerni javob beradi.

Umumiy xatolar

DOM’ga murojaat qilishga urinish

Bu ishlamaydi:

document.getElementById("demo").innerHTML = "Hello";

Workers must use postMessage() instead.

Juda ko‘p worker yaratish

Worker’lar xotira va protsessor resurslarini sarflaydi.

Faqat kerakli worker’larni yarating.

Worker’larni to‘xtatishni unutish

Ishchilarga kerak bo‘lmaganda ularni ishdan bo‘shatish.

worker.terminate();

Xulosa

Web Worker’lar JavaScript’ni alohida oqimda bajaradi.
Worker’lar uzoq hisob-kitoblar paytida asosiy oqimning javob berish qobiliyatini saqlab qoladi.
Worker’lar asosiy oqim bilan postMessage() yordamida aloqa qiladi.
Worker’lar DOM’ga murojaat qila olmaydi.
Workers support Promises, fetch(), and timers.
Protsessorni ko‘p yuklaydigan vazifalar uchun worker’lardan foydalaning.
Taymerlar va tarmoq so‘rovlari kabi operatsiyalarni kutish uchun asinxron dasturlashdan foydalaning.

Tabriklaymiz!

Siz JavaScript asinxron dasturlash qo‘llanmasini tugatdingiz.

Siz JavaScript-ning asinxron operatsiyalarni qanday boshqarishini bilib oldingiz:

Callbacks
Promises
async / await
Hodisalar sikli (Event Loop)
Timers
Fetch API
AbortController
Web Workers

Endi siz asinxron operatsiyalar va uzoq muddatli hisob-kitoblarni samarali bajara oladigan sezgir JavaScript ilovalarini yaratishga tayyorsiz.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish