Com utilitzar els treballadors web per a multithreading en JavaScript?

Com Utilitzar Els Treballadors Web Per A Multithreading En Javascript



A JavaScript, hi ha diversos enfocaments per millorar la interfície d'usuari general del lloc. El 'Treballador web' és un d'aquests enfocaments que permet que el fil principal segueixi executant-se sense ser bloquejat. Comprèn la seva instància separada del motor de JavaScript i, per tant, no pot invocar les funcionalitats del fil principal.

Aquest article tractarà com utilitzar-lo 'Treballador web' per multithreading en JavaScript.







Què són els treballadors web?

“Treballadors web” correspon a una API del navegador que permet a JavaScript executar les tasques en paral·lel/al mateix temps en un fil separat/dedicat.



Quina és la necessitat dels treballadors web?

Com que JavaScript és d'un sol fil, per tant, els codis complexos de JavaScript bloquegen el fil de la interfície d'usuari, és a dir, aturan la finestra principal que s'encarrega de totes les tasques d'actualització, implementació d'esdeveniments d'entrada de l'usuari, etc. En aquest escenari, l'experiència de l'usuari es veu afectada . Per fer front a aquest problema, el 'Treballador web' entra en vigor i resol el bloqueig del fil de la IU.



Com utilitzar els treballadors web per multithreading amb JavaScript?

Per fer a 'Treballador web' , utilitzeu el constructor Worker. És tal que pren una URL com a argument, que correspon a la ruta del fitxer d'script de treball que implementa la funcionalitat desitjada. Tanmateix, per incloure el codi del treballador en un fitxer HTML, utilitzeu a 'boca' per escriure codi de treballador.





Sintaxi (creació d'un treballador web)

const x = nou Treballador ( 'worker.js' ) ;

Sintaxi (Enviament d'un missatge al treballador)



const x = nou Treballador ( 'worker.js' ) ;

Sintaxi (rebre un missatge del treballador)

x. al missatge = funció ( esdeveniment ) {
consola. registre ( esdeveniment. dades ) ;
} ;

Exemple: Ús de 'Web Worker' per calcular el factorial d'un nombre en JavaScript
L'exemple següent utilitza el 'Treballador()' constructor per crear un treballador web i calcular el factorial d'un nombre:

DOCTYPE html >
< html >
< cap >
< estil h2 = 'text-align: center;' > Exemple de treballadors web h2 >
cap >
< cos >
< guió >
const x = nou Treballador ( URL. createObjectURL ( nou Blob ( [
`
// Script de treball
const fet = ( n ) => {
si ( n == 0 || n == 1 ) {
tornar 1n ;
}
altra cosa {
tornar BigInt ( n ) * fet ( BigInt ( n ) - 1n ) ;
}
} ;
jo mateix. al missatge = ( esdeveniment ) => {
const Amb = fet ( esdeveniment. dades ) ;
jo mateix. postMissatge ( Amb. toString ( ) ) ;
} ; `
] , { tipus : 'text/javascript' } ) ) ) ;
x. postMissatge ( 15n ) ;
x. al missatge = ( esdeveniment ) => {
const fora = esdeveniment. dades ;
consola. registre ( 'Factorial de 15 a través d'un treballador web-> ' , fora ) ;
} ;

cos >

html >

En aquest codi, apliqueu els passos següents:

  • En primer lloc, especifiqueu l'encapçalament indicat.
  • Després d'això, creeu un 'Treballador web' objecte que té l'URL de l'objecte Blob que inclou el codi del treballador.
  • El codi dedicat al treballador s'inclou en una funció anònima que calcula el factorial del nombre mitjançant una funció recursiva.
  • A més, el treballador escolta els missatges enviats a través del fil principal utilitzant el 'self.onmessage' esdeveniment, recupera el factorial del nombre passat i dóna el resultat al fil principal mitjançant el 'postMessage()' mètode.
  • Al fil principal, creeu una instància de treball i envieu-li un missatge amb el número ' 15n ”. Aquí, ' n ” fa referència al valor “BigInt”.
  • Després que el treballador hagi acabat de calcular el factorial, envia el resultat/resultat de nou al fil principal utilitzant el 'postMessage()' mètode.
  • Finalment, el fil principal obté/reb el resultat al fitxer 'en missatge' esdeveniment i retorna el factorial corresponent del número a la consola.

Sortida

Avantatges dels treballadors web

Processament paral·lel : En el cas d'executar el mateix codi de manera paral·lela.

Sense interrupció en l'execució del codi: L'execució del codi es fa independentment de les actualitzacions, etc. a la pàgina actual.

Seguiment del moviment: Tota la detecció de moviment té lloc al treballador de fons.

Multithreading habilitat: Aquests permeten el multithreading en JavaScript.

Rendiment millorat: Optimitzeu el rendiment fent tasques intensives o desafiants en fils separats.

Experiència d'usuari efectiva: Aquests eviten bloquejar el fil principal, donant lloc a una experiència d'usuari sensible.

Limitacions dels treballadors web

Tanmateix, també hi ha algunes limitacions dels treballadors web. Aquestes s'especifiquen, de la següent manera:

  • Major aprofitament de la memòria.
  • No es pot actualitzar el DOM en un fil de treball ni invocar l'objecte finestra.

Conclusió

'Treballadors web' correspon a una API del navegador que permet que JavaScript executi les tasques alhora en un fil separat/dedicat. Es poden utilitzar prenent un URL com a argument, que correspon al camí del fitxer d'script del treballador. Aquest bloc va parlar de l'ús de 'Web Workers' per al multithreading en JavaScript.