Serbuan pada Sambungan API Javascript HTML5 1—Pelaksanaan Asynchronous Pekerja Web dan Gambaran Keseluruhan Berkaitan_html5 kemahiran tutorial

Mekanisme pelaksanaan JavaScript , dsb.), tetapi pada dasarnya, pengendalian program masih dilakukan oleh enjin JavaScript dalam cara penjadualan satu benang. Benang pekerja yang diperkenalkan dalam HTML5 membolehkan enjin Javascript sebelah penyemak imbas melaksanakan kod Javascript secara serentak, dengan itu mencapai sokongan yang baik untuk pengaturcaraan berbilang benang sebelah pelayar.
Berbilang utas dalam Javascript - WebWorker

Web Worker dalam HTML5 boleh dibahagikan kepada dua jenis utas yang berbeza, satu ialah utas khusus Pekerja Dedicated, dan satu lagi adalah utas kongsi Dikongsi Pekerja. Kedua-dua jenis benang mempunyai tujuan yang berbeza.
Pekerja web yang berdedikasi
Pekerja yang berdedikasi disambungkan kepada skrip yang menciptanya. Ia boleh berkomunikasi dengan pekerja lain atau komponen penyemak imbas, tetapi ia tidak boleh berkomunikasi dengan DOM. Maksud berdedikasi, saya fikir, adalah bahawa thread ini hanya mengendalikan satu keperluan pada satu masa. Benang khusus dilaksanakan dalam pelbagai pelayar arus perdana kecuali IE dan boleh digunakan dengan yakin. Membuat utas

Membuat pekerja adalah sangat mudah hanya hantar nama fail fail JavaScript yang perlu dilaksanakan dalam utas kepada pembina. Komunikasi utas

Untuk berkomunikasi antara utas utama dan sub-utas, kaedah postMessage dan onmessage objek utas digunakan. Tidak kira siapa yang menghantar data kepada siapa, pengirim menggunakan kaedah postMessage, dan penerima menggunakan kaedah onmessage untuk menerima data. postMessage hanya mempunyai satu parameter, iaitu data yang dipindahkan, dan onmessage juga mempunyai hanya satu parameter Jika ia adalah peristiwa, data yang diterima diperoleh melalui event.data. Hantar data JSON

JSON ialah sesuatu yang disokong secara asli oleh JS. Gunakan JSON untuk menghantar data yang kompleks. Contohnya:

Salin kod

Kodnya adalah seperti berikut:

postMessage({ 'cmd': 'init', 'timestamp': Date.now()});

Mengendalikan ralat

Apabila ralat berlaku dalam urutan, ralatnya panggilan balik acara akan dipanggil. Jadi cara untuk mengendalikan ralat adalah sangat mudah, iaitu dengan mengaitkan peristiwa onerror contoh utas. Fungsi panggil balik ini mempunyai ralat parameter, yang mempunyai 3 medan: mesej - mesej ralat - fail skrip tempat ralat berlaku - baris tempat ralat berlaku; Hancurkan benang

Di dalam benang, gunakan kaedah tutup untuk memusnahkan dirinya sendiri. Dalam utas utama di luar utas, gunakan kaedah tamat contoh utas untuk memusnahkan utas. Mari kita lihat operasi asas benang daripada contoh: Kod HTML:

Salin kod

Kodnya adalah seperti berikut :

content="text/ html; charset=utf-8" />

var n = parseInt(event.data, 10); ke dalam direktori yang sama dan jalankan halaman Fail, semak konsol, anda boleh melihat hasil operasi.
Seperkara lagi di sini ialah dalam urutan utama, acara onmessage boleh disambungkan dengan cara lain:

Salin kod

Kodnya adalah seperti berikut:

worker.addEventListener('message', function(event) {
console.log("Result:" event.data);
}, palsu );


Secara peribadi, saya rasa ia sangat menyusahkan, jadi lebih baik menggunakan onmessage secara terus.
Menggunakan fail skrip lain
Benang pekerja boleh menggunakan kaedah global importScripts untuk memuatkan dan menggunakan fail skrip dalam domain atau perpustakaan kelas yang lain. Sebagai contoh, berikut adalah penggunaan undang-undang:

Salin kod

Kodnya adalah seperti berikut:

importScripts();/* tidak mengimport */
importScripts('foo.js'); /* hanya mengimport "foo.js" */
importScripts('foo.js', 'bar .js') ;/* mengimport dua skrip */

Selepas mengimport, anda boleh menggunakan kaedah dalam fail ini secara langsung. Lihat contoh kecil dalam talian:

Salin kod

Kodnya adalah seperti berikut:

/* *
* Gunakan kaedah importScripts untuk memperkenalkan skrip sumber luaran Di sini kami menggunakan perpustakaan alat pengiraan formula matematik math_utilities.js
* Apabila enjin JavaScript telah selesai memuatkan fail sumber ini, teruskan melaksanakan kod berikut. Pada masa yang sama, kod berikut boleh mengakses dan memanggil
* pembolehubah dan kaedah yang ditakrifkan dalam fail sumber.
**/
importScripts('math_utilities.js');
onmessage = function (event)
{
var first = event.data.first; var second = peristiwa .data.second;
hitung(pertama,kedua); pembahagi(pertama, kedua);
var common_multiple=multiple(first,second); ialah " common_multiple) ;
}


Sesetengah netizen di Internet juga terfikir untuk menggunakan kaedah importScripts di sini untuk menyelesaikan masalah pramuat sumber (pelayar memuatkan sumber terlebih dahulu tanpa menghuraikan dan melaksanakan sumber). Sebabnya juga Sangat mudah.

Sarang benang

Anda juga boleh mencipta sub-benang dalam urutan pekerja, dan pelbagai operasi masih sama.

Isu penyegerakan

Pekerja tidak mempunyai mekanisme kunci dan isu penyegerakan berbilang benang hanya boleh diselesaikan dengan kod (seperti menentukan pembolehubah isyarat).
SharedWebWorker Shared
Pekerja web kongsi terutamanya sesuai untuk isu konkurensi berbilang sambungan. Kerana ia perlu mengendalikan berbilang sambungan, APInya berbeza sedikit daripada pekerja yang berdedikasi. Selain itu, pekerja web kongsi, seperti pekerja berdedikasi, tidak mempunyai akses kepada DOM dan mempunyai akses terhad kepada bentuk hartanah. Pekerja web yang dikongsi juga tidak boleh berkomunikasi merentas rangkaian.
Skrip halaman boleh berkomunikasi dengan pekerja web kongsi Walau bagaimanapun, berbeza sedikit daripada pekerja web khusus (yang menggunakan port tersirat untuk berkomunikasi), komunikasi adalah eksplisit melalui penggunaan objek port dan Ini dilakukan dengan melampirkan pengendali acara mesej. . Selepas menerima mesej pertama daripada skrip pekerja web, pekerja web yang dikongsi melampirkan pengendali acara pada port yang diaktifkan. Biasanya, pengendali akan menjalankan kaedah postMessage() sendiri untuk mengembalikan mesej kepada kod panggilan, dan kemudian kaedah start() port akan menjana proses mesej yang sah. Lihat satu-satunya contoh yang boleh saya temui di Internet: Cipta urutan yang dikongsi untuk menerima arahan yang dihantar daripada sambungan yang berbeza, dan kemudian laksanakan logik pemprosesan arahan anda sendiri Selepas pemprosesan arahan selesai, hasilnya dikembalikan kepada setiap yang berbeza pengguna sambungan.
Kod HTML:



Salin kod


Kod tersebut adalah seperti berikut:

var worker = new SharedWorker('sharedworker.js');
var log = document.getElementById('response_from_worker');
worker.port.addEventListener('message', function(e) {
//log data respons dalam halaman web
log.textContent =e.data;
}, false);
worker.port.start();
worker.port.postMessage('ping daripada halaman web pengguna..');
//kaedah berikut akan menghantar input pengguna kepada sharedworker
fungsi postMessageToSharedWorker(input)
{
//takrifkan objek json untuk membina permintaan
var instructions={instruction:input.value };
worker.port.postMessage(arahan);
}

Contoh pekerja kongsi: cara menggunakan pekerja kongsi dalam HTML5

hantar arahan kepada pekerja kongsi:

脚本文件代码：

复制代码

代码>

// 创建一个共享线程用于接收从不同连接发送过来的指令，指令处理小完完各个不同的连接用户。

var connect_number = 0;
onconnect = fungsi(e) {
connect_number =connect_nomber 1;
//dapatkan port pertama di sini
var port = e.ports[0];
port.postMessage('Sambungan baharu! Nombor sambungan semasa ialah '
connect_number);
port.onmessage = function(e) {
//dapat arahan daripada peminta
var instruction=e.data.instruction;
var results=laksanakan_arahan(arahan);
port.postMessage('Permintaan: ' arahan ' Respons ' keputusan
' daripada pekerja kongsi...');
};
};
/*
* fungsi ini akan digunakan untuk melaksanakan arahan yang dihantar daripada peminta
* arahan @param
* @return
*/
function execute_instruction(instruction)
{
var result_value;
//laksanakan logik anda di sini
//laksanakan arahan...
kembali nilai_hasil；
}


Dalam contoh utas kongsi di atas, objek utas kongsi dibina pada halaman utama, iaitu setiap halaman sambungan pengguna, dan kemudian kaedah postMessageToSharedWorker ditakrifkan untuk menghantar arahan pengguna ke utas kongsi. Pada masa yang sama, connect_number ditakrifkan dalam coretan kod pelaksanaan utas kongsi untuk merekodkan jumlah bilangan sambungan ke utas kongsi ini. Selepas itu, gunakan pengendali acara onconnect untuk menerima sambungan daripada pengguna yang berbeza dan menghuraikan arahan yang diluluskan oleh mereka. Akhir sekali, kaedah execute_instruction ditakrifkan untuk melaksanakan arahan pengguna Selepas arahan dilaksanakan, keputusan dikembalikan kepada setiap pengguna.

Di sini kami tidak menggunakan pengendali acara onmessage bagi urutan pekerja seperti contoh sebelumnya, tetapi menggunakan kaedah lain addEventListener. Sebenarnya, seperti yang dinyatakan sebelum ini, prinsip pelaksanaan kedua-duanya pada asasnya adalah sama, tetapi terdapat sedikit perbezaan di sini Jika addEventListener digunakan untuk menerima mesej daripada rangkaian kongsi, maka kaedah worker.port.start() mesti digunakan. pertama untuk membolehkan port ini. Selepas itu, anda boleh menerima dan menghantar mesej secara normal dengan cara yang sama seperti urutan pekerja.
Pernyataan akhir
Perkara yang boleh dilakukan dalam urutan:
1 Anda boleh menggunakan setTimeout(), clearTimeout(), setInterval(), clearInterval (), dsb. fungsi.
2. Boleh menggunakan objek navigator.
3. Boleh menggunakan XMLHttpRequest untuk menghantar permintaan.
4. Storan Web boleh digunakan dalam benang.
5. Anda boleh menggunakan diri dalam benang untuk mendapatkan skop benang ini.
Perkara yang tidak boleh dilakukan dalam utas:
1. Objek DOM/BOM selain daripada navigator tidak boleh digunakan dalam utas, seperti tetingkap dan dokumen (jika anda mahu beroperasi, anda hanya boleh menghantar mesej kepada Creator pekerja, dikendalikan melalui fungsi panggil balik).
2. Pembolehubah dan fungsi dalam utas utama tidak boleh digunakan dalam utas.
3. Perintah operasi dengan kesan "penggantungan", seperti amaran, dsb., tidak boleh digunakan dalam rangkaian.
4. JS tidak boleh dimuatkan merentas domain dalam urutan.
Benang juga menggunakan sumber, dan menggunakan benang juga akan membawa kerumitan tertentu, jadi jika tiada sebab yang kukuh untuk menggunakan benang tambahan, maka jangan gunakannya.
Rujukan praktikal
Dokumentasi rasmi: http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html
Penerangan klasifikasi WebWorker: http://www.w3schools.com/html5/html5_webworkers.asp
Script House: http://www.jb51.net/w3school/html5/
Gambaran Keseluruhan WebWorker: https://developer.mozilla.org/en/Using_web_workers