Web Workers. JavaScript-da Parallel Hisoblash

Web Workers haqida batafsil qo'llanma, ularning ishlashi, afzalliklari, cheklovlari va amaliy misollari bilan

So'nggi yangilanish: 2025-01-05

Hozir Web Workers haqida batafsil o'rganamiz. Web Workers - bu JavaScript-da parallel hisoblashlarni amalga oshirish imkonini beruvchi kuchli texnologiyadir.

Web Workers Nima?

Web Workers - bu asosiy JavaScript oqimidan alohida fonda ishlaydigan skriptlardir. Ular JavaScript-ning bir oqimli tabiatini chetlab o'tish va parallel ravishda kod bajarish imkonini beradi.

Asosiy Xususiyatlari:

  1. Parallel bajarilish
  2. Asosiy oqimni bloklash xavfisiz
  3. Xabarlar orqali aloqa
  4. Alohida global kontekst

Web Workers Qanday Ishlaydi?

Web Workers asosiy JavaScript oqimidan alohida ishlaydi va u bilan xabarlar orqali aloqa qiladi.

Asosiy Oqimda:

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

worker.postMessage('Salom, Worker!');

worker.onmessage = function(event) {
  console.log('Workerdan xabar:', event.data);
};

Worker Faylida (worker.js):

self.onmessage = function(event) {
  console.log('Asosiy skriptdan xabar:', event.data);
  
  // Ba'zi hisob-kitoblar
  const natija = 42;
  
  self.postMessage(natija);
};

Web Workers-ning Afzalliklari

  1. Samaradorlik: Og'ir hisob-kitoblarni asosiy oqimni bloklash xavfisiz bajarish mumkin.
  2. Yaxshilangan Foydalanuvchi Tajribasi: UI oqimi uzluksiz qoladi.
  3. Resurslardan Samarali Foydalanish: Ko'p yadroli protsessorlardan foydalanish imkoniyati.
  4. Modullilik: Murakkab vazifalarni alohida worker-larga bo'lish mumkin.

Web Workers-ning Cheklovlari

  1. DOM-ga kirish yo'q
  2. Window obyektiga to'liq kirish yo'q
  3. Cheklangan API-lar to'plami
  4. Alohida global kontekst

Amaliy Misol: Fibonacci Sonlarini Hisoblash

Keling, Fibonacci sonlarini hisoblash uchun Web Worker-dan foydalanamiz.

Asosiy Fayl (main.js):

const worker = new Worker('fibonacci-worker.js');

document.getElementById('hisobla').addEventListener('click', function() {
  const n = document.getElementById('son').value;
  worker.postMessage(parseInt(n));
});

worker.onmessage = function(event) {
  document.getElementById('natija').textContent = `Fibonacci(${event.data.n}) = ${event.data.natija}`;
};

Worker Fayli (fibonacci-worker.js):

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

self.onmessage = function(event) {
  const n = event.data;
  const natija = fibonacci(n);
  self.postMessage({ n: n, natija: natija });
};

HTML Fayli:

<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <title>Fibonacci Hisoblagich</title>
</head>
<body>
    <h1>Fibonacci Hisoblagich</h1>
    <input type="number" id="son" min="0" value="10">
    <button id="hisobla">Hisobla</button>
    <p id="natija"></p>
    <script src="main.js"></script>
</body>
</html>

Bu misolda, og'ir Fibonacci hisob-kitoblari worker-da amalga oshiriladi, shuning uchun asosiy oqim bloklanmaydi va UI sezgir qoladi.

Web Workers Turlari

  1. Oddiy Workers: Yuqorida ko'rib chiqqan asosiy tur.
  2. Shared Workers: Bir nechta oyna yoki tab-lar o'rtasida ulashilishi mumkin.
  3. Service Workers: Oflayn ishlash va push-bildirishnomalar uchun foydalaniladi.

Xavfsizlik Mulohazalari

  • Workers faqat xavfsiz kontekstda (HTTPS yoki localhost) ishlaydi.
  • Cross-origin cheklovlar qo'llaniladi.
  • Workers-da eval() dan foydalanish xavfli bo'lishi mumkin.

Tez-tez So'raladigan Savollar (FAQ)

  1. Savol: Web Workers barcha brauzerlar tomonidan qo'llab-quvvatlanadimi? Javob: Ko'pchilik zamonaviy brauzerlar Web Workers-ni qo'llab-quvvatlaydi, lekin eski versiyalarda muammolar bo'lishi mumkin.
  2. Savol: Worker-da DOM-ni o'zgartirish mumkinmi? Javob: Yo'q, worker-lar DOM-ga to'g'ridan-to'g'ri kira olmaydi. Barcha DOM o'zgarishlari asosiy oqimda amalga oshirilishi kerak.
  3. Savol: Worker-lar qancha xotira ishlatadi? Javob: Bu brauzerga bog'liq, lekin odatda har bir worker uchun 5-10 MB atrofida.
  4. Savol: Worker-lar orasida ma'lumot almashish mumkinmi? Javob: To'g'ridan-to'g'ri emas. Worker-lar o'rtasidagi aloqa asosiy oqim orqali amalga oshirilishi kerak.
  5. Savol: Worker-da import yoki require ishlatish mumkinmi? Javob: ES6 modul worker-lari importScript() yordamida skriptlarni yuklashi mumkin, lekin Node.js-ning require tizimi qo'llab-quvvatlanmaydi.
  6. Savol: Worker-lar mobil qurilmalarda qanday ishlaydi? Javob: Ko'pchilik zamonaviy mobil brauzerlar worker-larni qo'llab-quvvatlaydi, lekin resurs cheklovlari tufayli samaradorlik farq qilishi mumkin.
  7. Savol: Worker-larni test qilishning eng yaxshi usuli qanday? Javob: Jest kabi test freymvorklari worker-larni simulyatsiya qilish uchun mock-obyektlardan foydalanishi mumkin. Shuningdek, end-to-end testlar uchun Selenium yoki Puppeteer-dan foydalanish mumkin.
  8. Savol: Worker-lar bilan ishlashda qanday umumiy xatolar uchraydi? Javob: Eng keng tarqalgan xatolar - bu DOM-ga kirishga urinish, katta hajmdagi ma'lumotlarni uzatish va worker hayot tsiklini noto'g'ri boshqarish.

Xulosa

Web Workers - bu JavaScript-da parallel hisoblashlarni amalga oshirish uchun kuchli vosita. Ular murakkab hisob-kitoblarni asosiy oqimni bloklash xavfisiz bajarish imkonini beradi, bu esa ilovangizning samaradorligi va foydalanuvchi tajribasini sezilarli darajada yaxshilaydi. Lekin, ularning cheklovlarini tushunish va to'g'ri foydalanish muhimdir.

Web Workers-dan foydalanishda muvaffaqiyat tilayman va ilovalaringiz yanada samarali bo'lsin!

Qo'shimcha Manbalar

  1. MDN Web Docs - Web Workers API
  2. HTML Living Standard - Web Workers