Hvad er webarbejdere?

Denne artikel handler om at gøre brug af webmedarbejdere og deres betydning i HTML5. Java-script-motor opbygget med en enkelt tråd, og der er ingen samtidig proces bag dem (Ingen anden proces udføres, før den første proces er færdig). Idet javascript kører i forgrunden og gør websiden tidskrævende. Derfor, for at undgå dette heftige problem, er HTML5 kommet med en ny teknologi ved navn Web-arbejdere. Det er et lille baggrundsskript, der udregner ved dyre opgaver uden at gribe ind i brugergrænsefladen eller ydelsen på websiden. Denne isolerede tråd er relativt let og understøttes i alle webbrowsere. Dette gør HTML til at starte yderligere tråde.

Typer af webarbejdere i HTML5

Webarbejdere betegnes også som ”dedikerede arbejdere”. De fik en separat delt hukommelsesmodel. Med andre ord kan vi sige, at et helt javascriptomfang tilfældigt blev kørt på en enkelt tråd. Mens vi arbejder i en webbrowser, har vi stødt på en vis meddelelse om landingsbane på grund af tung behandling af siden. For at give en god løsning Webbrowser HTML API er kommet med afgørende forskellige beregninger på samme tid.

Tre vigtige typer webarbejdere er beskrevet nedenfor:

1. Delt webarbejder

Denne type bruger API og hver arbejdende enhed har flere forbindelser, mens der sendes en meddelelse (flere scripts), forudsat at hver kontekst er fra samme oprindelse. Browserstøtte til denne arbejdstager er begrænset. De kaldes ved hjælp af delt arbejdstager () konstruktør.

2. Dedikeret webarbejder

Oprettelse af en fil er meget simpelt bare ved at kalde en konstruktør med sin kildesti. De gør brug af meddelelseskommunikation kaldet post-meddelelse () -metoden under meddelelsesoverførsel. Selv begivenhedshåndterere bruges, når en eller anden lytter finder sted. Handlerens onmessage () bruges til at modtage en meddelelse.

3. Servicearbejder

Denne arbejdstager interagerer ikke direkte med websiden og kører i baggrunden. De kan gendannes, når det kræves, og fungerer som en proxy, de kan fås ved hjælp af flere tråde.

Sådan opretter du en fil til webarbejdere?

De har ikke støtte til nogle funktioner som vindueobjekt, DOM, overordnet objekt. Alle funktioner udføres ved at videregive en kopi af dem.

Trin 1: Sådan opretter du en filimport Worker () -konstruktør En fil oprettes ved hjælp af et nyt objekt, og scriptet ser ud.

var worker = new Worker(sample.js);

Trin 2: Oprettelse af postmeddelelse (). De oprettede arbejdsfiler åbner automatisk postmeddelelsesmetoden (). Metoderne for postbesked () dirigerer beskeden, der sendes til hovedtråden. Og på lignende måde kan vi sende en meddelelse fra hovedtråden til arbejdertråden. Her starter arbejderen.

worker. postMessage();

Trin 3: Næste for at kaste begivenhedshåndtereren for at tillade beskeden fra webarbejderen.

worker. onmessage = function(event)

Herefter har vi set, hvordan vi sender og modtager meddelelser. Lad os nu se, hvordan man afslutter arbejdstageren midt i processen.

Trin 4: For at stoppe processen.

worker.terminate()

Trin 5: At implementere en fejlhåndteringsscenarie, som arbejder bruger.

Worker.onerror();

Top 9 funktioner hos HTML5 Web Workers

  1. Webarbejdere er asynkron protokol, de var bedst egnede til at udføre beregningsopgaver og betragtes som de professionelle træk ved Javascript.
  2. Webmedarbejdere betaler en streng eksekveringsplatform for mobile og desktopvinduer, så de kan køre websiden uden at fryse websiden i browserne.
  3. Kernefordelen er, at vi kan køre dyre processer inden for en enkelt individuel tråd, der ikke afbryder den kørende hovedtråd.
  4. Webarbejdere er små letvægtede tråde, der lever individuelt sammenflettet brugergrænsefladen.
  5. Webarbejdere, der er kerneorienterede tråde, hjælper med at nå ud til den høje ydelse på browsersiden.
  6. Web-medarbejdere hjælper med at skabe parallel programmering og udfører multithreading-handlinger.
  7. Webarbejdere forbedrer hastigheden til java JScript-applikation.
  8. Webarbejder betragtes som et script på klientsiden og bruges højere i spilapplikation.
  9. Webarbejder-tråde kommunikerer med hinanden ved hjælp af opkaldsmetoden efter meddelelse ().

Eksempler på HTML5-webarbejdere

Webarbejdere har adgang til navigatoren, XMLHTTP-anmodning, Navigator på grund af deres flerbehandlingsaktiviteter. Nedenstående eksempel fokuserer på dedikerede arbejdstagertyper at demonstrere.

Eksempel 1

Viser eksempler på arbejdstagerfil Viser funktionen af ​​browseren.

Kode:



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:

Eksempel 2

Følgende eksempel viser, hvordan arbejderopgaverne kører bag opgaven ved hjælp af klasse, og tællingen udføres for arbejderopgaverne. Arbejderopgaverne opdaterer automatisk websiden på hver løkke, indtil løkken slutter. For at afslutte arbejderens henrettelse bruges terminering () her.

Jobbet udført på baggrund af webmedarbejderen:

Kode:

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:

Konklusion

Til sidst har vi set, hvordan webansatte arbejder uafhængigt af hovedtråden, der hjælper weborganisationerne med at lave krævende apps. Og det anbefales kraftigt at bruge webmedarbejdere i javascript til tunge opgaver. Det foreslås, at når webbrowseren ikke længere er i brug, skal lukkes for at forbruge systemressourcerne.

Anbefalet artikel

Dette er en guide til HTML5 Web Workers. Her diskuterer vi de top 9 funktioner i HTML5 Web Workers og dens eksempler med kodeimplementering. Du kan også gennemgå vores foreslåede artikler for at lære mere -

  1. Html5 Nye elementer | Top 10
  2. HTML-rammer med syntaks
  3. Introduktion til fordelene ved HTML
  4. Top 10 HTML5-interviewspørgsmål og svar

Kategori:

Webudviklingsværktøjer