În JavaScript, există mai multe abordări pentru a îmbunătăți interfața generală cu utilizatorul a site-ului. The „Lucrător web” este o astfel de abordare care permite firului principal să continue să se execute fără a fi blocat. Acesta cuprinde instanța sa separată a motorului JavaScript și, prin urmare, nu poate invoca funcționalitățile firului principal.
Acest articol va discuta despre modul de utilizare „Lucrător web” pentru multithreading în JavaScript.
Ce sunt lucrătorii web?
„Lucrători web” corespunde unui API de browser care permite JavaScript să ruleze sarcinile în paralel/în același timp pe un fir separat/dedicat.
Care este nevoia lucrătorilor web?
Deoarece JavaScript are un singur thread, prin urmare, codurile complexe JavaScript blochează firul UI, adică opresc fereastra principală care face față tuturor sarcinilor de reîmprospătare, implementare a evenimentelor de intrare de utilizator etc. Într-un astfel de scenariu, experiența utilizatorului este afectată . Pentru a face față acestei probleme, „Lucrător web” intră în vigoare și rezolvă blocarea firului UI.
Cum să utilizați lucrătorii web pentru multithreading cu JavaScript?
A face o „Lucrător web” , utilizați constructorul Worker. Este de așa natură încât ia ca argument o adresă URL, care corespunde căii fișierului script de lucru care implementează funcționalitatea dorită. Cu toate acestea, pentru a include codul de lucru într-un fișier HTML, utilizați a „blob” pentru a scrie codul lucrătorului.
Sintaxă (crearea unui lucrător web)
const X = nou Muncitor ( „worker.js” ) ;Sintaxă (trimiterea unui mesaj lucrătorului)
const X = nou Muncitor ( „worker.js” ) ;
Sintaxă (Primirea unui mesaj de la lucrător)
X. onmessage = funcţie ( eveniment ) {consolă. Buturuga ( eveniment. date ) ;
} ;
Exemplu: Utilizarea „Web Worker” pentru a calcula factorialul unui număr în JavaScript
Următorul exemplu folosește 'Muncitor()' constructor pentru a crea un lucrător web și a calcula factorialul unui număr:
< html >
< cap >
< stilul h2 = 'text-align: center;' > Exemplu de lucrători web h2 >
cap >
< corp >
< scenariu >
const X = nou Muncitor ( URL. createObjectURL ( nou Blob ( [
`
// Script de lucru
const fapt = ( n ) => {
dacă ( n == 0 || n == 1 ) {
întoarcere 1n ;
}
altfel {
întoarcere BigInt ( n ) * fapt ( BigInt ( n ) - 1n ) ;
}
} ;
de sine. onmessage = ( eveniment ) => {
const Cu = fapt ( eveniment. date ) ;
de sine. postMessage ( Cu. toString ( ) ) ;
} ; `
] , { tip : „text/javascript” } ) ) ) ;
X. postMessage ( 15n ) ;
X. onmessage = ( eveniment ) => {
const afară = eveniment. date ;
consolă. Buturuga ( „Factorial de 15 prin intermediul unui lucrător web-> „ , afară ) ;
} ;
corp >
html >
În acest cod, aplicați următorii pași:
- În primul rând, specificați titlul menționat.
- După aceea, creați un „Lucrător web” obiect având adresa URL a obiectului Blob care cuprinde codul pentru lucrător.
- Codul dedicat lucrătorului este inclus într-o funcție anonimă care calculează factorialul numărului printr-o funcție recursivă.
- De asemenea, lucrătorul ascultă mesajele trimise prin firul principal folosind „self.onmessage” eveniment, preia factorialul numărului trecut și dă rezultatul firului principal prin intermediul „postMessage()” metodă.
- În firul principal, creați o instanță de lucru și trimiteți-i un mesaj cu numărul „ 15n ”. Aici, ' n ” se referă la valoarea „BigInt”.
- După ce lucrătorul a terminat cu calculul factorial, acesta trimite rezultatul/rezultatul înapoi la firul principal utilizând „postMessage()” metodă.
- În cele din urmă, firul principal preia/primește rezultatul în „pe mesaj” eveniment și returnează factorialul corespunzător al numărului de pe consolă.
Ieșire
Avantajele lucrătorilor web
Procesare paralelă : În cazul rulării aceluiași cod în mod paralel.
Fără întrerupere în executarea codului: Execuția codului se face indiferent de reîmprospătările etc. de pe pagina curentă.
Urmărirea mișcării: Toată detectarea mișcării are loc în lucrătorul de fundal.
Multithreading activat: Acestea permit multithreading în JavaScript.
Performanță îmbunătățită: Optimizați performanța realizând sarcini intense/provocatoare în fire separate.
Experiență eficientă a utilizatorului: Acestea evită blocarea firului principal, rezultând o experiență de utilizator receptivă.
Limitările lucrătorilor web
Cu toate acestea, există și unele limitări ale lucrătorilor web. Acestea sunt precizate, după cum urmează:
- Utilizare mai mare a memoriei.
- Nu se poate actualiza DOM într-un fir de lucru sau invoca obiectul fereastră.
Concluzie
„Lucrători web” corespunde unui API de browser care permite JavaScript să ruleze sarcinile în același timp pe un fir separat/dedicat. Acestea pot fi utilizate luând ca argument o adresă URL, care corespunde căii fișierului script de lucru. Acest blog a discutat despre utilizarea „Web Workers” pentru multithreading în JavaScript.