ID: Bahasa Indonesia

JavaScript - Worker API: Melepaskan Daya Proses Paralel

Halo sana, para ahli JavaScript masa depan! Hari ini, kita akan melangsungkan perjalanan yang menarik ke dunia Web Workers. Bayangkan Anda adalah seorang chef di dapur yang sibuk. Kadang-kadang, Anda butuh tangan tambahan untuk membantu Anda mempersiapkan makanan yang kompleks. Itu tepat apa yang Web Workers lakukan bagi kode JavaScript Anda - mereka memberikan tangan untuk menghandle tugas berat tanpa memperlambat proses memasak... maksud saya, proses pengodingan utama Anda!

JavaScript - Worker API

Web Worker API: Chef Bantu JavaScript Anda

Web Worker API mirip seperti memiliki asisten chef di dapur JavaScript Anda. Itu memungkinkan Anda menjalankan skrip di latar belakang, secara independen dari skrip lainnya. Ini berarti Anda dapat melakukan tugas yang memakan waktu tanpa mengganggu performa halaman utama Anda. Keren, kan?

Ayo masuk dan lihat bagaimana kita dapat memanfaatkan para bantu ini!

Memeriksa Dukungan Web Worker

Sebelum kita mulai menggunakan Web Workers, kita harus memastikan browser kita mendukung mereka. Itu seperti memeriksa jika dapur Anda memiliki peralatan yang tepat sebelum Anda mulai memasak. Berikut adalah cara kita melakukannya:

if (typeof(Worker) !== "undefined") {
// Bagus! Web Workers didukung
console.log("Ayo kerja!");
} else {
// Oeps! Web Workers tidak didukung
console.log("Maaf, browser Anda tidak mendukung Web Workers");
}

Dalam snippet kode ini, kita memeriksa jika objek Worker didefinisikan. Jika ya, kita siap untuk melanjutkan. Jika tidak, kita harus mencari cara lain untuk menghandle tugas kita.

Membuat File Web Worker

Sekarang kita tahu browser kita dapat menangani Web Workers, mari kita buat satu! Web Worker seperti resep yang asisten chef (browser) Anda akan ikuti. Kita akan membuat file JavaScript terpisah untuk Web Worker kita.

Buatlah file yang disebut worker.js:

// worker.js
self.addEventListener('message', function(e) {
const result = e.data * 2;
self.postMessage(result);
}, false);

Worker ini mendengarkan pesan, menggandakan angka yang diterima, dan mengirimkan hasilnya kembali. Mudah, kan?

Membuat Objek Web Worker

Sekarang kita memiliki file worker, mari kita buat objek Web Worker di skrip utama kita:

let myWorker;

if (typeof(Worker) !== "undefined") {
myWorker = new Worker("worker.js");
} else {
console.log("Web Workers tidak didukung dalam browser Anda!");
}

Kode ini membuat objek Web Worker baru, mengarah ke file worker.js kita. Itu seperti mempekerjakan asisten chef dan memberikan mereka resep Anda.

Komunikasi dengan Web Worker

Sekarang, mari kita lihat bagaimana kita dapat mengirim tugas ke worker dan mendapatkan hasilnya kembali:

// Mengirim data ke worker
myWorker.postMessage(10);

// Menerima data dari worker
myWorker.onmessage = function(e) {
console.log("Worker mengirimkan: " + e.data);
};

Dalam contoh ini, kita mengirimkan angka 10 ke worker. Worker menggandakannya dan mengirimkan 20 kembali. Itu seperti meminta asisten Anda untuk menggandakan bahan resep!

Menghentikan Eksekusi Web Worker

Ketika kita selesai dengan Web Worker kita, kita harus membatalkannya untuk membebaskan sumber daya. Itu seperti memberitahu asisten chef mereka dapat pulang setelah makanan disiapkan:

myWorker.terminate();
myWorker = undefined;

Kode ini menghentikan worker dan menset variabel myWorker ke undefined, secara efektif menghapus referensi kita kepadanya.

Contoh: Program Lengkap Web Worker

Mari kita gabungkan semua dalam contoh lengkap:

<!DOCTYPE html>
<html>
<body>

<p>Hitung angka: <output id="result"></output></p>
<button onclick="startWorker()">Mulai Worker</button>
<button onclick="stopWorker()">Hentikan Worker</button>

<script>
let w;

function startWorker() {
if (typeof(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("worker.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Maaf! Tidak ada dukungan Web Worker.";
}
}

function stopWorker() {
w.terminate();
w = undefined;
}
</script>

</body>
</html>

Dan ini adalah worker.js kita:

let i = 0;

function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

Contoh ini membuat worker yang menghitung angka, memperbarui setiap setengah detik. Halaman utama dapat memulai dan menghentikan worker, menunjukkan bagaimana kita dapat mengontrol "asisten chef" kita dari "dapur" utama.

Kasus Penggunaan Web Worker

Web Workers sangat berguna untuk tugas yang mungkin memakan waktu lama untuk selesai. Berikut adalah beberapa kasus penggunaan umum:

Perhitungan kompleks
Pemrosesan data besar
Pemrosesan gambar atau video
Operasi jaringan
Penyajian dataset besar (seperti file CSV)

Pertimbangkan ini sebagai resep yang kompleks yang asisten chef Anda dapat kerjakan tanpa mengganggu proses memasak utama Anda!

Web Workers dan DOM

Ada hal penting yang harus diingat: Web Workers tidak dapat mengakses DOM (Document Object Model) secara langsung. Itu seperti asisten chef Anda tidak dapat langsung melayani hidangan ke pelanggan - mereka harus menyerahkan makanan yang disiapkan kepada Anda dahulu.

Jika seorang Worker perlu berinteraksi dengan halaman web, mereka harus mengirimkan pesan ke skrip utama, yang kemudian dapat memperbarui DOM.

Kesimpulan

Web Workers adalah alat kuat dalam peralatan JavaScript Anda. Mereka memungkinkan Anda melakukan tugas kompleks tanpa memperlambat skrip utama Anda, sama seperti asisten chef membantu Anda mempersiapkan makanan kompleks lebih efisien.

Ingat, kunci penggunaan Web Workers secara efektif adalah mengidentifikasi tugas yang dapat dijalankan secara independen dari skrip utama Anda. Dengan latihan, Anda akan menjadi pengarah dapur yang handal, menciptakan aplikasi web yang cepat dan responsif yang dapat menangani tugas kompleks dengan mudah.

Selamat mengoding, dan semoga dapur JavaScript Anda selalu penuh dengan Web Workers yang efisien!

Credits: Image by storyset

Tutorial Sebelumnya:

JavaScript - Forms API

Tutorial Selanjutnya:

JavaScript - Fetch API