Apa Paralelisme dalam JavaScript?

JavaScript dapat berjuang dengan tugas-tugas intensif kinerja karena ini adalah bahasa single-threaded. Menggunakan paralelisme, Anda dapat mencapai eksekusi multithreaded dalam JavaScript dan meningkatkan kinerja dan daya tanggap aplikasi web modern Anda.

Paralelisme dalam Pemrograman JavaScript

Paralelisme sangat penting dalam komputasi modern untuk meningkatkan kinerja dan skalabilitas. Ini dilakukan dengan memanfaatkan sumber daya yang tersedia secara efektif.

Teknik umum yang digunakan untuk mencapai paralelisme dalam pemrograman adalah multi-threading. Utas JavaScript, bagaimanapun, adalah sistem utas tunggal dan hanya dapat menangani satu tugas pada satu waktu. Ini berarti tidak terbiasa dengan eksekusi program paralel.

Baca Juga:

Mau Berkarir di Dunia blockchain? Ini Dia 10 Skill yang Harus Kamu Dalami!

JavaScript Memalsukan Pemrograman Paralel

Kesalahpahaman umum tentang paralelisme adalah bahwa Anda dapat mencapainya menggunakan teknik pemrograman asinkron seperti async/menunggu, panggilan balik, dan janji:

 
async function fetchData() {
  const response = await fetch();
  const data = await response.json();
  return data;
}

function logData(data) {
  console.log(data);
}

Promise.all([
  fetchData(),
  fetchData(),
]).then((results) => {
  console.log(results);
});

fetchData().then(logData);
 

Teknik ini sebenarnya tidak mengeksekusi kode secara paralel. JavaScript menggunakan event loop untuk meniru pemrograman paralel dalam desain single-thread-nya.

Loop acara adalah bagian mendasar dari lingkungan runtime JavaScript. Ini memungkinkan Anda untuk menjalankan operasi asinkron, seperti permintaan jaringan, di latar belakang tanpa memblokir utas tunggal utama.

Perulangan peristiwa secara konstan memeriksa peristiwa atau tugas baru dalam antrean dan mengeksekusinya satu per satu secara berurutan. Teknik ini memungkinkan JavaScript untuk mencapai konkurensi dan paralelisme teoretis.

Konkurensi vs. Paralelisme

Konkurensi dan paralelisme sering disalahpahami dan dipertukarkan di dunia JavaScript.

Concurrency dalam JavaScript mengacu pada kemampuan untuk mengeksekusi banyak tugas dengan tumpang tindih pelaksanaan tugas. Di mana satu tugas dapat dimulai sebelum yang lain selesai, tetapi tugas tidak dapat dimulai atau diakhiri secara bersamaan. Ini memungkinkan JavaScript menangani operasi secara efisien, seperti mengambil data dari REST API atau membaca file, tanpa memblokir thread eksekusi utama.

Paralelisme, di sisi lain, mengacu pada kemampuan untuk menjalankan banyak tugas secara bersamaan di banyak utas. Utas latar belakang ini dapat menjalankan tugas secara mandiri dan bersamaan. Ini membuka peluang untuk mencapai paralelisme sejati dalam aplikasi JavaScript.

Aplikasi JavaScript dapat mencapai paralelisme sejati melalui penggunaan Web Worker.

Pekerja Web Memperkenalkan Paralelisme ke JavaScript

Pekerja Web adalah fitur browser web modern yang memungkinkan kode JavaScript berjalan di utas latar belakang, terpisah dari utas eksekusi utama. Berbeda dengan utas utama, yang menangani interaksi pengguna dan pembaruan UI. Pekerja Web akan didedikasikan untuk melakukan tugas-tugas intensif komputasi.

Di bawah ini adalah representasi diagram pengoperasian Web Worker dalam JavaScript.

Utas utama dan Pekerja Web dapat berkomunikasi menggunakan pengiriman pesan. Menggunakan postMessage metode untuk mengirim pesan dan onmessage event handler untuk menerima pesan, Anda dapat mengirimkan instruksi atau data bolak-balik.

Membuat Pekerja Web

Untuk membuat Web Worker, Anda perlu membuat file JavaScript terpisah.

Ini contohnya:

 

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

worker.postMessage('Hello from the main thread!');

worker.onmessage = function(event) {
  console.log('Received message from Web Worker:', event.data);
}; 

Contoh di atas membuat Web Worker baru dengan meneruskan jalur ke skrip pekerja (pekerja.js) sebagai argumen untuk Pekerja konstruktor. Anda dapat mengirim pesan ke Web Worker menggunakan postMessage metode dan mendengarkan pesan dari Web Worker menggunakan onmessage pengendali acara.

Anda kemudian harus membuat skrip pekerja (pekerja.js) berkas:

 

self.onmessage = function(event) {
  console.log('Received message from main thread:', event.data);
  
  self.postMessage("Hello from worker.js!");
};
 

Skrip Pekerja Web mendengarkan pesan dari utas utama menggunakan onmessage pengendali acara. Setelah menerima pesan, Anda keluar dari pesan di dalamnya peristiwa.data dan kirim pesan baru ke utas utama dengan postMessage metode.

Memanfaatkan Paralelisme Dengan Pekerja Web

Kasus penggunaan utama untuk Pekerja Web adalah menjalankan tugas JavaScript yang intensif secara komputasional secara paralel. Dengan memindahkan tugas ini ke Pekerja Web, Anda dapat mencapai peningkatan kinerja yang signifikan.

Berikut adalah contoh penggunaan pekerja web untuk melakukan perhitungan berat:

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

worker.postMessage([1, 2, 3, 4, 5]);

worker.onmessage = function(event) {
  const result = event.data;
  console.log('Calculation result:', result);
}; 

Pekerja.js:

 
self.onmessage = function (event) {
  const numbers = event.data;
  const result = performHeavyCalculation(numbers);
  
  self.postMessage(result);
};
function performHeavyCalculation(data) {
  
  return data
    .map((number) => Math.pow(number, 3)) 
    .filter((number) => number % 2 === 0) 
    .reduce((sum, number) => sum + number, 0); 
}
 

Dalam contoh ini, Anda meneruskan larik angka dari utas utama ke Pekerja Web. Pekerja Web melakukan perhitungan menggunakan larik data yang disediakan dan mengirimkan hasilnya kembali ke utas utama. Itu performHeavyCalculation() fungsi memetakan setiap angka ke kubusnya, memfilter angka genap, dan akhirnya menjumlahkannya.

Keterbatasan dan Pertimbangan

Meskipun Pekerja Web menyediakan mekanisme untuk mencapai paralelisme dalam JavaScript, penting untuk mempertimbangkan beberapa batasan dan pertimbangan:

• Tidak Ada Memori Bersama: Pekerja Web beroperasi di utas terpisah dan tidak berbagi memori dengan utas utama. Jadi, mereka tidak dapat langsung mengakses variabel atau objek dari utas utama tanpa penyampaian pesan.
• Serialisasi dan Deserialisasi: Saat meneruskan data antara utas utama dan Pekerja Web, Anda perlu membuat serial dan membatalkan serialisasi data karena pengiriman pesan adalah komunikasi berbasis teks. Proses ini menimbulkan biaya performa dan dapat memengaruhi performa aplikasi secara keseluruhan.
• Dukungan Peramban: Meskipun Web Worker didukung dengan baik di sebagian besar browser web modern, beberapa browser lama atau lingkungan terbatas mungkin memiliki dukungan sebagian atau tidak ada sama sekali untuk Web Worker.

Mencapai Paralelisme Sejati dalam JavaScript

Paralelisme dalam JavaScript adalah konsep menarik yang memungkinkan pelaksanaan tugas yang benar-benar bersamaan, bahkan dalam bahasa single-threaded. Dengan pengenalan Pekerja Web, Anda dapat memanfaatkan kekuatan paralelisme dan mencapai peningkatan kinerja yang signifikan dalam aplikasi JavaScript Anda.