Mik a webmunkások?

Ez a cikk az internetes alkalmazottak igénybevételéről és azok fontosságáról szól a HTML5.Java szkriptmotorban, amely egyetlen szálból épült fel, és nincs mögötte egyidejű folyamat (Nincs más folyamat végrehajtva, amíg az első folyamat be nem fejeződik). Mivel a javascript az előtérben fut, és időigényesvé teszi a weblapot. Ezért a nehéz dolgok elkerülése érdekében a HTML5 új technológiát dolgozott ki webes dolgozóknak. Ez egy kis háttérszkript, amely kiszámítja a költséges feladatokat anélkül, hogy beavatkozna a felhasználói felületbe vagy a weboldal teljesítményébe. Ez az izolált szál viszonylag könnyű, és az összes böngészőben támogatott. Ez teszi a HTML-t további szálak elindításához.

A webes dolgozók típusai a HTML5-ben

A webes dolgozókat "elkötelezett munkavállalóknak" is nevezik. Külön megosztott memória modellt kaptak. Más szavakkal mondhatjuk, hogy egy teljes javascript hatókör egyetlen szálon futott. Miközben egy böngészőben dolgozunk, néhány kifutópálya-párbeszéd-üzenetet találtunk az oldal nehéz feldolgozása miatt. Jó megoldásként a webböngésző HTML API-jának feladata a különböző számítások egyidejű szabályozása.

Az alábbiakban három fontos típusú webes dolgozót találunk:

1. Közös webmunkás

Ez a típus az API-t használja, és a munkavállalók minden egyes egységének több kapcsolata van, miközben üzenetet küld (több szkript), feltéve, hogy minden kontextus azonos származású. Ennek a munkavállalónak a böngésző támogatása korlátozott. Ezeket megosztott munkavállaló () kivitelezővel hívják.

2. Dedikált webmunkás

A fájl létrehozása nagyon egyszerű, ha hív egy építőt a forrásútvonalával. Az üzenetátvitel során a post message () módszernek nevezett üzenetkommunikációt használják. Még az eseménykezelőket is használják, amikor hallgató hallgat. A kezelő onmessage () üzenet fogadására szolgál.

3. Szolgáltató

Ez a munkavállaló nem lép közvetlen kapcsolatba a weboldallal, és a háttérben fut. Ha szükséges, visszaállíthatják és proxyként működnek, több szállal érhetők el.

Hogyan lehet létrehozni egy webes munkavállalói fájlt?

Nem támogatnak bizonyos funkciókat, például ablakobjektumot, DOM-ot, a szülőobjektumot. Az összes funkció elvégzése egy másolat elküldésével történik.

1. lépés: Fájl importálás létrehozása Worker () konstruktor A fájl új objektummal jön létre, és a szkript így néz ki.

var worker = new Worker(sample.js);

2. lépés: Az üzenet létrehozása (). A létrehozott munkavállalói fájlok automatikusan meghívják a post message () metódust. A post message () metódusok az üzenetet továbbítják a fő szálhoz. Hasonlóképpen, üzenetet küldhetünk a fő szálról a munkavállalói szálra. Itt indul a munkás.

worker. postMessage();

3. lépés: Ezután dobja el az eseménykezelőt, hogy engedélyezze az üzenetet a webes munkatárstól.

worker. onmessage = function(event)

Mostantól láttuk, hogyan lehet üzeneteket küldeni és fogadni. Most lássuk, hogyan lehet a munkavállalót a folyamat közepén megszüntetni.

4. lépés: A folyamat leállítása.

worker.terminate()

5. lépés: A hibakezelési forgatókönyv megvalósításához a munkavállaló használja.

Worker.onerror();

A HTML5 webes dolgozók 9 legfontosabb szolgáltatása

  1. Az aszinkron protokollú webes dolgozók számítástechnikai feladatok elvégzésére voltak a legjobbak, és a Javascript professzionális tulajdonságainak számítottak.
  2. A webes alkalmazottak szigorú végrehajtási platformot fizetnek a mobil és asztali ablakokért, lehetővé téve a weboldal futtatását anélkül, hogy a böngészőkben felfüggesztették volna.
  3. A fő előnye az, hogy drága folyamatokat futtathatunk egyetlen egyedi szálon belül, amely nem szakítja meg a futó fő szálat.
  4. A webes dolgozók kicsi, fénysúlyú szálak külön-külön élnek, a felhasználói felület egymásba illesztve.
  5. A web-dolgozók kernel-orientált szálakként segít elérni a böngészők oldalának nagy teljesítményét.
  6. A webes alkalmazottak segítenek a párhuzamos programozás létrehozásában és többszálú műveleteket hajtanak végre.
  7. A webes alkalmazottak növelik a java JScript alkalmazás sebességét.
  8. A webes dolgozót ügyféloldali szkriptnek tekintik, és magasabb szintű játéktechnikában használják.
  9. A webes dolgozó szálak kommunikálnak egymással a Post Message () visszahívási módszerrel.

Példák a HTML5 webes dolgozókra

A webes dolgozók többfeldolgozási tevékenységeik miatt hozzáférhetnek a navigátorhoz, az XMLHTTP kéréshez és a navigátorhoz. Az alábbi példa a dedikált munkavállalói típusokra összpontosít.

1. példa

Megmutatja a Munkavállalói minta fájlt, amely bemutatja a böngésző működését.

Kód:



Web Worker Demo

Validating the browser compatibility of Web Browsers

Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)



Web Worker Demo

Validating the browser compatibility of Web Browsers

Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)



Web Worker Demo

Validating the browser compatibility of Web Browsers

Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)

Kimenet:

2. példa

A következő példa bemutatja, hogy a munkavállalói feladatok az osztály használatával mire haladnak a feladat mögött, és hogyan számolják el a munkavállalói feladatokat. A munkavállalói feladatok automatikusan frissítik a weboldalt minden hurkon, amíg a hurok véget nem ér. A munkavállaló végrehajtásának leállításához itt használja a terminitate () -t.

A web munkatárs által a háttér mögött végzett munka:

Kód:

wrk.html




Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )

start worker terminate

start blocking thread

test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)

Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)


Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )

start worker terminate

start blocking thread

test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)

Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)


Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )

start worker terminate

start blocking thread

test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)

Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)

Kimenet:

Következtetés

Végül láthattuk, hogy a webes alkalmazottak hogyan működnek függetlenül attól a fő szálaktól, amely segít az internetes szervezeteknek igényes alkalmazások készítésében. És erősen ajánlott, hogy a webes alkalmazottakat javascript-ben használják nehéz feladatok elvégzésére. Javasoljuk, hogy ha a webböngészőt már nem használják, zárja be a rendszer erőforrásainak felhasználását.

Ajánlott cikk

Ez egy útmutató a HTML5 webes dolgozók számára. Itt tárgyaljuk a HTML5 Web Workers 9 legfontosabb tulajdonságát és annak példáit a kód implementációjával. Megnézheti a javasolt cikkeket is, ha többet szeretne megtudni -

  1. Html5 Új elemek | Legjobb 10
  2. HTML keretek a szintaxissal
  3. Bevezetés a HTML előnyeibe
  4. A 10 legnépszerűbb HTML5 interjú kérdés és válasz

Kategória:

Webfejlesztő eszközök