Veb ishchilari nima va ular nima uchun kerak?

Web ishchilari — bu fon oqimlarida, asosiy UI oqimidan ajralgan holda skriptlarni bajarish usulidir.

Ularning asosiy maqsadlari:

• Ishlash qobiliyatini oshirish: Resurslarni ko‘p talab qiladigan vazifalarni (murakkab hisoblashlar, katta hajmdagi ma’lumotlarni qayta ishlash, parsing) asosiy oqimdan olib tashlash, bu oqim interfeysni chizish va foydalanuvchi voqealarini boshqarish uchun javobgardir. Bu sahifa “qaynatishini” oldini oladi va ilovaning javob berish qobiliyatini yaxshilaydi.
• Paralelizm: Bir nechta vazifalarni bir vaqtning o‘zida bajarish imkonini beradi, ko‘p yadroli protsessorlardan samarali foydalanish uchun.

Web ishchilarning uchta turi mavjud:

1. Dedicated Workers: Muayyan sahifa bilan bog‘langan va faqat unga kirish mumkin.
2. Shared Workers: Bir nechta sahifa yoki tablardan kirish mumkin.
3. Service Workers: Tarmoq proksi sifatida ishlaydi, tarmoq so‘rovlarini ushlaydi va offline funksiyalar, push-xabarnomalar va boshqa ilg‘or veb-ilovalar (PWA) imkoniyatlarini amalga oshirish imkonini beradi.

Ishlash prinsiplari:

• Alohida kontekst: Ishchi o‘zining global obyekti va brauzer API ning kichik bir qismiga kirish huquqiga ega (DOM, window, document, parent ga kirish yo‘q).
• Xabar almashinuvi: Asosiy oqim va ishchi o‘rtasidagi o‘zaro ta’sir postMessage() va onmessage voqea ishlovchisi orqali amalga oshadi. Ma’lumotlar qiymat bilan (nusxa ko‘chiriladi) yoki havola bilan (Transferable Objects) uzatiladi.

Dedicated Worker’dan foydalanish misoli:

// main.js (asosiy oqim)
const worker = new Worker('worker.js'); // Ishchi yaratish

worker.onmessage = (event) => {
  // Ishchidan kelgan xabarni qayta ishlash
  console.log('Olingan:', event.data);
};

worker.postMessage('Murakkab operatsiyani boshlash'); // Ishchiga xabar yuborish

// worker.js (ishchi fayl)
onmessage = (event) => {
  // Asosiy oqimdan kelgan xabarni qayta ishlash
  console.log('Asosiy oqimdan:', event.data);

  // Murakkab vazifani bajarish
  let result = 0;
  for (let i = 0; i < 1000000000; i++) {
    result += i;
  }

  // Natijani qaytarish
  postMessage(result);
};