API Pekerja Web

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

Apa itu Web Worker?

Saat menjalankan skrip di halaman HTML, halaman akan menjadi tidak merespon sampai skrip selesai.

Web Worker adalah JavaScript yang berjalan di latar belakang, bebas dari script lain, dan tidak mempengaruhi kinerja halaman. Anda dapat melanjutkan melakukan apa pun yang Anda inginkan: klik, memilih konten, dll, sementara web worker berjalan di latar belakang.

Dukungan Browser

Angka di tabel menunjukkan versi pertama browser yang mendukung Web Workers penuh:

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
Januari 2010 September 2012 Juni 2009 Juni 2009 Juni 2011

Instance Web Worker

Contoh di bawah ini membuat Web Worker sederhana yang menghitung angka di latar belakang:

Contoh

Jumlah:

Coba Sendiri

Periksa Browser Web Worker

Sebelum membuat web worker, periksa apakah browser pengguna mendukungnya:

if (typeof(Worker) !== "undefined") {
  // Ya! Dukungan Web worker!
  // Beberapa kode.....
else {
  // Maaf! Tidak ada dukungan Web Worker...
}

Buat File Web Worker

Sekarang, mari kita buat Web Worker kami di JavaScript eksternal.

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

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

Bagian penting kode di atas adalah postMessage() Metode - untuk mengirimkan pesan kembali ke halaman HTML.

Keterangan:Biasanya web worker tidak digunakan untuk skrip sederhana seperti ini, melainkan untuk tugas yang membutuhkan CPU tinggi.

Buat Objek Web Worker

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

Baris kode berikut ini memeriksa apakah worker sudah ada, 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 mengirim dan menerima pesan dari web worker.

Tambahkan pendengar even "onmessage" ke web worker.

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

Ketika Web Worker menerbitkan pesan, kode di pendengar even akan dijalankan. Data dari Web Worker disimpan di event.data.

Hentikan Web Worker

Ketika objek web worker dibuat, ia akan terus mendengar pesan (meskipun skrip eksternal selesai) sampai ia dihentikan.

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

w.terminate();

Penggunaan Ulang Web Worker

Jika variabel worker diatur menjadi undefined, maka setelah ia berhenti, Anda dapat menggunakan kode berikut:

w = undefined;

Kode Contoh Penuh Web Worker

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

Contoh

<!DOCTYPE html>
<html>
<body>
<p>Jumlah angka: <output id="result"></output></p>
<button onclick="startWorker()">Mulai Kerja</button>
<button onclick="stopWorker()">Hentikan Worker</button>
<script>
let w;
function startWorker() {
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}
function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>
</body>
</html>

Coba Sendiri

Web Worker dan DOM

Karena Web Worker berada di berkas eksternal, mereka tidak dapat mengakses objek JavaScript berikut ini:

  • Objek window
  • Objek document
  • Objek parent