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, bebas 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 browser pertama 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:

Hitung:

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 mengirimkan pesan ke halaman HTML.

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

Membuat objek Web Worker

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

Baris kode di bawah ini memeriksa adanya worker, jika tidak ada, - ia 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 dalam pendengar peristiwa akan dijalankan. Data dari web worker akan disimpan di event.data.

Hentikan Web Worker

Setelah menciptakan web worker, ia 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 tidak terdefinisi, kode ini dapat digunakan kembali setelah dihentikan:

w = tidak terdefinisi;

Kode contoh Web Worker lengkap

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

Contoh

<!DOCTYPE html>
<html>
<body>
<p>Jumlah bilangan: <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 ini:

  • Objek window
  • Objek document
  • Objek parent