Web Worker API

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 tidak menanggapkan sebelum 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 sepenuhnya:

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

Hitungan:

亲自试一试

Periksa Browser Web Worker

Sebelum membuat web worker, silakan periksa apakah perpustakaan pengguna browser mendukungnya:

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

Buat Fail Web Worker

Sekarang, kita buat Web Worker kami di JavaScript luar.

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

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

Bagian penting dalam kode di atas adalah postMessage() Method - untuk mengirim mesej kembali ke halaman HTML.

Komen:Biasanya web worker tidak digunakan untuk skrip sederhana ini, melainkan untuk tugas yang memerlukan CPU yang tinggi.

Buat Objek Web Worker

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

Baris kode berikut ini memeriksa sama ada worker sudah wujud atau tidak, jika tidak ada, ia akan membuat objek web worker baru dan menjalankan kode di dalam "demo_workers.js":

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

Lalu kami dapat mengirim dan menerima mesej dari web worker.

Tambahkan penjaga peristiwa "onmessage" ke web worker.

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

Ketika Web Worker menerbitkan mesej, kode di dalam penjaga peristiwa akan dijalankan. Data dari Web Worker disimpan di event.data.

Hentikan Web Worker

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

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

w.terminate();

Penggunaan Semula Web Worker

Jika variabel worker diatur menjadi undefined, anda dapat menggunakan kode berikut setelah ia dihentikan:

w = undefined;

Kode Contoh Penuh Web Worker

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

Contoh

<!DOCTYPE html>
<html>
<body>
<p>Hitung nombor: <output id="result"></output></p>
<button onclick="startWorker()">Buat Kerja</button>
<button onclick="stopWorker()">Stop 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>

亲自试一试

Web Worker 和 DOM

由于 Web Worker 位于外部文件中，因此他们无法访问以下 JavaScript 对象：

  • window 对象
  • document 对象
  • parent 对象