HTML Web Workers

Web worker adalah JavaScript yang berjalan di latar belakang, dan tidak akan mempengaruhi performa 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 lainnya skrip, dan tidak akan mempengaruhi performa halaman. Anda dapat melanjutkan apa pun yang anda inginkan: klik, memilih konten, dll, dan saat ini web worker berjalan di latar belakang.

Dukungan Pereksa

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

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 menghitung di latar belakang:

Bilangan:

Coba Sendiri

Periksa Dukungan Web Worker

Sebelum membuat web worker, silakan periksa apakah pengguna pereksa web anda mendukungnya:

if (typeof(Worker) !== "undefined") {
    // Ya! Diperkenalkan Web worker!
    // Beberapa kod.....
}
    // Maaf! Tidak Diperkenalkan Web Worker!
}

Buat Fail 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 dalam 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, tetapi untuk tugas yang memerlukan sumber daya CPU yang tinggi.

Membuat Objek Web Worker

Sekarang kami sudah 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 penjaga acara "onmessage" untuk web worker:

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

Ketika web worker mengirimkan pesan, kode dalam penjaga acara akan dijalankan. Data dari web worker akan disimpan di event.data.

Hentikan Web Worker

Setelah membuat 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 Penuh Web Worker

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

Contoh

<!DOCTYPE html>
<html>
<body>
<p>Bilangan: <output id="result"></output></p>
<button onclick="startWorker()">Mulai Kerja</button> 
<button onclick="stopWorker()">Hentikan Kerja</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 dalam berkas eksternal, mereka tidak dapat mengakses objek JavaScript berikut:

  • Objek window
  • Objek document
  • Objek parent