Sa JavaScript, mayroong maraming mga diskarte upang mapahusay ang pangkalahatang interface ng gumagamit ng site. Ang “Web Worker” ay isang ganoong diskarte na nagbibigay-daan sa pangunahing thread na magpatuloy sa pagpapatupad nang hindi na-block. Binubuo nito ang hiwalay na halimbawa ng JavaScript engine, at samakatuwid ay hindi maaaring gamitin ang mga pag-andar ng pangunahing thread.
Tatalakayin ng artikulong ito kung paano gamitin “Web Worker” para sa multithreading sa JavaScript.
Ano ang mga Web Worker?
'Mga manggagawa sa web' tumutugma sa isang browser API na nagbibigay-daan sa JavaScript na patakbuhin ang mga gawain nang magkatulad/sabay sa isang hiwalay/nakatuon na thread.
Ano ang Pangangailangan para sa Mga Manggagawa sa Web?
Dahil single-threaded ang JavaScript, samakatuwid, hinaharangan ng mga kumplikadong JavaScript code ang thread ng UI ibig sabihin, ihinto ang pangunahing window na humaharap sa lahat ng mga gawain para sa pag-refresh, pagpapatupad ng mga kaganapan sa pag-input ng user, atbp. Sa ganitong sitwasyon, ang karanasan ng user ay apektado . Upang makayanan ang isyung ito, ang “Web Worker” magkakabisa at niresolba ang pagharang sa thread ng UI.
Paano Gamitin ang Mga Manggagawa sa Web para sa Multithreading Gamit ang JavaScript?
Para gumawa ng “Web Worker” , gamitin ang Worker constructor. Ito ay tulad na nangangailangan ito ng isang URL bilang argument nito, na tumutugma sa landas ng worker script file na nagpapatupad ng nais na functionality. Gayunpaman, upang mabuo ang worker code sa isang HTML file, gamitin ang a “patak” para magsulat ng worker code.
Syntax (Paglikha ng isang Web Worker)
const x = bago Manggagawa ( 'worker.js' ) ;Syntax(Pagpapadala ng Mensahe sa Manggagawa)
const x = bago Manggagawa ( 'worker.js' ) ;
Syntax(Pagtanggap ng Mensahe mula sa Manggagawa)
x. sa mensahe = function ( kaganapan ) {console. log ( kaganapan. datos ) ;
} ;
Halimbawa: Paggamit ng “Web Worker” para Kuwenta ang Factorial ng isang Numero sa JavaScript
Ang sumusunod na halimbawa ay gumagamit ng “Trabaho()” constructor upang lumikha ng isang web worker at kalkulahin ang factorial ng isang numero:
< html >
< ulo >
< estilo ng h2 = 'text-align: center;' > Halimbawa ng mga Manggagawa sa Web h2 >
ulo >
< katawan >
< script >
const x = bago Manggagawa ( URL. createObjectURL ( bago Blob ( [
`
// script ng manggagawa
const katotohanan = ( n ) => {
kung ( n == 0 || n == 1 ) {
bumalik 1n ;
}
iba pa {
bumalik BigInt ( n ) * katotohanan ( BigInt ( n ) - 1n ) ;
}
} ;
sarili. sa mensahe = ( kaganapan ) => {
const Sa = katotohanan ( kaganapan. datos ) ;
sarili. postMessage ( Sa. toString ( ) ) ;
} ; `
] , { uri : 'text/javascript' } ) ) ) ;
x. postMessage ( 15n ) ;
x. sa mensahe = ( kaganapan ) => {
const palabas = kaganapan. datos ;
console. log ( 'Factorial of 15 Via a Web Worker-> ' , palabas ) ;
} ;
katawan >
html >
Sa code na ito, ilapat ang mga sumusunod na hakbang:
- Una, tukuyin ang nakasaad na heading.
- Pagkatapos nito, lumikha ng isang “Web Worker” object na may URL ng Blob object na binubuo ng code para sa manggagawa.
- Ang code na nakatuon sa manggagawa ay kasama sa isang hindi kilalang function na kumukwenta sa factorial ng numero sa pamamagitan ng recursive function.
- Gayundin, nakikinig ang manggagawa para sa mga mensaheng ipinadala sa pamamagitan ng pangunahing thread na gumagamit ng “self.onmessage” event, kinukuha ang factorial ng naipasa na numero, at ibibigay ang kinalabasan sa pangunahing thread sa pamamagitan ng “postMessage()” paraan.
- Sa pangunahing thread, lumikha ng isang halimbawa ng manggagawa at ipadala ito ng isang mensahe na may numerong ' 15n ”. Dito,' n ” ay tumutukoy sa “BigInt” na halaga.
- Matapos ang manggagawa ay tapos na sa pag-compute ng factorial, ipapadala nito ang resulta/kinalabasan pabalik sa pangunahing thread gamit ang “postMessage()” paraan.
- Panghuli, kinukuha/natatanggap ng pangunahing thread ang kinalabasan sa 'onmessage' event at ibinabalik ang kaukulang factorial ng numero sa console.
Output
Mga Bentahe ng Mga Manggagawa sa Web
Magkakahiwalay na proseso : Sa kaso ng pagpapatakbo ng parehong code sa parallel na paraan.
Walang Pagkagambala sa Pagpapatupad ng Code: Ang pagpapatupad ng code ay ginagawa anuman ang mga pag-refresh atbp. sa kasalukuyang pahina.
Pagsubaybay sa Paggalaw: Ang lahat ng motion detection ay nagaganap sa background worker.
Pinagana ang Multithreading: Ang mga ito ay nagpapagana ng multithreading sa JavaScript.
Pinahusay na Pagganap: I-optimize ang pagganap sa pamamagitan ng paggawa ng masinsinang/mapaghamong mga gawain sa magkakahiwalay na mga thread.
Epektibong Karanasan ng Gumagamit: Iniiwasan ng mga ito ang pagharang sa pangunahing thread, na nagreresulta sa isang tumutugon na karanasan ng user.
Mga Limitasyon ng Mga Manggagawa sa Web
Gayunpaman, may ilang mga limitasyon din ang mga manggagawa sa web. Ang mga ito ay nakasaad, tulad ng sumusunod:
- Mas malawak na paggamit ng memorya.
- Hindi ma-update ang DOM sa isang worker thread o ma-invoke ang window object.
Konklusyon
'Mga Manggagawa sa Web' tumutugma sa isang browser API na nagbibigay-daan sa JavaScript na patakbuhin ang mga gawain sa parehong oras sa isang hiwalay/nakatuon na thread. Magagamit ang mga ito sa pamamagitan ng pagkuha ng URL bilang argument nito, na tumutugma sa path ng worker script file. Tinalakay ng blog na ito ang paggamit ng “Web Workers” para sa multithreading sa JavaScript.