Kas olete kunagi pidanud käivitama brauseris koodi, mis võttis teie rakenduse käivitamiseks nii kaua aega ja ei reageeri mõneks ajaks? HTML5 veebitöötajatega ei pea te seda enam kunagi kogema.

Veebitöötajad võimaldavad eraldada kauakestva koodi ja käivitada seda sõltumatult muust lehel töötavast koodist. See hoiab teie kasutajaliidese tundlikuna isegi keerukate toimingute ajal.

Mis on veebitöötajad?

Traditsiooniliselt on JavaScript ühe lõimega keel. See tähendab, et ühe koodiosa töötamise ajal ei saa midagi muud töötada. Näiteks kui teil on kood, mis üritab animeerida DOM-elementi, peab muutujat muutev kood ootama, kuni animatsioon lõpeb, enne kui seda saab käivitada.

Veebitöötajad on JavaScript-failid, mis käivitatakse eraldi lõimes, millel puudub otsene juurdepääs DOM-ile.

Üks võimalus veebitöötajatest mõelda on see, et need on kooditükid, mille käitamiseks kulub palju aega, nii et annate need brauserile taustal käivitamiseks. Kuna see kood töötab nüüd taustal, ei mõjuta see teie veebilehe eest vastutavat JavaScripti.

instagram viewer

Kõrvalmõjuna ei saa see enam teie ülejäänud koodiga otse suhelda, mistõttu veebitöötajatel puudub juurdepääs DOM-ile. Paljud teised brauseri API-d on siiski saadaval, sealhulgas WebSocket ja Fetch API-d.

Veebitöötajad pole siiski põhilõimest täielikult eraldatud. Kui töötajal on vaja põhilõimega suhelda, võib ta saata sõnumi ja põhilõim saab vastuseks saata oma sõnumi.

Miks veebitöötajad?

Enne veebitöötajaid oli brauseris palju aega nõudnud JavaScripti käitamiseks ainus viis:

  • Nõustuge sellega, et leht mõnda aega ei reageeri.
  • Murdke see kood sisse asünkroonsed tükid.

Kuna mittereageeriv leht on tavaliselt halb kasutajakogemus, võite valida asünkroonse valiku. Koodi kirjutamine sel viisil tähendab selle jagamist väiksemateks osadeks, mida brauser saab käitada ka siis, kui kasutajaliidest ei käsitle. Osad peavad olema piisavalt väikesed, et kui kasutajaliides vajab värskendamist, saaks brauser praeguse tüki täitmise lõpetada ja kasutajaliidest jälgida.

HTML5-sse lisati veebitöötajad, et pakkuda sellele probleemile paremat lahendust. Selle asemel, et sundida teid asünkroonse koodiga loominguliselt tegutsema, võimaldavad need funktsioonid puhtalt eraldada, et see toimiks oma eraldatud lõimes.

See muutis arendajatel sellise koodi kirjutamise lihtsamaks ja parandas ka kasutajakogemust.

Kasutusjuhtumid veebitöötajatele

Veebitöötajad võivad kasu saada mis tahes rakendusest, mis nõuab kliendi poolel palju arvutusi.

Oletame näiteks, et teie rakendus soovib luua kasutusaruannet ja salvestab kõik kliendi andmed privaatsusprobleemide tõttu.

Selle aruande loomiseks peab teie veebirakendus andmed hankima, nende põhjal arvutusi tegema, tulemused korrastama ja kasutajale esitama.

Kui prooviksite seda teha põhilõimes, ei saaks kasutaja rakendust andmete töötlemise ajal täielikult kasutada. Selle asemel saate selle koodi osa või kogu selle veebitöötajasse teisaldada. See võimaldab kasutajal arvutuste tegemise ajal rakenduse kasutamist jätkata.

Kuidas JavaScriptis veebitöötajaid kasutada

The Web Worker API määratleb, kuidas veebitöötajaid kasutada. Selle API kasutamine hõlmab Worker objekti loomist Worker konstruktoriga järgmiselt:

las newWorker = Töötaja('töötaja.js');

The Tööline konstruktor aktsepteerib parameetrina JavaScripti faili nime ja käivitab faili uues lõimes. See tagastab töötaja objekti, et võimaldada põhilõimel töölõimega suhelda.

Töötajad suhtlevad põhilõimega, saates sõnumeid edasi-tagasi. Sa kasutad postisõnum funktsioon sündmuste saatmiseks töötaja ja põhilõime vahel. Kasuta sõnumis sündmuste kuulaja, et kuulata sõnumeid teiselt osapoolelt.

Siin on koodinäide. Esiteks võib põhilõim välja näha selline:

lase tööline = uus Töötaja('tööline.js')
worker.postMessage('Hei!')
töötaja.onmessage = funktsiooni(e) {
 console.log('Tööline niit ütleb', e.andmed)
}

See põhilõim loob failist worker.js töötaja objekti ja saadab seejärel sellele sõnumi koos worker.postMessage. Seejärel määratleb see sündmuste kuulaja, mis on kontseptsioonilt sarnane a-ga DOM-i sündmuste kuulaja. Sündmus käivitub iga kord, kui töötaja saadab sõnumi põhilõime tagasi ja töötleja logib töötaja sõnumi konsooli.

Töötaja sees oleval koodil (worker.js) on üks töö:

on sõnum = funktsiooni(e) {
lase sõnum = e.andmed;
 console.log('Peamine lõim ütles', sõnum);
 postMessage('Tere!')
}

See kuulab ära kõik põhilõimest saadetud sõnumid, logib sõnumi konsooli ja saadab tagasiteate põhilõimele.

Selle näite sõnumid on kõik olnud stringid, kuid see pole nõue: saate sõnumina saata peaaegu igat tüüpi andmeid.

Selliseid töötajaid, keda olete seni näinud, nimetatakse pühendunud töötajateks. Saate neile juurde pääseda ainult failist, milles need lõite (nad on sellele pühendatud). Jagatud töötajad on vastupidised: nad saavad sõnumeid vastu võtta ja sõnumeid saata mitmest failist. Jagatud töötajad on põhimõtteliselt samad, mis pühendunud töötajad, kuid neid tuleb kasutada veidi erinevalt.

Vaatame näidet. Töötaja konstruktori kasutamise asemel peab iga fail, mis soovib kasutada jagatud töötajat, looma töötaja objekti, kasutades SharedWorker():

lase jagatudTööline = uus SharedWorker('worker.js')

Kuid erinevused ei lõpe sellega. Et fail saaks jagatud töötajalt sõnumit saata või vastu võtta, peab see seda tegema, pääsedes juurde a sadamasse objekti, selle asemel, et seda otse teha. See näeb välja järgmine:

sharedWorker.port.postMessage('Tere!')
sharedWorker.port.onMessage = funktsiooni(e) {
 console.log('Ühistööline saatis', e.andmed);
}

Peate kasutama ka töötaja sees olevat pordiobjekti:

ühendamisel = funktsiooni(e) {
konst port = e.ports[0];
port.onmessage = funktsiooni(e) {
 console.log('Sõnum vastu võetud', e.andmed)
 port.postMessage('Tere!');
 }
}

The ühendamisel kuulaja käivitub iga kord, kui tekib ühendus pordiga (kui an sõnumis sündmuste kuulaja on põhilõime seadistatud).

Kui see juhtub, hangib kood pordi, millega just ühendati, ja salvestab selle muutujasse. Järgmisena registreerib kood sõnumis kuulaja sadamaobjektil. Seejärel logib kood sõnumi konsooli ja kasutab porti sõnumi põhilõime tagasi saatmiseks.

Veebitöötajad parandavad kasutajakogemust

Veebitöötajad on JavaScripti lõimed, mis võimaldavad teil taustal käivitada keerulisi ja pikaajalisi koodilõike. See kood väldib seejärel kasutajaliidese blokeerimist. Veebitöötajate kasutamine muudab sellise koodi kirjutamise palju lihtsamaks ja parandab rakenduse kasutaja kasutuskogemust. Saate luua veebitöötajaid ja nendega suhelda, kasutades veebitöötaja API-t.