Vad är webbarbetare?
Den här artikeln handlar om att använda webbarbetare och deras betydelse i HTML5. Java-skriptmotor byggd upp med en enda tråd och det finns ingen samtidiga process bakom dem (Ingen annan process körs förrän den första processen är klar). När javascript körs i förgrunden och gör webbsidan tidskrävande. Därför har HTML5 kommit med en ny teknik som heter Webbarbetare för att undvika detta rejäl problem. Det är ett litet bakgrundsskript som gör beräkningar vid dyra uppgifter utan att ingripa i användargränssnittet eller prestandan på webbsidan. Denna isolerade tråd är relativt lätt och stöds i alla webbläsare. Detta gör HTML för att starta ytterligare trådar.
Typer av webbarbetare i HTML5
Webbarbetare benämns också ”dedikerade arbetare”. De fick en separat delad minnesmodell. Med andra ord kan vi säga att ett helt javascriptomfång råkade köras på en enda tråd. När vi arbetar i en webbläsare har vi stött på ett visningsområde för banan på grund av hård bearbetning av sidan. För att tillhandahålla en bra lösning Webbläsare HTML API har kommit fram till att styra olika beräkningar på samma gång.
Tre viktiga typer av webbarbetare anges nedan:
1. Delad webbarbetare
Denna typ använder API och varje arbetarenhet har flera anslutningar medan det skickas ett meddelande (flera skript) förutsatt att varje sammanhang är från samma ursprung. Webbläsarsupport för denna arbetare är begränsat. De kallas med delad arbetare () konstruktör.
2. Dedikerad webbarbetare
Att skapa en fil är mycket enkelt bara genom att ringa en konstruktör med källvägen. De använder sig av meddelandekommunikation som kallas post-meddelande () -metoden under meddelanden överföring. Även evenemangshanterarna används när någon lyssnare äger rum. Hanteraren onmessage () används för att ta emot ett meddelande.
3. Servicearbetare
Den här arbetaren interagerar inte direkt med webbsidan och körs i bakgrunden. De kan återställa när det behövs och fungerar som en proxy, de kan nås av flera trådar.
Hur skapar jag en fil för webbarbetare?
De har inte stöd för vissa funktioner som fönsterobjekt, DOM, överordnade objekt. Alla funktioner görs genom att skicka en kopia av dem.
Steg 1: Skapa en filimport Worker () -konstruktör En fil skapas med ett nytt objekt och skriptet ser ut.
var worker = new Worker(sample.js);
Steg 2: Skapa ett postmeddelande (). De skapade arbetarfilerna öppnar automatiskt postmeddelandet () -metoden. Metoderna efter inlägget () dirigerar meddelandet som skickas till huvudtråden. Och på liknande sätt kan vi skicka ett meddelande från huvudtråden till arbetartråden. Här börjar arbetaren.
worker. postMessage();
Steg 3: Nästa gång du kastar händelseshanteraren, tillåter meddelandet från webbarbetaren.
worker. onmessage = function(event)
Hittills har vi sett hur vi skickar och tar emot meddelanden. Låt oss nu se hur man säger upp arbetaren i mitten av processen.
Steg 4: Att stoppa processen.
worker.terminate()
Steg 5: Att implementera ett felhanteringsscenario som arbetstagaren använder.
Worker.onerror();
Topp 9 funktioner för HTML5 webbarbetare
- Webbarbetare var asynkrona protokoll, de passade bäst för att utföra beräkningsuppgifter och ansågs vara de professionella funktionerna i Javascript.
- Webbarbetare betalar en strikt exekveringsplattform för mobila och stationära fönster och låter köra webbsidan utan att frysa upp webbsidan i webbläsarna.
- Kärnfördelen är att vi kan köra dyra processer inom en enda enskild tråd som inte avbryter den löpande huvudtråden.
- Webbarbetare är små lättvikta trådar som lever individuellt sammanflätade användargränssnittet.
- Webbarbetare som är kärnorienterade trådar hjälper till att nå ut till webbläsarsidans höga prestanda.
- Webbarbetare hjälper till med att skapa parallell programmering och utför multithreading-åtgärder.
- Webbarbetare förbättrar hastigheten för java JScript-applikation.
- Webbarbetare anses vara ett klient-skript och används högre i spelapplikationer.
- Webbarbetartrådar kommunicerar med varandra med hjälp av uppringningsmetoden efter meddelande ().
Exempel på HTML5 webbarbetare
Webbarbetare har tillgång till navigatören, XMLHTTP Request, Navigator på grund av deras multibearbetningsaktiviteter. Exemplet nedan fokuserar på dedikerade arbetartyper att demonstrera.
Exempel 1
Visar Exempelarbetarfil Visar hur webbläsaren fungerar.
Koda:
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";)
)
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";)
)
Produktion:
Exempel 2
Följande exempel visar hur arbetaruppgifterna körs bakom uppgiften med klass och räkningen görs för arbetaruppgifterna. Arbetaruppgifterna uppdaterar automatiskt webbsidan i varje slinga tills slingan är slut. För att avsluta arbetarens avrättning används terminering () här.
Jobbet som görs bakom bakgrunden av webbarbetaren:
Koda:
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++;
)
Produktion:
Slutsats
Till slutet har vi sett hur webbarbetare arbetar oberoende av huvudtråden som hjälper webborganisationerna att göra krävande appar. Och det rekommenderas starkt att använda webbarbetare i javascript för tunga uppgifter. Det föreslås att när webbläsaren inte längre är i användning bör stängas för att konsumera systemresurserna.
Rekommenderad artikel
Detta är en guide till HTML5 webbarbetare. Här diskuterar vi de 9 bästa funktionerna i HTML5 Web Workers och dess exempel med kodimplementering. Du kan också gå igenom våra föreslagna artiklar för att lära dig mer -
- Html5 Nya element | Topp 10
- HTML-ramar med syntax
- Introduktion till fördelarna med HTML
- Topp 10 intervjufrågor och svar på HTML5