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.

JavaScript Memalsukan Pemrograman Paralel

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

// Fungsi Async/menunggu yang mensimulasikan permintaan jaringan
asinkronfungsiambilData() {
const tanggapan = menunggu mengambil();
const data = menunggu respon.json();
kembali data;
}
// Fungsi panggilan balik yang mencatat data yang diambil ke konsol
fungsilogData(data) {
menghibur.log (data);
}
// Metode Promise.all() yang mengeksekusi banyak promise secara paralel
Janji.semua([
 ambilData(),
 ambilData(),
]).Kemudian((hasil) => {
menghibur.log (hasil);
});
// Panggil fungsi fetchData dan teruskan fungsi logData sebagai callback
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 utas 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 Pekerja Web.

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:

// main.js
// Buat Pekerja Web baru
const pekerja = baru Pekerja('pekerja.js');
// Kirim pesan ke Web Worker
pekerja.postMessage('Halo dari utas utama!');
// Dengarkan pesan dari Web Worker
pekerja.onmessage = fungsi(peristiwa) {
menghibur.catatan('Pesan yang diterima dari Web Worker:', peristiwa.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:

// pekerja.js
// Dengarkan pesan dari utas utama
self.onmessage = fungsi(peristiwa) {
menghibur.catatan('Pesan yang diterima dari utas utama:', peristiwa.data);
// Kirim pesan kembali ke utas utama
 self.postMessage("Halo dari pekerja.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:

// main.js
const pekerja = baru Pekerja('pekerja.js');
// Kirim data ke Web Worker untuk perhitungan
pekerja.postMessage([1, 2, 3, 4, 5]);
// Dengarkan hasil dari Web Worker
pekerja.onmessage = fungsi(peristiwa) {
const hasil = kejadian.data;
menghibur.catatan('Hasil perhitungan:', hasil);
};

Pekerja.js:

// Dengarkan data dari utas utama
self.onmessage = fungsi (peristiwa) {
const angka = peristiwa.data;
const result = performHeavyCalculation (angka);
// Kirim hasilnya kembali ke thread utama
 self.postMessage (hasil);
};
fungsiperformHeavyCalculation(data) {
// Lakukan kalkulasi kompleks pada larik angka
kembali data
 .peta((nomor) =>Matematika.pow (angka, 3)) // Kubus setiap angka
 .Saring((nomor) => nomor % 20) // Saring angka genap
 .mengurangi((penjumlahan, angka) => jumlah + angka, 0); // Jumlahkan semua angka
}

Dalam contoh ini, Anda meneruskan larik angka dari utas utama ke Web Worker. 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 cerita bersambung 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.