Wat zijn webwerkers?

Dit artikel gaat over het gebruik van webwerkers en hun belang in HTML5.Java script-engine opgebouwd met een enkele thread en er is geen gelijktijdig proces achter hen (er wordt geen ander proces uitgevoerd totdat het eerste proces is voltooid). Omdat JavaScript op de voorgrond wordt uitgevoerd en de webpagina tijdrovend is. Om dit forse probleem te voorkomen, heeft HTML5 daarom een ​​nieuwe technologie bedacht met de naam Web workers. Het is een klein achtergrondscript dat berekeningen uitvoert bij dure taken zonder in te grijpen in de gebruikersinterface of de prestaties van de webpagina. Deze geïsoleerde thread is relatief licht van gewicht en wordt ondersteund in alle webbrowsers. Dit zorgt ervoor dat HTML extra threads opstart.

Typen webwerkers in HTML5

Webwerkers worden ook wel "toegewijde werknemers" genoemd. Ze hebben een apart gedeeld geheugenmodel. Met andere woorden, we kunnen zeggen dat een volledig JavaScript-bereik toevallig op één thread is uitgevoerd. Tijdens het werken in een webbrowser zijn we een runway-dialoogbericht tegengekomen vanwege de zware verwerking van de pagina. Om een ​​goede oplossing te bieden, heeft HTML API van de webbrowser tegelijkertijd verschillende berekeningen bedacht.

Drie belangrijke soorten webwerkers worden hieronder gegeven:

1. Shared Web Worker

Dit type maakt gebruik van API en elke werkeenheid heeft meerdere verbindingen tijdens het verzenden van een bericht (meerdere scripts), op voorwaarde dat elke context van dezelfde oorsprong is. Browserondersteuning voor deze medewerker is beperkt. Ze worden aangeroepen met behulp van de shared worker () -constructor.

2. Toegewijde webwerker

Een bestand maken is heel eenvoudig, gewoon door een Constructor met het bronpad aan te roepen. Ze maken gebruik van berichtcommunicatie genaamd post message () methode tijdens berichtoverdracht. Zelfs de gebeurtenishandlers worden gebruikt wanneer een luisteraar plaatsvindt. De handler onmessage () is gebruikt om een ​​bericht te ontvangen.

3. Servicewerker

Deze medewerker heeft geen directe interactie met de webpagina en wordt op de achtergrond uitgevoerd. Ze kunnen herstellen wanneer nodig en fungeert als een proxy, ze zijn toegankelijk via meerdere threads.

Hoe maak je een Web Workers-bestand aan?

Ze bieden geen ondersteuning voor sommige functies zoals vensterobject, DOM, het bovenliggende object. Alle functies worden uitgevoerd door een replica ervan door te geven.

Stap 1: Een bestandsimport maken Worker () constructor Een bestand wordt gemaakt met een nieuw object en het script ziet eruit als.

var worker = new Worker(sample.js);

Stap 2: Aanmaken van een bericht (). De gemaakte werkbestanden roepen automatisch de methode post message () op. De methoden post message () sturen het bericht door naar de hoofdthread. En op dezelfde manier kunnen we een bericht verzenden van de hoofdthread naar de werkthread. Hier begint de werker.

worker. postMessage();

Stap 3: Vervolgens gooit u de gebeurtenishandler om het bericht van de webmedewerker toe te staan.

worker. onmessage = function(event)

Voortaan hebben we gezien hoe we berichten kunnen verzenden en ontvangen. Laten we nu eens kijken hoe we de medewerker halverwege het proces kunnen beëindigen.

Stap 4: Om het proces te stoppen.

worker.terminate()

Stap 5: Implementeren van een foutafhandelingsscenario dat werknemer gebruikt.

Worker.onerror();

Top 9 functies van HTML5-webwerkers

  1. Omdat webwerkers een asynchroon protocol zijn, waren ze het meest geschikt voor het uitvoeren van computertaken en werden ze beschouwd als de professionele functies van Javascript.
  2. Webmedewerkers betalen een strikt uitvoeringsplatform voor mobiele en desktopvensters, waardoor ze de webpagina kunnen uitvoeren zonder de webpagina in de browsers vast te zetten.
  3. Het belangrijkste voordeel is dat we dure processen kunnen uitvoeren binnen een enkele thread die de lopende thread niet onderbreekt.
  4. Webwerkers zijn kleine, lichtgewicht threads die individueel de gebruikersinterface interleaven.
  5. Webwerkers die kernel-georiënteerde threads zijn, helpen bij het bereiken van de hoge prestaties van de browserpagina.
  6. Webmedewerkers helpen bij het maken van parallelle programmering en voeren multithreading-acties uit.
  7. Webmedewerkers verhogen snelheid voor Java JScript-toepassing.
  8. Web-worker wordt beschouwd als een client-side script en wordt hoger in games gebruikt.
  9. Webwerkthreads communiceren met elkaar met behulp van de post Message () call-back-methode.

Voorbeelden van HTML5-webwerkers

Webmedewerkers hebben toegang tot de navigator, XMLHTTP Request, Navigator vanwege hun multi-verwerkingsactiviteiten. Het onderstaande voorbeeld richt zich op specifieke soorten werknemers om aan te tonen.

Voorbeeld 1

Toont Sample Worker-bestand Demonstreert de werking van de browser.

Code:



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

Output:

Voorbeeld 2

Het volgende voorbeeld laat zien hoe de werkerstaken achter de taak lopen met behulp van klasse en de telling wordt gedaan voor de werkerstaken. De werkerstaken werken de webpagina in elke lus automatisch bij totdat de lus eindigt. Om de uitvoering van de medewerker te beëindigen, wordt hier terminate () gebruikt.

Het werk achter de achtergrond door de webwerker:

Code:

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

Output:

Conclusie

Tot het einde hebben we gezien hoe webwerkers onafhankelijk werken van de rode draad die de weborganisaties helpt bij het maken van veeleisende apps. En het wordt ten zeerste aanbevolen om webwerkers in javascript te gebruiken voor zware taken. Er wordt gesuggereerd dat wanneer de webbrowser niet meer wordt gebruikt, de systeembronnen moeten worden gebruikt.

Aanbevolen artikel

Dit is een handleiding voor HTML5-webwerkers. Hier bespreken we de 9 belangrijkste functies van HTML5 Web Workers en zijn voorbeelden met code-implementatie. U kunt ook onze voorgestelde artikelen doornemen voor meer informatie -

  1. Html5 Nieuwe elementen | Top 10
  2. HTML-frames met syntaxis
  3. Inleiding tot de voordelen van HTML
  4. Top 10 HTML5-interviewvragen en -antwoorden

Categorie:

Web ontwikkelingstools