JavaScript - Worker API: Menjawarkan Kuasa Pemprosesan Paralel
Hai sana, para ahli JavaScript masa depan! Hari ini, kita akan memulakan sebuah perjalanan yang menarik ke dalam dunia Web Workers. Bayangkan anda adalah seorang chef di dapur yang sibuk. Kadang-kadang, anda memerlukan tangan tambahan untuk membantu anda menyediakan makanan yang kompleks. Itu betul apa yang Web Workers lakukan untuk kode JavaScript anda - mereka memberikan tangan yang membantu untuk mengendalikan tugas yang berat tanpa memperlambat proses memasak... saya maksudkan, proses pengkodan utama anda!
Web Worker API: Chef Bantu JavaScript Anda
Web Worker API adalah seperti memiliki seorang asisten chef di dapur JavaScript anda. Ia membolehkan anda menjalankan skrip di belakang, secara bebas daripada skrip lain. Ini bermakna anda dapat melakukan tugas yang memakan masa tanpa mengganggu prestasi halaman utama anda. Menarik, kan?
mari masuk kedalam dan lihat bagaimana kita dapat memanfaatkan bantuan ini!
Memeriksa Sokongan Web Worker
Sebelum kita mula menggunakan Web Workers, kita perlu pastikan browser kita mendukung mereka. Itu seperti memeriksa jika dapur anda mempunyai peralatan yang betul sebelum anda mula memasak. Berikut cara untuk melakukannya:
if (typeof(Worker) !== "undefined") {
// Hebat! Web Workers didukung
console.log("Mari kerjakan!");
} else {
// Owh! Web Workers tidak didukung
console.log("Maaf, browser anda tidak mendukung Web Workers");
}Dalam snippet kode ini, kita memeriksa jika objek Worker ditakrifkan. Jika ia adalah, kita siap untuk maju. Jika bukan, kita akan perlu mencari cara lain untuk mengendalikan tugas kita.
Membuat Fail Web Worker
Sekarang kita tahu browser kita boleh mengendalikan Web Workers, mari kita buat satu! Web Worker adalah seperti resepi yang asisten chef (browser) kita akan ikuti. Kita akan mencipta fail JavaScript yang berasingan untuk Web Worker kita.
mari buat fail yang dipanggil worker.js:
// worker.js
self.addEventListener('message', function(e) {
const result = e.data * 2;
self.postMessage(result);
}, false);Worker ini mendengar mesej, mengganda nombor yang ia terima, dan mengirimkan keputusan balik. Mudah, kan?
Membuat Objek Web Worker
Sekarang kita mempunyai fail worker, mari kita buat objek Web Worker dalam 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 mencipta objek Web Worker baru, merujuk ke fail worker.js. Itu seperti mengupah asisten chef dan memberikan mereka resepi kita.
Berkomunikasi Dengan Web Worker
Sekarang, mari kita lihat bagaimana kita boleh menghantar tugas ke worker dan menerima keputusan balik:
// Menghantar data ke worker
myWorker.postMessage(10);
// Menerima data daripada worker
myWorker.onmessage = function(e) {
console.log("Worker mengirimkan: " + e.data);
};Dalam contoh ini, kita menghantar nombor 10 ke worker. Worker mengganda ia dan mengirimkan 20 balik. Itu seperti meminta asisten untuk mengganda bahan-bahan resepi!
Menghentikan Eksekusi Web Worker
Bila kita selesai dengan Web Worker kita, kita harus menghapusnya untuk membebaskan sumber. Itu seperti memberitahu asisten chef mereka boleh pulang selepas makanan disiapkan:
myWorker.terminate();
myWorker = undefined;Kode ini menghentikan worker dan menetapkan pembolehubah myWorker ke undefined, secara efektif menghapuskan rujukan kita kepadanya.
Contoh: Program Sepenuhnya Dalam Web Worker
mari gabungkan semua itu dalam contoh sepenuhnya:
<!DOCTYPE html>
<html>
<body>
<p>Hitung nombor: <output id="result"></output></p>
<button onclick="startWorker()">Mulakan Worker</button>
<button onclick="stopWorker()">Henti 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 sokongan 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 mencipta worker yang menghitung nombor, memperbaharui setiap separuh saat. Halaman utama boleh memulakan dan menghentikan worker ini, menunjukkan bagaimana kita boleh mengawal "asisten chef" kita dari "dapur" utama.
Kesempatan Penggunaan Web Worker
Web Workers sangat berguna untuk tugas-tugas yang mungkin memakan masa yang lama untuk diselesaikan. Berikut adalah beberapa kesempatan penggunaan biasa:
- Pemalaran yang kompleks
- Pemprosesan data besar
- Pemprosesan imej atau video
- Operasi jaringan
- Penyahkod data besar (seperti fail CSV)
Pertimbangkan ini sebagai resepi-resepi kompleks yang asisten chef anda boleh kerjakan tanpa mengganggu proses memasak utama anda!
Web Workers dan DOM
Satu hal yang penting untuk dipatuhi: Web Workers tidak dapat mengakses DOM (Document Object Model) secara langsung. Itu seperti asisten chef anda tidak dapat langsung melayani hidangan kepada pelanggan - mereka perlu menyerahkan makanan yang disiapkan kepada anda dahulu.
Jika Worker perlu berinteraksi dengan halaman web, ia mestilah mengirimkan mesej ke skrip utama, yang kemudiannya dapat memperbaharui DOM.
Kesimpulan
Web Workers adalah alat yang kuat dalam beg alat JavaScript anda. Mereka membolehkan anda melakukan tugas-tugas kompleks tanpa memperlambat skrip utama anda, sama seperti asisten chef membantu anda menyediakan makanan kompleks lebih efektif.
Ingat, kunci penggunaan Web Workers secara efektif adalah untuk mengenalpasti tugas-tugas yang boleh dijalankan secara bebas daripada skrip utama anda. Dengan latihan, anda akan dapat mengoriskan sepenuhnya "dapur" Web Workers, mencipta aplikasi web yang cepat dan responsif yang dapat mengendalikan tugas-tugas kompleks dengan mudah.
Selamat mengkod, dan moga dapur JavaScript anda sentiasa sibuk dengan Web Workers yang efektif!
Credits: Image by storyset