API Pekerja Web HTML
Pekerja web adalah JavaScript yang berjalan di latar belakang, tanpa memengaruhi kinerja halaman.
Apa itu Pekerja Web?
Saat menjalankan skrip di halaman HTML, halaman menjadi tidak responsif hingga skrip selesai.
Pekerja web adalah JavaScript yang berjalan di latar belakang, terlepas dari skrip lain, tanpa memengaruhi kinerja halaman. Anda dapat terus melakukan apa pun yang Anda inginkan: mengklik, memilih sesuatu, dll., saat pekerja web berjalan di latar belakang.
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung Pekerja Web.
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
Contoh Pekerja Web HTML
Contoh di bawah ini membuat pekerja web sederhana yang menghitung angka di latar belakang:
Contoh
Periksa Dukungan Pekerja Web
Sebelum membuat pekerja web, periksa apakah browser pengguna mendukungnya:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
}
else {
// Sorry! No Web Worker support..
}
Buat File Pekerja Web
Sekarang, mari kita buat pekerja web kita di JavaScript eksternal.
Di sini, kami membuat skrip yang diperhitungkan. Script disimpan di file "demo_workers.js":
var i = 0;
function timedCount()
{
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
Bagian penting dari kode di atas adalah postMessage()metode - yang digunakan untuk mengirim pesan kembali ke halaman HTML.
Catatan: Biasanya pekerja web tidak digunakan untuk skrip sederhana seperti itu, tetapi untuk tugas yang lebih intensif CPU.
Buat Objek Pekerja Web
Sekarang kita memiliki file pekerja web, kita perlu memanggilnya dari halaman HTML.
Baris berikut memeriksa apakah pekerja sudah ada, jika tidak - itu membuat objek pekerja web baru dan menjalankan kode di "demo_workers.js":
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
Kemudian kita dapat mengirim dan menerima pesan dari web worker.
Tambahkan event listener "onmessage" ke web worker.
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Saat pekerja web memposting pesan, kode di dalam event listener dieksekusi. Data dari web worker disimpan di event.data.
Menghentikan Pekerja Web
Saat objek pekerja web dibuat, objek tersebut akan terus mendengarkan pesan (bahkan setelah skrip eksternal selesai) hingga dihentikan.
Untuk menghentikan pekerja web, dan sumber daya browser/komputer gratis, gunakan
terminate()metode:
w.terminate();
Gunakan kembali Web Worker
Jika Anda menyetel variabel pekerja ke undefined, setelah dihentikan, Anda dapat menggunakan kembali kode:
w = undefined;
Kode Contoh Pekerja Web Lengkap
Kita telah melihat kode Worker di file .js. Di bawah ini adalah kode untuk halaman HTML:
Contoh
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
var w;
function startWorker()
{
if (typeof(Worker) !== "undefined")
{
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
}
else
{
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Pekerja Web dan DOM
Karena pekerja web berada di file eksternal, mereka tidak memiliki akses ke objek JavaScript berikut:
- objek jendela
- objek dokumen
- Objek induk