JavaScript-da Parallel va Concurrent Dasturlash

Bugun biz JavaScript-da parallel va concurrent dasturlash haqida chuqur o'rganamiz. Bu mavzu zamonaviy web-ilovalar yaratishda juda muhim, chunki u dasturlarimizning samaradorligini va tezligini sezilarli darajada oshirishi mumkin.

Kirish: Parallel va Concurrent Dasturlash Nima?

Avvalo, "parallel" va "concurrent" atamalarini aniqlab olaylik, chunki ular ko'pincha chalkashtiriladi:

• Parallel dasturlash: Bir nechta vazifalarni bir vaqtning o'zida bajarish. Bu odatda ko'p yadroli protsessorlar yordamida amalga oshiriladi.
• Concurrent dasturlash: Bir nechta vazifani boshqarish va ularni almashtirib turish. Vazifalar bir vaqtda boshlanishi mumkin, lekin ular aslida ketma-ket bajariladi.

JavaScript asosan yagona oqimli til bo'lsa-da, u concurrent dasturlashni qo'llab-quvvatlaydi va ba'zi hollarda parallel bajarilishni ham ta'minlaydi.

JavaScript-da Concurrency

JavaScript-ning asosiy xususiyatlaridan biri - bu uning asinxron tabiati. Bu concurrent dasturlash uchun asos bo'lib xizmat qiladi.

1. Event Loop

JavaScript-ning Event Loop mexanizmi concurrent dasturlashning asosiy qismidir. U quyidagicha ishlaydi:

1. Sinxron kod bajariladi.
2. Asinxron operatsiyalar (masalan, setTimeout, fetch) navbatga qo'yiladi.
3. Sinxron kod tugagach, navbatdagi asinxron operatsiyalar bajariladi.

Misol:

console.log('1');
setTimeout(() => console.log('2'), 0);
console.log('3');

// Natija: 1, 3, 2

Bu misolda, '2' oxirida chiqadi, chunki setTimeout asinxron operatsiya hisoblanadi va Event Loop uni keyinroq bajaradi.

2. Promise-lar va Async/Await

Promise-lar va async/await sintaksisi JavaScript-da concurrent dasturlashning zamonaviy usullaridir.

async function malumotlarniOlish() {
  try {
    const [foydalanuvchilar, postlar] = await Promise.all([
      fetch('/api/foydalanuvchilar').then(res => res.json()),
      fetch('/api/postlar').then(res => res.json())
    ]);
    console.log('Foydalanuvchilar:', foydalanuvchilar);
    console.log('Postlar:', postlar);
  } catch (xato) {
    console.error('Xato yuz berdi:', xato);
  }
}

malumotlarniOlish();

Bu misolda, Promise.all yordamida ikkita so'rov parallel ravishda yuboriladi, ammo JavaScript ularni concurrent tarzda boshqaradi.

JavaScript-da Parallelizm

JavaScript-da haqiqiy parallelizmga erishish uchun quyidagi texnologiyalardan foydalanish mumkin:

1. Web Workers

Web Workers brauzerda fon jarayonlarini yaratish imkonini beradi. Ular asosiy oqimdan alohida ishlaydi va haqiqiy parallelizmni ta'minlaydi.

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

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

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

// worker.js
self.onmessage = function(e) {
  console.log('Asosiy skriptdan xabar:', e.data);
  
  // Og'ir hisob-kitoblar
  let natija = 0;
  for (let i = 0; i < 1000000000; i++) {
    natija += i;
  }
  
  self.postMessage('Hisob-kitob tugadi. Natija: ' + natija);
};

Bu misolda, worker og'ir hisob-kitoblarni asosiy oqimni to'xtatmasdan bajaradi.

2. SharedArrayBuffer

SharedArrayBuffer bir nechta Worker orasida xotirani ulashish imkonini beradi, bu esa parallel hisob-kitoblar uchun juda foydali.

// main.js
const worker1 = new Worker('worker1.js');
const worker2 = new Worker('worker2.js');

const sharedBuffer = new SharedArrayBuffer(4);
const sharedArray = new Int32Array(sharedBuffer);

worker1.postMessage({ sharedArray });
worker2.postMessage({ sharedArray });

// worker1.js va worker2.js
self.onmessage = function(e) {
  const { sharedArray } = e.data;
  Atomics.add(sharedArray, 0, 1);
  console.log('Worker natijasi:', Atomics.load(sharedArray, 0));
};

Bu misolda, ikkita worker bitta ulashilgan massiv ustida ishlaydi, bu esa parallel hisob-kitoblarni amalga oshirish imkonini beradi.

Amaliy Misollar

1. Rasmni Parallel Qayta Ishlash

Web Worker yordamida rasmni qayta ishlash misoli:

// main.js
const worker = new Worker('imageProcessor.js');
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Rasmni yuklash
const img = new Image();
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  worker.postMessage({ imageData }, [imageData.data.buffer]);
};
img.src = 'example.jpg';

worker.onmessage = function(e) {
  ctx.putImageData(e.data.imageData, 0, 0);
};

// imageProcessor.js
self.onmessage = function(e) {
  const { imageData } = e.data;
  const data = imageData.data;
  
  // Rasmni oq-qora qilish
  for (let i = 0; i < data.length; i += 4) {
    const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
    data[i] = data[i + 1] = data[i + 2] = avg;
  }
  
  self.postMessage({ imageData }, [imageData.data.buffer]);
};

2. Concurrent Ma'lumotlar Olish va Qayta Ishlash

async function malumotlarniOlishVaQaytaIshlash() {
  try {
    const foydalanuvchilarVadasi = fetch('/api/foydalanuvchilar').then(res => res.json());
    const postlarVadasi = fetch('/api/postlar').then(res => res.json());
    
    // Ma'lumotlarni parallel ravishda olish
    const [foydalanuvchilar, postlar] = await Promise.all([foydalanuvchilarVadasi, postlarVadasi]);
    
    // Ma'lumotlarni qayta ishlash
    const qaytaIshlashVadasi = new Promise(resolve => {
      setTimeout(() => {
        const natija = {
          foydalanuvchilarSoni: foydalanuvchilar.length,
          postlarSoni: postlar.length,
          oxirgiPost: postlar[postlar.length - 1]
        };
        resolve(natija);
      }, 0);
    });
    
    const natija = await qaytaIshlashVadasi;
    console.log('Qayta ishlangan natija:', natija);
  } catch (xato) {
    console.error('Xato yuz berdi:', xato);
  }
}

malumotlarniOlishVaQaytaIshlash();

Bu misolda, ma'lumotlar concurrent ravishda olinadi va keyin asinxron ravishda qayta ishlanadi.

Xulosa

JavaScript-da parallel va concurrent dasturlash usullari dasturlarimizning samaradorligini sezilarli darajada oshirishi mumkin. Web Workers haqiqiy parallelizmni ta'minlasa, Promise-lar va async/await sintaksisi concurrent dasturlashni osonlashtiradi.

Esda tuting:

1. Concurrent dasturlash ko'p hollarda yetarli va samarali.
2. Parallel dasturlash murakkab vazifalar uchun foydali, lekin ehtiyotkorlik bilan ishlatilishi kerak.
3. Har doim xavfsizlik va ma'lumotlar yaxlitligini ta'minlashni unutmang, ayniqsa SharedArrayBuffer ishlatganda.

JavaScript-ning ushbu kuchli xususiyatlaridan foydalanib, siz yanada samarali va tezkor ilovalar yaratishingiz mumkin. Amaliyotda qo'llash va tajriba orttirish orqali siz bu usullarni yanada chuqurroq o'zlashtirasiz.

Qo'shimcha Manbalar

1. MDN Web Docs - Web Workers API
2. JavaScript.info - Parallel dasturlash
3. Node.js Hujjatlari - Worker Threads