Dalam JavaScript, terdapat pelbagai pendekatan untuk meningkatkan antara muka pengguna keseluruhan tapak. The “Pekerja Web” ialah satu pendekatan sedemikian yang membolehkan utas utama terus dilaksanakan tanpa disekat. Ia terdiri daripada contoh enjin JavaScriptnya yang berasingan, dan oleh itu tidak boleh menggunakan fungsi utas utama.
Artikel ini akan membincangkan cara menggunakan “Pekerja Web” untuk multithreading dalam JavaScript.
Apakah Pekerja Web?
“Pekerja web” sepadan dengan API penyemak imbas yang membolehkan JavaScript menjalankan tugas secara selari/pada masa yang sama pada urutan yang berasingan/dedikasi.
Apakah Keperluan untuk Pekerja Web?
Oleh kerana JavaScript adalah satu benang, oleh itu, kod JavaScript kompleks menyekat urutan UI iaitu, hentikan tetingkap utama yang menangani semua tugas untuk menyegarkan semula, melaksanakan peristiwa input pengguna, dsb. Dalam senario sedemikian, pengalaman pengguna terjejas . Bagi menangani isu ini, pihak “Pekerja Web” berkuat kuasa dan menyelesaikan penyekatan urutan UI.
Bagaimana Menggunakan Pekerja Web untuk Multithreading Dengan JavaScript?
Untuk membuat a “Pekerja Web” , gunakan pembina Pekerja. Oleh itu ia mengambil URL sebagai hujahnya, yang sepadan dengan laluan fail skrip pekerja yang melaksanakan fungsi yang diingini. Walau bagaimanapun, untuk membentuk kod pekerja dalam fail HTML, gunakan a “gumpalan” untuk menulis kod pekerja.
Sintaks (Membuat Pekerja Web)
const x = baru Pekerja ( 'worker.js' ) ;Sintaks (Menghantar Mesej kepada Pekerja)
const x = baru Pekerja ( 'worker.js' ) ;
Sintaks (Menerima Mesej daripada Pekerja)
x. onmessage = fungsi ( peristiwa ) {konsol. log ( peristiwa. data ) ;
} ;
Contoh: Penggunaan 'Pekerja Web' untuk Mengira Faktorial Nombor dalam JavaScript
Contoh berikut menggunakan “Pekerja()” pembina untuk mencipta pekerja web dan mengira faktorial nombor:
< html >
< kepala >
< gaya h2 = 'text-align: center;' > Contoh Pekerja Web h2 >
kepala >
< badan >
< skrip >
const x = baru Pekerja ( URL. createObjectURL ( baru Gumpalan ( [
`
// Skrip pekerja
const fakta = ( n ) => {
jika ( n == 0 || n == 1 ) {
kembali 1n ;
}
lain {
kembali BigInt ( n ) * fakta ( BigInt ( n ) - 1n ) ;
}
} ;
diri sendiri. onmessage = ( peristiwa ) => {
const Dengan = fakta ( peristiwa. data ) ;
diri sendiri. postMessage ( Dengan. menjalin ( ) ) ;
} ; `
] , { menaip : 'teks/javascript' } ) ) ) ;
x. postMessage ( 15n ) ;
x. onmessage = ( peristiwa ) => {
const keluar = peristiwa. data ;
konsol. log ( 'Faktor 15 Melalui Pekerja Web-> ' , keluar ) ;
} ;
badan >
html >
Dalam kod ini, gunakan langkah berikut:
- Pertama, nyatakan tajuk yang dinyatakan.
- Selepas itu, buat a “Pekerja Web” objek yang mempunyai URL objek Blob yang terdiri daripada kod untuk pekerja.
- Kod yang dikhaskan untuk pekerja disertakan dalam fungsi tanpa nama yang mengira faktorial nombor melalui fungsi rekursif.
- Selain itu, pekerja mendengar mesej yang dihantar melalui utas utama menggunakan “self.onmessage” acara, mendapatkan semula faktorial nombor yang diluluskan, dan memberikan hasil kepada utas utama melalui “postMessage()” kaedah.
- Dalam urutan utama, buat contoh pekerja dan hantarkan mesej dengan nombor ' 15n ”. Di sini, ' n ” merujuk kepada nilai “BigInt”.
- Selepas pekerja selesai dengan mengira faktorial, ia menghantar hasil/hasil kembali ke utas utama menggunakan “postMessage()” kaedah.
- Akhir sekali, utas utama mengambil/menerima hasil dalam “onmessage” acara dan mengembalikan faktorial sepadan nombor pada konsol.
Pengeluaran
Kelebihan Pekerja Web
Pemprosesan Selari : Dalam kes menjalankan kod yang sama secara selari.
Tiada Gangguan dalam Pelaksanaan Kod: Pelaksanaan kod dilakukan tanpa mengira penyegaran dan lain-lain pada halaman semasa.
Penjejakan Pergerakan: Semua pengesanan gerakan berlaku dalam pekerja latar belakang.
Didayakan Multithreading: Ini membolehkan multithreading dalam JavaScript.
Prestasi Dipertingkat: Optimumkan prestasi dengan melakukan tugasan intensif/mencabar dalam urutan yang berasingan.
Pengalaman Pengguna Berkesan: Ini mengelakkan daripada menyekat urutan utama, menghasilkan pengalaman pengguna yang responsif.
Had Pekerja Web
Walau bagaimanapun, terdapat beberapa batasan pekerja web juga. Ini dinyatakan, seperti berikut:
- Penggunaan memori yang lebih besar.
- Tidak boleh mengemas kini DOM dalam urutan pekerja atau menggunakan objek tetingkap.
Kesimpulan
“Pekerja Web” sepadan dengan API penyemak imbas yang membolehkan JavaScript menjalankan tugas pada masa yang sama pada urutan yang berasingan/dedikasi. Ini boleh digunakan dengan mengambil URL sebagai hujahnya, yang sepadan dengan laluan fail skrip pekerja. Blog ini membincangkan penggunaan 'Pekerja Web' untuk multithreading dalam JavaScript.