Web Worker adalah solusi multi-threading javascript yang disediakan oleh HTML5. Kita dapat menyerahkan beberapa kode komputasi intensif ke pekerja web untuk dijalankan tanpa membekukan antarmuka pengguna.
1: Cara menggunakan PekerjaPrinsip dasar Web Worker adalah menggunakan kelas Worker untuk memuat file JavaScript di thread utama JavaScript saat ini untuk membuka thread baru, yang memiliki efek eksekusi non-pemblokiran dan menyediakan antarmuka untuk pertukaran data antar thread utama dan utas baru: postMessage, onmessage.
Nah bagaimana cara menggunakannya, mari kita lihat contohnya:
//worker.jsonmessage =function (evt){ var d = evt.data;//Dapatkan data yang dikirim melalui evt.data postMessage(d);//Kirim data yang diperoleh ke thread utama}Halaman HTML: tes.html
<!DOCTYPE HTML><html><head> <meta http-equiv=Jenis Konten content=teks/html; charset=utf-8/> <tipe skrip=teks/javascript>//halaman WEB thread utama var pekerja = new Worker(worker.js); //Buat objek Worker dan teruskan URL skrip yang akan dieksekusi di thread baruworker.postMessage(hello world); =function(evt){ //Menerima fungsi data console.log(evt.data) dari pekerja; //Mengeluarkan data yang dikirim dari pekerja} </script> </head> <body></body>< /html>Setelah membuka test.html dengan browser Chrome, konsol mengeluarkan hello world, yang menunjukkan bahwa program berhasil dijalankan.
Dari contoh ini kita dapat melihat bahwa penggunaan pekerja web pada dasarnya dibagi menjadi beberapa bagian berikut:
Utas utama WEB:
1. Muat file JS melalui pekerja = pekerja baru( url ) untuk membuat pekerja dan mengembalikan instance pekerja.
2. Kirim data ke pekerja melalui metode pekerja.postMessage(data).
3. Ikat metode pekerja.onmessage untuk menerima data yang dikirim oleh pekerja.
4. Anda dapat menggunakan pekerja.terminate() untuk menghentikan eksekusi pekerja.
thread pekerja baru:
1. Kirim data ke thread utama melalui metode postMessage(data).
2. Ikat metode onmessage untuk menerima data yang dikirim oleh thread utama.
2: Apa yang bisa dilakukan Pekerja?Sekarang kita tahu cara menggunakan pekerja web, apa kegunaannya, dan masalah apa yang bisa kita bantu selesaikan. Mari kita lihat contoh deret fibonacci.
Seperti kita ketahui bersama, dalam matematika, barisan fibonacci didefinisikan secara rekursif: F0=0, F1=1, Fn=F(n-1)+F(n-2) (n>=2, n∈N*), Implementasi umum javascript adalah:
var fibonacci =fungsi(n) { kembalikan n <2? n : argumen.callee(n -1) + argumen.callee(n -2);};//fibonacci(36)Waktu eksekusi penggunaan metode ini untuk menghitung deret fibonacci 39 di Chrome adalah 19097 milidetik, tetapi ketika menghitung 40, browser langsung menanyakan bahwa skrip sedang sibuk.
Karena JavaScript dijalankan dalam satu thread, browser tidak dapat mengeksekusi skrip JavaScript lain selama proses penghitungan urutan, dan thread rendering UI juga akan ditangguhkan, menyebabkan browser memasuki keadaan zombie. Menggunakan pekerja web untuk memasukkan proses perhitungan urutan ke dalam thread baru akan menghindari situasi ini. Lihat contoh spesifik:
//fibonacci.jsvar fibonacci =fungsi(n) { kembali n <2? n : argumen.callee(n -1) + argumen.callee(n -2);};onmessage =fungsi(acara) { var n = parseInt (peristiwa.data, 10); postMessage(fibonacci(n));};Halaman HTML: fibonacci.html
<!DOCTYPE HTML><html><head><meta http-equiv=Jenis Konten content=text/html; charset=utf-8/><title>fibonacci pekerja web</title><script type=text/javascript > onload =function(){ var pekerja =Pekerja baru('fibonacci.js'); pekerja.addEventListener('pesan', fungsi(acara) { var timer2 = (baru Date()).valueOf(); console.log( 'Hasil:'+event.data, 'Waktu:'+ timer2, 'Waktu yang dibutuhkan:'+ ( timer2 - timer ) }, var timer = ( Tanggal baru()).valueOf(); console.log('Mulai perhitungan: 40', 'Waktu:' + timer ); console.log('Fungsi pengatur waktu dijalankan saat menghitung urutan', 'Waktu:'+ (tanggal baru()).valueOf() },1000); Saya mengeksekusi ', 'time:'+ (new Date()).valueOf() } </script></head><body></body></html> saat menghitung urutanBuka fibonacci.html di Chrome, dan konsol mendapatkan output berikut:
Mulai menghitung: 40 Waktu: 1316508212705
Ketika saya menghitung urutannya, saya mengeksekusi waktunya: 1316508212734
Fungsi pengatur waktu dijalankan saat menghitung urutan: 1316508213735
Hasil: 102334155 Waktu: 1316508262820 Waktu yang berlalu: 50115
Contoh ini menunjukkan bahwa penghitungan deret fibonacci yang dilakukan di pekerja tidak memengaruhi eksekusi kode thread utama. Ini dihitung sepenuhnya di thread independennya sendiri, dan hasilnya hanya dikirim kembali ke thread utama setelah penghitungan selesai selesai.
Dengan menggunakan pekerja web, kita dapat melakukan beberapa operasi kompleks dan berskala besar di ujung depan tanpa mempengaruhi tampilan halaman, dan prompt sibuk skrip yang menjijikkan tidak akan muncul.
Contoh berikut menggunakan pekerja web untuk menghitung piksel dalam adegan. Saat adegan dibuka, adegan tersebut digambar satu per satu.
Tiga: Upaya lain yang dilakukan PekerjaKita sudah tahu bahwa Worker membuat pekerja dengan menerima URL, jadi bisakah kita menggunakan pekerja web untuk membuat beberapa permintaan yang mirip dengan jsonp? Seperti yang kita semua tahu, jsonp memuat data json dengan memasukkan tag skrip, dan elemen skrip memuat dan mengeksekusi The semua proses memblokir. Akan lebih bagus jika pekerja web dapat digunakan untuk mengimplementasikan pemuatan asinkron.
Contoh berikut akan memuat data JSON 169,42KB melalui tiga metode berbeda: pekerja web, jsonp, dan ajax.
// /aj/webWorker/core.jsfunction $E(id) { return document.getElementById(id);}onload =function() { //Muat melalui pekerja web $E('workerLoad').onclick =function() { var url ='http://js.wcdn.cn/aj/mblog/face2'; var d = (Tanggal baru()).valueOf(); Pekerja(url); pekerja.onmessage =function(obj) { console.log('pekerja web: '+ ((Tanggal baru()).valueOf() - d) }; E('jsonpLoad').onclick =function() { var url ='http://js.wcdn.cn/aj/mblog/face1'; var d = (baru Tanggal()).valueOf(); STK.core.io.scriptLoader({ metode:'post', url : url, onComplete : function() { console.log('jsonp: '+ ((Tanggal baru()) .valueOf() - d)); } } }; //Muat $E('ajaxLoad') melalui ajax.onclick =function() { var url ='http://js.wcdn.cn/aj/mblog/face'; var d = (Tanggal baru()).valueOf(); json) { console.log('ajax: '+ ((Tanggal baru()).valueOf() - d));Halaman HTML:/aj/webWorker/worker.html
<!DOCTYPE HTML><html><head><meta http-equiv=Content-Type content=text/html; charset=utf-8/><title>Contoh pekerja: memuat data</title><script src=http ://js.t.sinajs.cn/STK/js/gaea.1.14.js tipe=teks/javascript></script><skrip tipe=teks/javascript src=http://js.wcdn.cn/aj/webWorker/core.js></script></head><body> <input type=button id=workerLoad value=pekerja web memuat></input> < tipe input=tombol id=jsonpLoad value=jsonp load></input> <tipe input=button id=ajaxLoad value=ajax load></input></body></html>
Siapkan HOST
127.0.0.1 js.wcdn.cn
Akses halaman melalui http://js.wcdn.cn/aj/webWorker/worker.html lalu muat data dalam tiga cara untuk mendapatkan output konsol:
pekerja web: 174jsonp: 25ajax: 38
Setelah mencoba beberapa kali, saya menemukan bahwa perbedaan waktu antara memuat data melalui jsonp dan ajax tidak jauh berbeda, dan waktu pemuatan web pekerja selalu pada tingkat yang tinggi, sehingga menggunakan web pekerja untuk memuat data masih tergolong lambat, bahkan dalam kasus volume data yang besar, tidak ada keuntungannya, mungkin Pekerja memerlukan waktu untuk menginisialisasi thread baru. Tidak ada keuntungan selain tidak memblokir saat memuat.
Jadi bisakah pekerja web mendukung pemuatan js lintas domain? Kali ini kita mengakses halaman melalui http://127.0.0.1/aj/webWorker/worker.html. Saat mengklik tombol muat pekerja web, tidak ada yang tercermin di Chrome FF6 pesan kesalahan berikut muncul. Dari sini kita dapat mengetahui bahwa pekerja web tidak mendukung pemuatan JS lintas domain, yang merupakan berita buruk bagi situs web yang menyebarkan file statis ke server statis terpisah.
Oleh karena itu, pekerja web hanya dapat digunakan untuk memuat data json di domain yang sama, dan ajax sudah dapat melakukan ini, serta lebih efisien dan serbaguna. Biarkan Pekerja melakukan apa yang menjadi keahliannya.
Empat: RingkasanPekerja web tampak hebat, tetapi mereka jahat.
Apa yang bisa kita lakukan:
1. Anda dapat memuat JS untuk melakukan sejumlah besar perhitungan rumit tanpa menghentikan proses utama, dan berkomunikasi melalui postMessage, onmessage
2. Anda dapat memuat file skrip tambahan di pekerja melalui importScripts(url)
3. Anda dapat menggunakan setTimeout(), clearTimeout(), setInterval(), dan clearInterval()
4. Anda dapat menggunakan XMLHttpRequest untuk mengirim permintaan
5. Dapat mengakses beberapa properti navigator
Apa batasannya:
1.Tidak dapat memuat JS di seluruh domain
2. Kode di dalam pekerja tidak dapat mengakses DOM
3. Berbagai browser memiliki implementasi Pekerja yang berbeda. Misalnya, FF mengizinkan pembuatan pekerja baru di pekerja, tetapi Chrome tidak.
4. Tidak semua browser mendukung fitur baru ini
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.