Što su radnici na webu?

Ovaj članak govori o korištenju web djelatnika i njihovoj važnosti u HTML5.Java skripta motor izgrađen s jednom nitom i ne postoji paralelni proces iza njih (niti jedan drugi postupak se ne izvršava dok se prvi proces ne završi). Kako se JavaScript pokreće u prvom planu i web stranica čini dugotrajnijom. Stoga, kako bi izbjegao ovaj težak problem, HTML5 je smislio novu tehnologiju nazvanu Web djelatnici. To je mala pozadinska skripta koja izračunava skupe zadatke bez uplitanja u korisničko sučelje ili performanse web stranice. Ova izolirana nit je relativno male težine i podržava je u svim web preglednicima. To čini HTML za pokretanje dodatnih tema.

Vrste web radnika u HTML5

Radnici na mreži također se nazivaju „predanim radnicima“. Dobili su odvojeni model zajedničke memorije. Drugim riječima, možemo reći da se čitav opseg JavaScripta pokrenuo na jednoj niti. Tijekom rada u web pregledniku naišli smo na neku dijalošku poruku o pisti zbog teške obrade stranice. Da bi pružio dobro rješenje web pregledniku HTML API je smislio istovremeno istovremeno i različite proračune.

Tri su važne vrste web djelatnika dane u nastavku:

1. Zajednički radnik na webu

Ova vrsta koristi API i svaka jedinica radnika ima više veza prilikom slanja poruke (više skripti) pod uvjetom da su svaki kontekst istog podrijetla. Podrška preglednika za ovog radnika je ograničena. Zove se pomoću zajedničkog konstruktora ().

2. Namjenski web radnik

Stvaranje datoteke vrlo je jednostavno samo pozivanjem Konstruktora sa izvornim putem. Tijekom prijenosa poruke koriste se komunikacijskom porukom koja se zove metoda post message (). Čak se i organizatori događaja koriste kada se neki slušatelj pojavi. Onmessage za obradu () koristi se za primanje poruke.

3. Uslužni radnik

Ovaj radnik izravno ne komunicira s web stranicom i radi u pozadini. Mogu se obnoviti kad god je potrebno i djeluju kao proxy, njima može pristupiti s više niti.

Kako stvoriti datoteku web radnika?

Nemaju podršku za neke značajke kao što su objekt prozora, DOM, nadređeni objekt. Sve se funkcije izvršavaju prosljeđivanjem njihove replike.

Korak 1: Stvaranje uvoza datoteke Konstruktor Worker () Datoteka se stvara korištenjem novog objekta, a skripta izgleda.

var worker = new Worker(sample.js);

Korak 2: Izrada poštanske poruke (). Stvorene datoteke radnika automatski pozivaju metodu poruke (). Metode post message () usmjeravaju poruku da prođe do glavne teme. Slično tome, možemo poslati poruku iz glavne niti radničkoj niti. Ovdje radnik započinje.

worker. postMessage();

Korak 3: Zatim bacite alat za obradu događaja kako biste omogućili poruku od web djelatnika.

worker. onmessage = function(event)

Od sada smo vidjeli kako slati i primati poruke, a sada da vidimo kako otpustiti radnika usred postupka.

Korak 4: Za zaustavljanje postupka.

worker.terminate()

Korak 5: Za provođenje scenarija rukovanja pogreškama koje radnik koristi.

Worker.onerror();

Top 9 značajki HTML5 Web Workers

  1. Radnici na mreži koji su asinhroni protokol bili su najprikladniji za obavljanje računskih zadataka i smatraju se profesionalnim značajkama Javascripta.
  2. Radnici na webu plaćaju strogu platformu za izvršavanje prozora za mobilne uređaje i radne površine, ostavljajući tako da pokrenu web stranicu bez zamrzavanja web stranice u preglednicima.
  3. Glavna prednost je što možemo pokrenuti skupe procese unutar jedne pojedinačne niti koja ne prekida pokretanje glavne niti.
  4. Web-radnici male lagane niti žive pojedinačno ispreplićući korisničko sučelje.
  5. Radnici na mreži koji su temeljeni na jezgri pomažu u postizanju visokih performansi stranice preglednika.
  6. Web-radnici pomažu u stvaranju paralelnog programiranja i obavljaju radnje s višestrukim navojem.
  7. Web-radnici povećavaju brzinu za java aplikaciju JScript.
  8. Web-radnik smatra se skriptu na strani klijenta i koristi se više u aplikacijama za igre.
  9. Niti web radnika komuniciraju međusobno pomoću metode povratnog poziva Post ().

Primjeri HTML5 Web Workers

Radnici na webu imaju pristup navigatoru, XMLHTTP Zahtjevu, Navigatoru zbog svojih aktivnosti višestruke obrade. Primjer u nastavku fokusira se na posvećene vrste radnika koje trebaju demonstrirati.

Primjer 1

Prikazuje uzorak datoteke radnika koji pokazuje rad preglednika.

Kodirati:



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";)
)

Izlaz:

Primjer 2

Sljedeći primjer prikazuje kako radnički zadaci trče iza zadatka pomoću klase i broji li se za radničke zadatke. Zadaci radnika automatski ažuriraju web stranicu na svakoj petlji sve dok se petlja ne završi. Za zaustavljanje izvršenja radnika, ovdje se koristi termination ().

Posao koji je web pozadina obavljao iza pozadine:

Kodirati:

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++;
)

Izlaz:

Zaključak

Za kraj smo vidjeli kako web-radnici djeluju neovisno od glavne niti koja pomaže mrežnim organizacijama u izradi zahtjevnih aplikacija. A toplo se preporučuje upotreba mrežnih radnika u Javascript-u za teške zadatke. Predlaže se da kada se web preglednik više ne koristi, treba zatvoriti kako bi trošio sistemske resurse.

Preporučeni članak

Ovo je vodič za HTML5 Web Workers. Ovdje smo raspravljali o prvih 9 značajki HTML5 Web Workers i njegovih primjera s implementacijom koda. Možete i proći kroz naše predložene članke da biste saznali više -

  1. Html5 Novi elementi | Top 10
  2. HTML okviri sa sintaksom
  3. Uvod u prednosti HTML-a
  4. Top 10 pitanja i odgovora za HTML5 intervju

Kategorija:

Alati za web razvoj