Latest web development tutorials

Pekerja Web HTML5

pekerja web menjalankan JavaScript di latar belakang dan tidak mempengaruhi kinerja halaman.


Apa yang dimaksud dengan Pekerja Web?

Ketika menjalankan script di halaman HTML, negara halaman tidak responsif sampai script selesai.

pekerja web menjalankan JavaScript di latar belakang, independen dari skrip lain tidak akan mempengaruhi kinerja dari halaman. Anda dapat terus melakukan apa pun yang bersedia melakukan: Klik untuk memilih konten, dll, pada saat pekerja web berjalan di latar belakang.


Dukungan Browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Chrome, Safari dan Opera dukungan pekerja Web.


HTML5 Pekerja Web contoh

Contoh berikut membuat seorang pekerja web sederhana, menghitung di latar belakang:

contoh

menghitung:




Coba »

demo_workers.js file kode:

var i = 0;

Fungsi timedCount ()
{
i = i + 1;
postMessage (i);
setTimeout ( "timedCount ()", 500);
}

timedCount ();


Mendeteksi apakah browser mendukung Pekerja Web

Sebelum membuat seorang pekerja web, silakan cek browser pengguna mendukungnya:

if (typeof (Pekerja)! == "undefined")
{
// Ya! Dukungan pekerja Web!
//Beberapa kode .....
}
lain
{
// Maaf! Pekerja Web tidak didukung
}


Buat file web worker

Sekarang, mari kita membuat pekerja web kami di JavaScript eksternal.

Di sini, kami telah membuat jumlah naskah. script disimpan di "demo_workers.js" file:

var i = 0;

Fungsi timedCount ()
{
i = i + 1;
postMessage (i);
setTimeout ( "timedCount ()", 500);
}

timedCount ();

bagian penting dari kode di atas adalah () metode postMessage - itu digunakan untuk mengembalikan beberapa halaman HTML berita.

Catatan: pekerja web umumnya tidak digunakan untuk script sederhana seperti, tapi untuk lebih banyak tugas CPU-intensif.


Buat Object Web Worker

Kami sudah memiliki file pekerja web, dan sekarang kita harus menyebutnya dari halaman HTML.

Kode berikut mendeteksi kehadiran pekerja, jika tidak ada - itu menciptakan objek pekerja web baru dan kemudian jalankan "demo_workers.js" code:

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

Kami kemudian dapat mengambil tempat dan menerima pesan dari pekerja web.

Tambahkan ke pekerja web "onmessage" acara pendengar:

w.onmessage = function (event) {
. Document.getElementById ( "hasil") innerHTML = event.data;
};

Web pemutusan Pekerja

Ketika kita membuat objek pekerja web, akan terus mendengarkan pesan (bahkan setelah selesainya skrip eksternal) sampai diakhiri oleh.

Untuk mengakhiri pekerja web, dan melepaskan sumber daya browser / komputer, menggunakan metode mengakhiri ():

w.terminate ();


contoh kode lengkap Web Worker

Kami telah melihat file kode Pekerja Js. Berikut adalah halaman kode HTML:

contoh

<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> Tutorial ini (w3big.com) </ title>
</ Kepala>
<Body>

<P> count: <keluaran id = "hasil"> </ output> </ p>
<Tombol onclick = "startWorker ()"> bekerja </ button>
<Tombol onclick = "stopWorker ()"> berhenti </ button>

<P> <strong> Catatan: </ strong> Internet Explorer 9 dan versi sebelumnya dari browser IE tidak mendukung Pekerja Web </ p>.

<Script>
var w;

berfungsi startWorker () {
if (typeof (Pekerja)! == "undefined") {
if (typeof (w) == "undefined") {
w = Pekerja baru ( "demo_workers.js");
}
w.onmessage = function (event) {
. Document.getElementById ( "hasil") innerHTML = event.data;
};
} Lain {
document.getElementById ( "hasil") innerHTML = "Maaf, browser Anda tidak mendukung Pekerja Web ..." .;
}
}

Fungsi stopWorker ()
{
w.terminate ();
w = tidak terdefinisi;
}
</ Script>

</ Body>
</ Html>

Coba »


Pekerja web dan DOM

Sejak pekerja web dalam sebuah file eksternal, mereka tidak dapat mengakses JavaScript keberatan contoh berikut:

  • jendela objek
  • dokumen Object
  • benda tua