Előfordult már, hogy kódot kellett futtatnia a böngészőben, amely olyan sokáig tartott, amíg az alkalmazás nem válaszol egy ideig? A HTML5 webmunkásaival ezt soha többé nem kell megtapasztalnia.

A webmunkások lehetővé teszik a régóta futó kód elkülönítését, és az oldalon futó egyéb kódoktól függetlenül történő futtatását. Ezáltal a felhasználói felület érzékeny marad, még összetett műveletek során is.

Mik azok a webmunkások?

A JavaScript hagyományosan egyszálú nyelv. Ez azt jelenti, hogy semmi más nem futhat, amíg egy kódrészlet fut. Például, ha kódja egy DOM-elemet próbál animálni, a változót módosítani próbáló kódnak meg kell várnia az animáció végét, mielőtt futhat.

A webmunkások olyan JavaScript-fájlok, amelyek külön szálban futnak le, és nincs közvetlen hozzáférésük a DOM-hoz.

A webmunkások egyik módja az, hogy olyan kóddarabokról van szó, amelyek futtatása sok időt vesz igénybe, ezért átadja őket a böngészőnek, hogy a háttérben végrehajtsák. Mivel ez a kód most a háttérben fut, nincs hatással a weboldaláért felelős JavaScript-re.

instagram viewer

Mellékhatásként már nem tud közvetlenül kapcsolatba lépni a kód többi részével, így a webes dolgozók nem férhetnek hozzá a DOM-hoz. Sok más böngésző API azonban továbbra is elérhető, beleértve a WebSocket és a Fetch API-kat.

A webmunkások azonban nincsenek teljesen elszigetelve a fő száltól. Amikor egy dolgozónak kommunikálnia kell a főszállal, üzenetet küldhet, a főszál pedig saját üzenetet küldhet válaszul.

Miért webmunkások?

A webmunkások előtt a JavaScript futtatásának egyetlen módja, amely sok időt igényelt a böngészőben, a következő volt:

  • Fogadja el, hogy az oldal egy ideig nem válaszol.
  • Törje be a kódot aszinkron darabok.

Mivel a nem reagáló oldal általában rossz felhasználói élményt jelent, választhatja az aszinkron opciót. A kód ilyen módon történő megírása azt jelenti, hogy kisebb részekre osztja azt a böngésző, amelyet akkor is futtathat, amikor nem kezeli a felhasználói felületet. A daraboknak elég kicsinek kell lenniük ahhoz, hogy ha a felhasználói felület frissítésre szorul, a böngésző befejezhesse az aktuális darab végrehajtását, és kezelhesse a felhasználói felületet.

A webmunkásokat hozzáadták a HTML5-höz, hogy jobb megoldást kínáljanak erre a problémára. Ahelyett, hogy kreatívnak kényszerítenék az aszinkron kódot, lehetővé teszik a függvények tisztán elkülönítését, hogy a saját elszigetelt szálában fussanak.

Ez megkönnyítette a fejlesztők számára az ilyen kódok megírását, és javította a felhasználói élményt is.

Használati esetek webmunkásoknak

Minden olyan alkalmazás, amely sok számítást igényel az ügyféloldalon, profitálhat a webes dolgozókból.

Tegyük fel például, hogy az alkalmazás használati jelentést szeretne létrehozni, és adatvédelmi aggályok miatt tárolja az ügyfél összes adatát.

A jelentés létrehozásához a webalkalmazásnak le kell kérnie az adatokat, számításokat kell futtatnia rajtuk, rendszereznie kell az eredményeket, és be kell mutatnia a felhasználónak.

Ha ezt a főszálban próbálná megtenni, a felhasználó teljesen képtelen lenne használni az alkalmazást, amíg az alkalmazás feldolgozta az adatokat. Ehelyett a kód egy részét vagy egészét áthelyezheti egy webmunkásba. Ez lehetővé teszi a felhasználó számára, hogy továbbra is használja az alkalmazást a számítások végrehajtása közben.

Web Workers használata JavaScriptben

Az Web Worker API meghatározza, hogyan kell használni a webmunkásokat. Ennek az API-nak a használata magában foglalja a Worker objektum létrehozását a Worker konstruktorral, így:

legyen newWorker = Dolgozó('dolgozó.js');

Az Munkás A konstruktor elfogadja a JavaScript fájl nevét paraméterként, és egy új szálban futtatja a fájlt. Egy Worker objektumot ad vissza, hogy lehetővé tegye a fő szálnak, hogy kölcsönhatásba lépjen a dolgozó szállal.

A dolgozók oda-vissza üzenetek küldésével lépnek kapcsolatba a főszállal. Használod a postMessage funkció események küldésére a dolgozó és a fő szál között. Használja a üzenetben eseményfigyelő, amellyel meghallgathatja a másik fél üzeneteit.

Itt van egy kódpélda. Először is, egy főszál így nézhet ki:

hagyja munkás = új Dolgozó('dolgozó.js')
worker.postMessage('Hé!')
dolgozó.onmessage = funkció(e) {
 console.log('Munkásszál azt mondja', e.data)
}

Ez a főszál létrehoz egy worker objektumot a worker.js fájlból, majd üzenetet küld neki a következővel dolgozó.postÜzenet. Ezután meghatároz egy eseményfigyelőt, amely hasonló a koncepcióhoz DOM eseményfigyelő. Egy esemény minden alkalommal aktiválódik, amikor a dolgozó üzenetet küld vissza a fő szálnak, és a kezelő naplózza a dolgozó üzenetét a konzolon.

A dolgozón belüli kód (worker.js) egy feladattal rendelkezik:

onmessage = funkció(e) {
hagyja üzenet = e.data;
 console.log('Fő szál mondta', üzenet);
 postMessage('Szia!')
}

Figyeli a fő szálról küldött üzeneteket, naplózza az üzenetet a konzolon, és visszaküldi a fő szálnak.

Ebben a példában az üzenetek mind karakterláncok voltak, de ez nem feltétel: szinte bármilyen típusú adatot elküldhet üzenetként.

Azokat a munkásokat, amelyeket eddig látott, elkötelezett munkásoknak hívják. Csak abból a fájlból érheti el őket, amelyben létrehozta őket (ezt szánják). A megosztott dolgozók ennek az ellenkezője: több fájlból is fogadhatnak és küldhetnek üzeneteket. A megosztott munkavállalók fogalmilag ugyanazok, mint az elkötelezett munkavállalók, de egy kicsit másképp kell őket használni.

Nézzünk egy példát. A Worker konstruktor használata helyett minden fájlnak, amely megosztott dolgozót szeretne használni, létre kell hoznia egy worker objektumot a SharedWorker():

hagyja shareWorker = új SharedWorker('worker.js')

A különbségek azonban nem állnak meg itt. Ahhoz, hogy egy fájl üzenetet küldhessen vagy fogadhasson egy megosztott dolgozótól, ezt az a kikötő tárgyat, ahelyett, hogy ezt közvetlenül tenné. Így néz ki:

sharedWorker.port.postMessage('Szia!')
shareWorker.port.onMessage = funkció(e) {
 console.log('A megosztott munkás küldött', e.data);
}

A port objektumot a dolgozón belül is használni kell:

onconnect = funkció(e) {
const port = e.ports[0];
port.onmessage = funkció(e) {
 console.log('Üzenet érkezett', e.data)
 port.postMessage('Szia!');
 }
}

Az onconnect a figyelő minden alkalommal aktiválódik, amikor egy porthoz csatlakozik (amikor egy üzenetben eseményfigyelő van beállítva a főszálban).

Amikor ez megtörténik, a kód megkapja azt a portot, amelyre éppen csatlakozott a csatlakozási eseményből, és egy változóban tárolja. Ezután a kód regisztrálja a üzenetben figyelő a port objektumon. A kód ezután naplózza az üzenetet a konzolon, és a portot használja az üzenet visszaküldésére a fő szálnak.

A webmunkások javítják a felhasználói élményt

A webmunkások olyan JavaScript-szálak, amelyek lehetővé teszik összetett és hosszú ideig futó kódrészletek futtatását a háttérben. Ez a kód elkerüli a felhasználói felület blokkolását. A webmunkások használata sokkal könnyebbé teszi az ilyen típusú kódok írását, és javítja az alkalmazás felhasználói élményét. A webmunkás API segítségével webmunkásokat hozhat létre, és interakcióba léphet velük.