Sebuah web worker adalah JavaScript berjalan di latar belakang, tanpa mempengaruhi kinerja halaman.
Apa yang dimaksud dengan Web Worker ?
Ketika menjalankan skrip dalam halaman HTML, halaman menjadi tidak responsif sampai script selesai.
Seorang pekerja web, seperti yang didefinisikan oleh World Wide Web Consortium (W3C) dan Web Application Technology Working Group Hypertext (WHATWG), adalah script JavaScript dieksekusi dari halaman HTML yang berjalan di latar belakang, secara independen dari script user-interface lain yang mungkin juga telah dieksekusi dari halaman HTML yang sama. pekerja web sering dapat memanfaatkan CPU multi-core lebih efektif.
Ikhtisar
Yang diusulkan oleh WHATWG, pekerja web relatif berat-berat. Mereka diharapkan menjadi berumur panjang, memiliki biaya start-up tinggi kinerja, dan biaya memori per-instance tinggi.
pekerja web tidak dimaksudkan atau diharapkan dapat digunakan dalam jumlah besar karena mereka bisa babi sumber daya sistem.
Pekerja web memungkinkan untuk eksekusi bersamaan dari benang peramban dan satu atau lebih benang JavaScript berjalan di latar belakang. Browser yang mengikuti thread tunggal eksekusi harus menunggu pada program JavaScript untuk menyelesaikan mengeksekusi sebelum melanjutkan dan ini mungkin memerlukan waktu yang signifikan yang programmer mungkin ingin bersembunyi dari pengguna.
Hal ini memungkinkan untuk browser untuk melanjutkan operasi normal saat menjalankan script di latar belakang. Spesifikasi pekerja web adalah spesifikasi terpisah dari spesifikasi HTML5 dan dapat digunakan dengan HTML5.
Ada dua jenis pekerja web: didedikasikan dan berbagi pekerja.
Ketika pekerja web berjalan di latar belakang, mereka tidak memiliki akses langsung ke DOM tetapi berkomunikasi dengan dokumen oleh pesan lewat. Hal ini memungkinkan untuk multi-threaded pelaksanaan program JavaScript.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung Web Workers .
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10,0 | 3,5 | 4.0 | 11,5 |
HTML Web Workers Contoh
Contoh di bawah menciptakan sederhana web worker yang menghitung angka di latar belakang:
Periksa Web Worker Dukungan
Sebelum membuat web worker , memeriksa apakah browser pengguna mendukungnya:
if(typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
Buat Web Worker Berkas
Sekarang, mari kita membuat kami web worker dalam JavaScript eksternal.
Di sini, kita buat script yang penting. Script disimpan di "/html/demo_workers.js" berkas:
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i) ;
setTimeout("timedCount() ",500);
}
timedCount() ;
Bagian penting dari kode di atas adalah postMessage() metode - yang digunakan untuk mengirim pesan kembali ke halaman HTML.
Note: Biasanya web workers tidak digunakan untuk script sederhana seperti, tapi untuk lebih CPU intensif tugas.
Buat Web Worker Object
Sekarang bahwa kita memiliki web worker berkas, kita perlu menyebutnya dari halaman HTML.
Baris berikut memeriksa apakah web worker sudah ada, jika tidak - itu menciptakan baru web worker obyek dan menjalankan kode di "/html/demo_workers.js" :
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
}
Kemudian kita dapat mengirim dan menerima pesan dari web worker .
Tambahkan "onmessage" pendengar acara ke web worker .
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Ketika web worker posting pesan, kode dalam acara pendengar dijalankan. Data dari web worker disimpan dalam event.data.
Mengakhiri Web Worker
Ketika sebuah web worker objek dibuat, akan terus mendengarkan pesan (even after the external script is finished) sampai diakhiri.
Untuk mengakhiri web worker , dan sumber informasi gratis browser / komputer, gunakan terminate() metode:
w.terminate();
Menggunakan kembali Web Worker
Jika Anda mengatur web worker variabel untuk undefined, setelah itu telah dihentikan, Anda dapat menggunakan kembali kode:
w = undefined;
Penuh Web Worker Contoh Kode
Kami telah melihat Web Worker kode dalam .js berkas. Berikut ini adalah kode untuk halaman HTML:
Contoh
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html> Cobalah sendiri " Web Workers dan DOM
Sejak web workers dalam file eksternal, mereka tidak memiliki akses ke objek JavaScript berikut:
- Jendela objek
- Objek dokumen
- Induk objek