Hva er nettarbeidere?
Denne artikkelen handler om å gjøre bruk av nettarbeidere og deres betydning i HTML5. Java-skriptmotor bygget opp med en enkelt tråd, og det er ingen prosess bak dem (ingen annen prosess blir utført før den første prosessen er ferdig). Ettersom javascript kjører i forgrunnen og gjør websiden tidkrevende. Derfor, for å unngå dette heftige problemet, har HTML5 kommet med en ny teknologi som heter Webarbeidere. Det er et lite bakgrunnsskript som gjør beregning på dyre oppgaver uten å blande seg inn i brukergrensesnittet eller ytelsen til websiden. Denne isolerte tråden er relativt lett og støttes i alle nettlesere. Dette gjør HTML for å starte opp flere tråder.
Typer nettarbeidere i HTML5
Nettarbeidere betegnes også som ”dedikerte arbeidere”. De fikk en egen delt minnemodell. Med andre ord kan vi si at et helt javascriptomfang tilfeldigvis ble kjørt på en enkelt tråd. Mens vi jobbet i en nettleser har vi møtt en viss dialogboks for rullebane på grunn av tung behandling av siden. For å gi en god løsning Nettleser HTML API har kommet frem til å bestemme forskjellige beregninger på samme tid.
Tre viktige typer nettarbeidere er gitt nedenfor:
1. Delt nettarbeider
Denne typen bruker API og hver enhet av arbeider har flere tilkoblinger mens du sender en melding (flere skript) forutsatt at hver kontekst er fra samme opprinnelse. Nettleserstøtte for denne arbeideren er begrenset. De kalles ved hjelp av delt arbeider () konstruktør.
2. Dedikert nettarbeider
Å opprette en fil er veldig enkelt bare ved å ringe en konstruktør med kildebanen. De benytter seg av meldingskommunikasjon kalt post message () -metode under meldingoverføring. Til og med arrangementshåndterere brukes når noen lytter finner sted. Behandleren onmessage () brukes til å motta en melding.
3. Servicearbeider
Denne arbeideren samhandler ikke direkte med websiden og kjører i bakgrunnen. De kan gjenopprette når det er nødvendig og fungerer som en proxy, de kan nås av flere tråder.
Hvordan lage en Web Workers-fil?
De har ikke støtte til noen funksjoner som vinduobjekt, DOM, overordnet objekt. Alle funksjonene gjøres ved å sende en kopi av dem.
Trinn 1: Slik oppretter du en filimport Worker () -konstruktør En fil opprettes ved hjelp av et nytt objekt, og skriptet ser ut.
var worker = new Worker(sample.js);
Trinn 2: Opprettelse av postmelding (). De opprettede arbeiderfilene henter automatisk inn meldingsmetoden (). Metodene for postmelding () dirigerer meldingen som går til hovedtråden. Og på samme måte kan vi sende en melding fra hovedtråden til arbeidertråden. Her starter arbeideren.
worker. postMessage();
Trinn 3: For å kaste hendelsesbehandleren, for å tillate meldingen fra nettarbeideren.
worker. onmessage = function(event)
Nå har vi sett hvordan vi kan sende og motta meldinger. La oss se hvordan vi kan si opp arbeidstakeren midt i prosessen.
Trinn 4: For å stoppe prosessen.
worker.terminate()
Trinn 5: Å implementere et feilhåndteringsscenario arbeidstaker bruker.
Worker.onerror();
Topp 9 funksjoner hos HTML5 Web Workers
- Nettarbeidere var asynkron protokoll, og de var best egnet til å gjøre beregningsoppgaver og ble ansett som de profesjonelle egenskapene til Javascript.
- Webarbeidere betaler en streng utførelsesplattform for mobile og stasjonære vinduer, og lar dem kjøre websiden uten å fryse opp websiden i nettleserne.
- Kjernen fordelen er at vi kan kjøre dyre prosesser i en enkelt individuell tråd som ikke avbryter den løpende hovedtråden.
- Nettarbeidere er små lettvektede tråder som lever individuelt sammenfletting av brukergrensesnittet.
- Nettarbeidere som er kjerneorienterte tråder hjelper deg med å nå ut til den høye ytelsen til nettlesersiden.
- Nettarbeidere hjelper til med å lage parallell programmering og utfører multithreading-handlinger.
- Nettarbeidere forbedrer hastigheten for java JScript-applikasjonen.
- Nettarbeider anses å være et klientsideskript og brukes høyere i spillapplikasjoner.
- Nettarbeidertråder kommuniserer med hverandre ved hjelp av tilbakekallingsmetoden etter melding ().
Eksempler på HTML5 nettarbeidere
Webarbeidere har tilgang til navigatoren, XMLHTTP Request, Navigator på grunn av mangebehandlingsaktivitetene deres. Eksemplet nedenfor fokuserer på dedikerte arbeidstakertyper å demonstrere.
Eksempel 1
Viser eksempel på arbeidstakerfil Demonstrerer bruken av nettleseren.
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";)
)
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";)
)
Produksjon:
Eksempel 2
Følgende eksempel viser hvordan arbeideroppgavene kjører bak oppgaven ved bruk av klasse og tellingen gjøres for arbeideroppgavene. Arbeideroppgavene oppdaterer nettsiden automatisk på hver loop til løkken slutter. For å avslutte arbeiderens henrettelse, ble termin () brukt her.
Jobben som gjøres bak bakgrunn av nettarbeideren:
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++;
)
Produksjon:
Konklusjon
Til slutt har vi sett hvordan nettansatte jobber uavhengig av hovedtråden som hjelper nettorganisasjonene med å lage krevende apper. Og det anbefales på det sterkeste å bruke nettarbeidere i javascript for tunge oppgaver. Det foreslås at når nettleseren ikke lenger er i bruk, skal stenges for å konsumere systemressursene.
Anbefalt artikkel
Dette er en guide til HTML5 nettarbeidere. Her diskuterer vi de 9 beste funksjonene i HTML5 Web Workers og dens eksempler med kodeimplementering. Du kan også gå gjennom de foreslåtte artiklene våre for å lære mer -
- Html5 Nye elementer | Topp 10
- HTML-rammer med syntaks
- Introduksjon til fordelene ved HTML
- Topp 10 HTML5 intervjuspørsmål og svar