Ați avut vreodată nevoie să rulați cod în browser care a durat atât de mult pentru a rula aplicația dvs. a rămas fără răspuns pentru o perioadă? Cu lucrătorii web HTML5, nu trebuie să mai experimentezi niciodată asta.

Lucrătorii web vă permit să separați codul de lungă durată și să îl rulați independent de alt cod care rulează pe pagină. Acest lucru vă menține interfața de utilizare receptivă, chiar și în timpul operațiunilor complexe.

Ce sunt lucrătorii web?

În mod tradițional, JavaScript este un limbaj cu un singur thread. Asta înseamnă că nimic altceva nu poate rula în timp ce o bucată de cod rulează. De exemplu, dacă aveți cod care încearcă să anime un element DOM, codul care încearcă să modifice o variabilă trebuie să aștepte ca animația să se termine înainte de a putea rula.

Lucrătorii web sunt fișiere JavaScript care se execută într-un fir separat, fără acces direct la DOM.

O modalitate de a vă gândi la lucrătorii web este că sunt bucăți de cod care durează mult timp pentru a rula, așa că le oferiți browserului pentru a le executa în fundal. Deoarece codul respectiv rulează acum în fundal, nu afectează JavaScript responsabil pentru pagina dvs. web.

instagram viewer

Ca efect secundar, nu mai poate interacționa direct cu restul codului, astfel încât lucrătorii web nu au acces la DOM. Cu toate acestea, multe alte API-uri de browser sunt încă disponibile, inclusiv API-urile WebSocket și Fetch.

Lucrătorii web nu sunt însă complet izolați de firul principal. Când un lucrător trebuie să comunice cu firul principal, acesta poate trimite un mesaj, iar firul principal poate trimite propriul mesaj ca răspuns.

De ce lucrătorii web?

Înainte de lucrătorii web, singura modalitate de a rula JavaScript care necesita mult timp în browser era:

  • Acceptați că pagina nu va mai răspunde pentru o perioadă.
  • Sparge codul ăla bucăți asincrone.

Deoarece o pagină care nu răspunde este de obicei o experiență proastă pentru utilizator, ați putea opta pentru opțiunea asincronă. Scrierea codului în acest fel înseamnă împărțirea lui în bucăți mai mici pe care browserul le poate rula în timp ce nu se ocupă de interfața cu utilizatorul. Piesele trebuie să fie suficient de mici încât, dacă interfața de utilizare trebuie actualizată, browserul să poată termina de executat piesa curentă și să se ocupe de interfața cu utilizatorul.

Lucrătorii web au fost adăugați la HTML5 pentru a oferi o soluție mai bună la această problemă. În loc să vă oblige să fiți creativ cu codul asincron, vă permit să separați în mod curat o funcție pentru a o rula în propriul thread izolat.

Acest lucru a făcut mai ușor pentru dezvoltatori să scrie un astfel de cod și a îmbunătățit, de asemenea, experiența utilizatorului.

Cazuri de utilizare pentru lucrătorii web

Orice aplicație care necesită mult calcul din partea clientului ar putea beneficia de lucrătorii web.

Să presupunem, de exemplu, că aplicația dvs. dorește să genereze un raport de utilizare și stochează toate datele despre client din motive de confidențialitate.

Pentru a genera acel raport, aplicația dvs. web trebuie să preia datele, să execute calcule pe ele, să organizeze rezultatele și să le prezinte utilizatorului.

Dacă ați încerca să faceți asta în firul principal, utilizatorul ar fi complet incapabil să folosească aplicația în timp ce aplicația a procesat datele. În schimb, puteți muta o parte sau tot codul respectiv într-un lucrător web. Acest lucru permite utilizatorului să continue să utilizeze aplicația în timp ce calculele sunt efectuate.

Cum să utilizați lucrătorii web în JavaScript

The Web Worker API definește modul de utilizare a lucrătorilor web. Utilizarea acestui API implică crearea unui obiect Worker cu constructorul Worker astfel:

let newWorker = Lucrător('lucrător.js');

The Muncitor constructorul acceptă numele unui fișier JavaScript ca parametru și rulează fișierul într-un fir nou. Returnează un obiect Worker pentru a permite firului principal să interacționeze cu firul de lucru.

Lucrătorii interacționează cu firul principal trimițând mesaje înainte și înapoi. Folosești postMessage funcție pentru a trimite evenimente între lucrător și firul principal. Folosește onmessage ascultător de evenimente pentru a asculta mesajele de la cealaltă parte.

Iată un exemplu de cod. În primul rând, un fir principal ar putea arăta astfel:

lăsa muncitor = nou Worker('worker.js')
worker.postMessage('Hei!')
lucrător.onmessage = funcţie(e) {
 console.log('Firul de lucru spune', e.date)
}

Acest fir principal creează un obiect worker din worker.js, apoi îi trimite un mesaj cu lucrător.postMessage. Apoi definește un ascultător de evenimente, similar ca concept cu a Ascultător de evenimente DOM. Un eveniment se va declanșa de fiecare dată când lucrătorul trimite un mesaj înapoi la firul principal, iar handlerul înregistrează mesajul lucrătorului în consolă.

Codul din interiorul lucrătorului (worker.js) are un singur loc de muncă:

onmessage = funcţie(e) {
lăsa mesaj = e.data;
 console.log('Firul principal a spus', mesaj);
 postMessage('Bună!')
}

Ascultă orice mesaj trimis din firul principal, înregistrează mesajul în consolă și trimite un mesaj de întoarcere înapoi la firul principal.

Mesajele din acest exemplu au fost toate șiruri de caractere, dar aceasta nu este o cerință: puteți trimite aproape orice tip de date ca mesaj.

Genul de muncitori pe care i-ați văzut până acum se numesc muncitori dedicați. Le puteți accesa doar din fișierul în care le-ați creat (acestea îi sunt dedicate). Lucrătorii partajați sunt opusul: pot primi mesaje de la și trimite mesaje către mai multe fișiere. Lucrătorii partajați sunt conceptual la fel cu lucrătorii dedicați, dar trebuie să îi utilizați puțin diferit.

Să ne uităm la un exemplu. În loc să folosească constructorul Worker, fiecare fișier care dorește să folosească un worker partajat trebuie să creeze un obiect worker folosind SharedWorker():

lăsa sharedWorker = nou SharedWorker('worker.js')

Totuși, diferențele nu se opresc aici. Pentru ca un fișier să trimită sau să primească un mesaj de la un lucrător partajat, trebuie să facă acest lucru accesând un port obiect, în loc să o facă direct. Iată cum arată:

sharedWorker.port.postMessage('Bună!')
sharedWorker.port.onMessage = funcţie(e) {
 console.log('Lucrătorul partajat a trimis', e.date);
}

Trebuie să utilizați și obiectul port în interiorul lucrătorului:

onconnect = funcţie(e) {
const port = e.ports[0];
port.onmessage = funcţie(e) {
 console.log('Mesaj primit', e.date)
 port.postMessage('Salut!');
 }
}

The onconnect ascultătorul se declanșează de fiecare dată când are loc o conexiune la un port (când un onmessage ascultătorul de evenimente este configurat în firul principal).

Când se întâmplă acest lucru, codul primește portul la care tocmai a fost conectat din evenimentul de conectare și îl stochează într-o variabilă. Apoi, codul înregistrează onmessage ascultător pe obiectul port. Codul înregistrează apoi mesajul în consolă și folosește portul pentru a trimite un mesaj înapoi la firul principal.

Lucrătorii web îmbunătățesc experiența utilizatorului

Lucrătorii web sunt fire JavaScript care vă permit să rulați bucăți de cod complexe și de lungă durată în fundal. Acest cod va evita blocarea interfeței cu utilizatorul. Utilizarea lucrătorilor web facilitează mult scrierea acestui tip de cod și îmbunătățește experiența utilizatorului aplicației. Puteți crea lucrători web și puteți interacționa cu aceștia, folosind API-ul pentru lucrători web.