Sebelum HTML5, JavaScript berjalan di browser bekerja dengan cara tunggal. Meskipun ada banyak cara untuk mengimplementasikan simulasi multi-thread (seperti metode setInterval, metode setTimeout, dll. Dalam JavaScript), pada dasarnya, program berjalan masih dilakukan oleh mesin JavaScript dengan cara tunggal. Utas pekerja yang diperkenalkan dalam HTML5 memungkinkan mesin JavaScript sisi browser untuk mengeksekusi kode JavaScript secara bersamaan, sehingga mencapai dukungan yang baik untuk pemrograman multi-threaded sisi browser.
Multithreading in JavaScript - WebWorker Pekerja web di HTML5 dapat dibagi menjadi dua jenis utas yang berbeda, satu adalah pekerja khusus utas khusus dan yang lainnya adalah pekerja bersama utas bersama. Dua jenis utas memiliki kegunaan yang berbeda. Pekerja web khususSeorang pekerja yang berdedikasi terhubung ke skrip yang membuatnya. Ini dapat berkomunikasi dengan pekerja lain atau komponen browser, tetapi tidak dapat berkomunikasi dengan DOM. Makna yang berdedikasi adalah bahwa utas ini hanya memproses satu persyaratan pada satu waktu. Utas khusus diimplementasikan di berbagai browser arus utama kecuali IE dan dapat digunakan dengan percaya diri.
Buat utasMembuat pekerja sederhana, cukup berikan nama file dari file JavaScript yang perlu dieksekusi di utas ke konstruktor.
Komunikasi utasKomunikasi antara utas utama dan utas anak menggunakan metode postmessage dan OnMessage dari objek utas. Tidak peduli siapa yang mengirim data kepada siapa, pengiriman dan pengiriman menggunakan metode postmessage, dan penerima menggunakan metode OnMessage untuk menerima data. Postmessage hanya memiliki satu parameter, yaitu, data yang diteruskan, dan OnMessage hanya memiliki satu parameter. Asumsikan itu adalah peristiwa, data yang diterima diperoleh melalui event.data.
Kirim data JSONJSON adalah sesuatu yang didukung secara asli oleh JS. Itu tidak perlu digunakan untuk apa -apa. Cukup gunakan data kompleks di JSON. Misalnya:
PostMessage ({'cmd': 'init', 'timestamp': date.now ()});
Penanganan kesalahanKetika kesalahan terjadi di utas, panggilan balik acara OnError akan dipanggil. Oleh karena itu, cara untuk menangani kesalahan sangat sederhana, yaitu memasang acara Onerror dari instance utas. Fungsi panggilan balik ini memiliki kesalahan parameter, yang memiliki 3 bidang: pesan - pesan kesalahan; FileName - File skrip di mana kesalahan terjadi; Lineno - garis di mana kesalahan terjadi.
Hancurkan utasDi dalam utas, gunakan metode dekat untuk menghancurkan dirinya sendiri. Di utas utama di luar utas, metode penghentian instance utas digunakan untuk menghancurkan utas.
Berikut ini adalah contoh untuk melihat operasi dasar utas:
Kode HTML:
<! Doctype html>
<Html>
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> pekerja web fibonacci </iteme>
<type skrip = "Teks/JavaScript">
onload = function () {
var pekerja = pekerja baru ('fibonacci.js');
worker.onmessage = function (event) {
console.log ("hasil:" + event.data);
};
worker.onError = function (error) {
console.log ("error:" + error.message);
};
Worker.PostMessage (40);
}
</script>
</head>
<body>
</body>
</html>
File skrip Kode Fibonacci.js:
//fibonacci.js
var fibonacci = fungsi (n) {
kembali n <2? n: argumen.callee (n - 1) + argumen.callee (n - 2);
};
onMessage = function (event) {
var n = parseInt (event.data, 10);
postmessage (fibonacci (n));
};
Masukkan mereka di direktori yang sama, jalankan file halaman, dan lihat konsol untuk melihat hasil menjalankan.
Ada poin lain di sini. Di utas utama, acara OnMessage dapat dikaitkan dengan cara lain:
worker.addeventListener ('pesan', fungsi (acara) {
console.log ("hasil:" + event.data);
}, PALSU);
Saya pribadi berpikir itu sangat merepotkan, jadi mengapa tidak menggunakan OnMessage secara langsung.
Gunakan file skrip lainnyaPekerja dapat menggunakan metode Import Metode Global untuk memuat dan menggunakan file skrip in-domain lainnya atau pustaka kelas. Misalnya, berikut ini adalah cara legal untuk digunakan:
ImportScripts ();/ * tidak mengimpor apa pun */
ImportScripts ('foo.js'); / * impor hanya "foo.js" */
ImportScripts ('foo.js', 'bar.js');/ * mengimpor dua skrip */
Setelah mengimpor, Anda dapat langsung menggunakan metode dalam file -file ini. Lihat contoh kecil online:
/**
* Gunakan metode ImportScripts untuk memperkenalkan skrip sumber daya eksternal, di sini kita menggunakan alat perhitungan rumus matematika pustaka math_utilities.js
* Ketika mesin JavaScript memuat file sumber daya ini, terus jalankan kode berikut. Pada saat yang sama, kode berikut dapat diakses dan dipanggil
* Variabel dan metode yang didefinisikan dalam file sumber daya.
**/
ImportScripts ('Math_utilities.js');
onMessage = function (acara)
{
var first = event.data.first;
var kedua = event.data.second;
Hitung (pertama, kedua);
};
fungsi menghitung (pertama, kedua) {
// Lakukan perhitungan pekerjaan
var common_divisor = divisor (pertama, kedua);
var common_multiple = multipel (pertama, kedua);
Postmessage ("Work Done!" +
"Kelipatan paling tidak umum adalah" + common_divisor +
"Dan pembagi umum terbesar adalah"+common_multiple);
}
Beberapa netizen di internet juga berpikir untuk menggunakan metode ImportScripts di sini untuk menyelesaikan masalah sumber daya preloading (browser preload sumber daya tanpa mem -parsing dan melaksanakan sumber daya), dan alasannya juga sangat sederhana.
Sarang utasDi utas pekerja, Anda juga dapat membuat utas anak, dan berbagai operasi adalah sama.
Masalah sinkronisasiPekerja tidak memiliki mekanisme kunci, dan masalah sinkronisasi multithready hanya dapat diselesaikan dengan kode (seperti mendefinisikan variabel sinyal).
SharedWebWorker Pekerja web bersama terutama cocok untuk masalah koneksi koneksi berganda. Karena perlu berurusan dengan banyak koneksi, API -nya sedikit berbeda dari pekerja yang berdedikasi. Selain itu, pekerja web bersama, seperti pekerja khusus, tidak dapat mengakses DOM, dan akses ke properti formulir juga dibatasi. Pekerja web yang dibagikan juga tidak dapat melintasi komunikasi.Skrip halaman dapat berkomunikasi dengan pekerja web bersama, namun, sedikit berbeda dari pekerja web yang berdedikasi (menggunakan komunikasi port implisit) adalah bahwa komunikasi secara eksplisit dilakukan dengan menggunakan objek port dan melampirkan penangan acara pesan.
Setelah menerima pesan pertama dari skrip Pekerja Web, pekerja web yang dibagikan melampirkan penangan acara ke port yang diaktifkan. Secara umum, penangan akan menjalankan metode postmessage () sendiri untuk mengembalikan pesan ke kode panggilan, dan kemudian metode start port () menghasilkan proses pesan yang valid.
Lihatlah satu -satunya contoh yang dapat Anda temukan di Internet: Buat utas bersama untuk menerima instruksi yang dikirim dari berbagai koneksi, dan kemudian mengimplementasikan logika pemrosesan instruksi sendiri. Setelah pemrosesan instruksi selesai, hasilnya akan dikembalikan ke setiap pengguna yang terhubung yang berbeda.
Kode HTML:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<Title> Contoh Pekerja Bersama: Cara Menggunakan Pekerja Bersama di HTML5 </iteme>
<script>
var worker = new sharedworker ('sharedworker.js');
var log = document.geteLementById ('response_from_worker');
worker.port.addeventListener ('pesan', fungsi (e) {
// Catat data respons di halaman web
log.textContent = e.data;
}, PALSU);
worker.port.start ();
worker.port.postmessage ('ping dari halaman web pengguna ..');
// Metode berikut akan mengirim input pengguna ke SharedWorker
fungsi postmessageTosharedWorker (input)
{
// Tentukan objek JSON untuk membangun permintaan
var instruksi = {instruksi: input.value};
worker.port.postmessage (instruksi);
}
</script>
</head>
<body onload = ''>
<output id = 'response_from_worker'>
Contoh Pekerja Bersama: Cara Menggunakan Pekerja Bersama di HTML5
</setput>
Kirim instruksi ke pekerja bersama:
<input type = "Text" Autofocus OnInput = "PostMessageToSharedWorker (ini); return false;">
</input>
</body>
</html>
Kode File Script:
// Buat utas bersama untuk menerima instruksi yang dikirim dari koneksi yang berbeda. Setelah pemrosesan instruksi selesai, hasilnya akan dikembalikan ke setiap pengguna yang terhubung yang berbeda.
var connect_number = 0;
onConnect = function (e) {
connect_number = connect_number+ 1;
// Dapatkan port pertama di sini
var port = e.ports [0];
port.postmessage ('Koneksi baru! Nomor koneksi saat ini adalah'
+ connect_number);
port.onMessage = function (e) {
// Dapatkan instruksi dari Pemohon
VAR Instruction = E.Data.Instruction;
var result = execute_instruction (instruksi);
port.postmessage ('permintaan:'+instruksi+'respons'+hasil
+'dari pekerja bersama ...');
};
};
/*
* Fungsi ini akan digunakan untuk menjalankan instruksi yang dikirim dari pemohon
* @param instruksi
* @kembali
*/
fungsi execute_instruction (instruksi)
{
var result_value;
// Implementasikan logika Anda di sini
// Jalankan instruksi ...
return result_value;
}
Dalam contoh utas bersama di atas, objek utas bersama dibangun pada halaman utama, yaitu, setiap halaman koneksi pengguna, dan metode didefinisikan untuk mengirim instruksi pengguna yang masuk ke utas bersama. Pada saat yang sama, Connect_Number didefinisikan dalam cuplikan kode implementasi dari utas bersama untuk mencatat jumlah total yang terhubung ke utas bersama. Setelah itu, gunakan prosesor acara OnConnect untuk menerima koneksi dari pengguna yang berbeda dan menguraikan instruksi yang mereka lewati. Akhirnya, metode execute_instruction didefinisikan untuk menjalankan instruksi pengguna. Setelah eksekusi instruksi selesai, hasilnya akan dikembalikan ke setiap pengguna.
Di sini kami tidak menggunakan pawang acara OnMessage dari utas pekerja seperti contoh sebelumnya, tetapi menggunakan metode lain untuk AddEventListener. Faktanya, seperti yang disebutkan sebelumnya, prinsip -prinsip implementasi keduanya pada dasarnya sama, tetapi ada beberapa perbedaan kecil di sini. Jika Anda menggunakan AddEventListener untuk menerima pesan dari utas bersama, Anda harus terlebih dahulu menggunakan metode worker.port.start () untuk memulai port ini. Setelah itu, Anda dapat menerima dan mengirim pesan secara normal seperti cara utas pekerja digunakan.
Pernyataan terakhir Hal -hal yang dapat Anda lakukan di utas :1. Dapat menggunakan setTimeout (), clearTimeout (), setInterval (), clearInterval () dan fungsi lainnya.
2. Dapat menggunakan objek navigator.
3. Dapat menggunakan XMLHTTPREQUEST untuk mengirim permintaan.
4. Anda dapat menggunakan penyimpanan web di utas.
5. Anda dapat menggunakan diri untuk mendapatkan ruang lingkup utas ini di utas.
Hal -hal yang tidak dapat dilakukan di utas :1. Objek DOM/BOM selain Navigator tidak dapat digunakan dalam utas, seperti jendela dan dokumen (jika Anda ingin beroperasi, Anda hanya dapat mengirim pesan ke pembuat pekerja dan beroperasi melalui fungsi callback).
2. Variabel dan fungsi di utas utama tidak dapat digunakan di utas.
3. Perintah Operasi dengan Efek Penangguhan tidak dapat digunakan dalam utas, seperti peringatan, dll.
4. Js tidak dapat dimuat di seluruh domain di utas.
Utas juga membutuhkan konsumsi sumber daya, dan menggunakan utas juga akan membawa beberapa kompleksitas, jadi jika tidak ada alasan yang cukup untuk menggunakan utas tambahan, maka jangan gunakan.
Referensi PraktisDokumen Resmi: http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html
Klasifikasi Webworker Deskripsi: http://www.w3schools.com/html5/html5_webworkers.asp
Template Kekhawatiran: http://www.cuoxin.com/w3school/html5/
Tinjauan WebWorker: https://developer.mozilla.org/en/using_web_workers