HTML Web Workers

Web worker adalah JavaScript yang berjalan di latar belakang, tidak mempengaruhi kinerja halaman.

Apa itu Web Worker?

Ketika menjalankan skrip di halaman HTML, halaman tidak dapat merespon sampai skrip selesai.

Web worker adalah JavaScript yang berjalan di latar belakang, independen dari skrip lain, dan tidak mempengaruhi kinerja halaman. Anda dapat melanjutkan melakukan apa pun yang Anda inginkan: klik, memilih konten, dll, saat ini web worker berjalan di latar belakang.

Dukungan Browser

Angka di tabel menunjukkan versi pertama browser yang mendukung Web Worker sepenuhnya.

API
Web Worker 4.0 10.0 3.5 4.0 11.5

Contoh HTML Web Workers

Contoh di bawah ini membuat web worker sederhana untuk hitung di latar belakang:

Jumlah:

Coba Sendiri

Pengujian Dukungan Web Worker

Sebelum membuat web worker, pastikan peramban pengguna mendukungnya:

if (typeof(Worker) !== "undefined") {
    // Ya! Mendukung Web Worker!
    // Beberapa kode.....
}
    // Maaf! Tidak mendukung Web Worker!
}

Buat File Web Worker

Sekarang, mari kita buat web worker kami di berkas JavaScript eksternal.

Di sini, kami membuat skrip penghitung. Skrip ini disimpan di berkas "demo_workers.js":

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

Bagian penting dari kode di atas adalah metode postMessage() - ia digunakan untuk kirim pesan ke halaman HTML.

Komentar: Web worker biasanya tidak digunakan untuk skrip yang sederhana seperti ini, tetapi untuk tugas yang membutuhkan banyak sumber daya CPU.

Buat Objek Web Worker

Sekarang kami memiliki berkas web worker, kami butuh memanggilnya dari halaman HTML.

Baris kode di bawah ini memeriksa adanya worker, jika tidak ada, - dia akan membuat objek web worker baru dan menjalankan kode di "demo_workers.js":

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
}

Lalu kami dapat menerima pesan dari web worker.

Tambahkan pendengar peristiwa "onmessage" ke web worker:

w.onmessage = function(event){
    document.getElementById("result").innerHTML = event.data;
};

Ketika web worker mengirimkan pesan, kode di pendengar peristiwa akan dijalankan. Data dari web worker akan disimpan di event.data.

Hentikan Web Worker

Setelah membuat web worker, dia akan terus mendengar pesan (meskipun skrip eksternal selesai) sampai dihentikan.

Untuk menghentikan web worker dan melepaskan sumber daya browser/komputer, gunakan metode terminate():

w.terminate();

Penggunaan Ulang Web Worker

Jika Anda menetapkan variabel worker menjadi undefined, kode ini dapat digunakan kembali setelah dihentikan:

w = undefined;

Kode contoh Web Worker lengkap

Kami telah melihat kode Worker di berkas .js. Berikut adalah kode halaman HTML:

Contoh

<!DOCTYPE html>
<html>
<body>
<p>Hitung angka: <output id="result"></output></p>
<button onclick="startWorker()">Mulai Worker</button> 
<button onclick="stopWorker()">Hentikan Worker</button>
<br><br>
<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;
        };
    }
        document.getElementById("result").innerHTML = "Maaf! Tidak ada dukungan Web Worker.";
    }
}
function stopWorker() { 
    w.terminate();
    w = undefined;
}
</script>
</body>
</html>

Coba Sendiri

Web Worker dan DOM

Karena web worker berada di dalam berkas eksternal, mereka tidak dapat mengakses objek JavaScript berikut:

  • Objek window
  • Objek document
  • Objek parent