Stalo sa vám niekedy, že ste potrebovali spustiť kód v prehliadači, ktorý tak dlho trval, kým vaša aplikácia na chvíľu prestala reagovať? S webovými pracovníkmi HTML5 to už nikdy nebudete musieť zažiť.

Weboví pracovníci vám umožňujú oddeliť dlho bežiaci kód a spustiť ho nezávisle od iného kódu spusteného na stránke. Vďaka tomu bude vaše používateľské rozhranie reagovať aj počas zložitých operácií.

Čo sú weboví pracovníci?

JavaScript je tradične jednovláknový jazyk. To znamená, že počas spustenia jednej časti kódu nemôže bežať nič iné. Napríklad, ak máte kód, ktorý sa pokúša animovať prvok DOM, kód, ktorý sa pokúša zmeniť premennú, musí pred spustením animácie počkať, kým sa neskončí.

Weboví pracovníci sú súbory JavaScript, ktoré sa spúšťajú v samostatnom vlákne bez priameho prístupu k DOM.

Jedným zo spôsobov, ako si predstaviť pracovníkov webu, je, že sú to časti kódu, ktorých spustenie trvá veľa času, takže ich dáte prehliadaču, aby ich spustil na pozadí. Keďže tento kód teraz beží na pozadí, neovplyvňuje JavaScript zodpovedný za vašu webovú stránku.

instagram viewer

Ako vedľajší efekt už nemôže priamo interagovať so zvyškom vášho kódu, takže weboví pracovníci nemajú prístup k DOM. Stále je však k dispozícii mnoho ďalších rozhraní API prehliadača, vrátane rozhraní WebSocket a Fetch API.

Weboví pracovníci však nie sú úplne izolovaní od hlavného vlákna. Keď pracovník potrebuje komunikovať s hlavným vláknom, môže odoslať správu a hlavné vlákno môže ako odpoveď poslať svoju vlastnú správu.

Prečo Web Workers?

Pred webovými pracovníkmi bol jediný spôsob, ako spustiť JavaScript, ktorý si vyžadoval veľa času v prehliadači, buď:

  • Akceptujte, že stránka bude chvíľu nereagovať.
  • Rozdeľte ten kód asynchrónne kúsky.

Keďže stránka, ktorá nereaguje, je zvyčajne zlá používateľská skúsenosť, môžete sa rozhodnúť pre asynchrónnu možnosť. Písať kód týmto spôsobom znamená rozdeliť ho na menšie časti, ktoré môže prehliadač spustiť, keď nespracúva používateľské rozhranie. Časti musia byť dostatočne malé, aby v prípade potreby aktualizácie používateľského rozhrania mohol prehliadač dokončiť spustenie aktuálnej časti a venovať sa používateľskému rozhraniu.

Weboví pracovníci boli pridaní do HTML5, aby ponúkli lepšie riešenie tohto problému. Namiesto toho, aby vás nútili k tvorivosti s asynchrónnym kódom, umožňujú vám čisto oddeliť funkciu, ktorá sa spustí vo vlastnom izolovanom vlákne.

Vývojárom to uľahčilo písanie takéhoto kódu a zlepšilo aj používateľskú skúsenosť.

Prípady použitia pre webových pracovníkov

Akákoľvek aplikácia, ktorá vyžaduje veľa výpočtov na strane klienta, by mohla ťažiť z webových pracovníkov.

Povedzme napríklad, že vaša aplikácia chce vygenerovať správu o používaní a ukladá všetky údaje o klientovi z dôvodu ochrany osobných údajov.

Ak chcete vygenerovať túto správu, vaša webová aplikácia musí získať údaje, spustiť na nich výpočty, usporiadať výsledky a prezentovať ich používateľovi.

Ak by ste sa o to pokúsili v hlavnom vlákne, používateľ by úplne nemohol používať aplikáciu, kým aplikácia spracovávala údaje. Namiesto toho môžete časť alebo celý tento kód presunúť do webového pracovníka. To umožňuje používateľovi pokračovať v používaní aplikácie počas vykonávania výpočtov.

Ako používať Web Workers v JavaScripte

The Web Worker API definuje, ako používať webových pracovníkov. Používanie tohto rozhrania API zahŕňa vytvorenie objektu Worker pomocou konštruktora Worker, ako je tento:

nech newWorker = Worker('worker.js');

The Pracovník konstruktor akceptuje názov súboru JavaScript ako svoj parameter a spustí súbor v novom vlákne. Vráti objekt Worker, ktorý umožní hlavnému vláknu interakciu s pracovným vláknom.

Pracovníci interagujú s hlavným vláknom posielaním správ tam a späť. Používate postSpráva funkcia na odosielanie udalostí medzi pracovníkom a hlavným vláknom. Použi onmessage poslucháč udalostí, aby si vypočul správy od druhej strany.

Tu je príklad kódu. Po prvé, hlavné vlákno môže vyzerať takto:

nech pracovník = Nový Worker('worker.js')
worker.postMessage('Ahoj!')
pracovník.onmessage = funkciu(e) {
 console.log('Pracovné vlákno hovorí', e.data)
}

Toto hlavné vlákno vytvorí pracovný objekt z worker.js a potom mu odošle správu s worker.postMessage. Potom definuje poslucháča udalostí, podobne ako a Prijímač udalostí DOM. Udalosť sa spustí vždy, keď pracovník odošle správu späť do hlavného vlákna a obsluha zaznamená správu pracovníka do konzoly.

Kód vo vnútri pracovníka (worker.js) má jednu úlohu:

správa = funkciu(e) {
nech správa = e.údaje;
 console.log('Hlavné vlákno povedal', správa);
 postMessage('Ahoj!')
}

Počúva všetky správy odoslané z hlavného vlákna, zaznamená správu do konzoly a odošle spätnú správu späť do hlavného vlákna.

Všetky správy v tomto príklade boli reťazce, ale to nie je podmienkou: ako správu môžete odoslať takmer akýkoľvek typ údajov.

Pracovníci, ktorých ste doteraz videli, sa nazývajú oddaní pracovníci. Môžete k nim pristupovať iba zo súboru, v ktorom ste ich vytvorili (sú na to vyhradené). Zdieľaní pracovníci sú opakom: môžu prijímať správy z viacerých súborov a odosielať správy do viacerých súborov. Zdieľaní pracovníci sú koncepčne rovnakí ako vyhradení pracovníci, ale musíte ich použiť trochu inak.

Pozrime sa na príklad. Namiesto použitia konštruktora Worker musí každý súbor, ktorý chce použiť zdieľaného pracovníka, vytvoriť objekt typu Worker pomocou SharedWorker():

nech sharedWorker = Nový SharedWorker('worker.js')

Rozdiely tu však nekončia. Aby súbor mohol odoslať alebo prijať správu od zdieľaného pracovníka, musí to urobiť prístupom k a prístav namiesto toho, aby tak urobili priamo. Takto to vyzerá:

sharedWorker.port.postMessage('Ahoj!')
sharedWorker.port.onMessage = funkciu(e) {
 console.log('Zdieľaný pracovník odoslal', e.data);
}

Objekt portu musíte použiť aj vo vnútri pracovníka:

onconnect = funkciu(e) {
konšt port = e.ports[0];
port.onmessage = funkciu(e) {
 console.log('Správa bola prijatá', e.data)
 port.postMessage('Ahoj!');
 }
}

The onconnect poslucháč sa spustí vždy, keď dôjde k pripojeniu k portu (keď onmessage poslucháč udalostí je nastavený v hlavnom vlákne).

Keď sa to stane, kód získa port, ku ktorému bol práve pripojený, z udalosti pripojenia a uloží ho do premennej. Ďalej kód zaregistruje onmessage poslucháča na objekte portu. Kód potom zaznamená správu do konzoly a použije port na odoslanie správy späť do hlavného vlákna.

Web Workers zlepšujú používateľskú skúsenosť

Weboví pracovníci sú vlákna JavaScriptu, ktoré vám umožňujú spúšťať zložité a dlhotrvajúce časti kódu na pozadí. Tento kód potom zabráni blokovaniu používateľského rozhrania. Používanie webových pracovníkov výrazne zjednodušuje písanie tohto druhu kódu a zlepšuje zážitok používateľa z aplikácie. Pomocou rozhrania API webového pracovníka môžete vytvárať webových pracovníkov a komunikovať s nimi.