Cosa sono i Web Worker?
Questo articolo riguarda l'utilizzo dei web worker e la loro importanza in HTML5.Il motore di script Java creato con un singolo thread e non vi è alcun processo concorrente dietro di essi (nessun altro processo viene eseguito fino al completamento del primo processo). Come javascript viene eseguito in primo piano e rende la pagina Web dispendiosa in termini di tempo. Pertanto, per evitare questo grosso problema, HTML5 ha messo a punto una nuova tecnologia chiamata Web worker. È un piccolo script in background che esegue calcoli in compiti costosi senza intervenire sull'interfaccia utente o sulle prestazioni della pagina Web. Questo thread isolato è relativamente leggero ed è supportato in tutti i browser web. Questo rende HTML per avviare thread aggiuntivi.
Tipi di Web Worker in HTML5
I lavoratori Web sono anche definiti "lavoratori dedicati". Hanno ottenuto un modello di memoria condivisa separato. In altre parole, possiamo dire che un intero ambito javascript è stato eseguito su un singolo thread. Mentre lavoriamo in un browser web abbiamo riscontrato alcuni messaggi di dialogo sulla passerella a causa della pesante elaborazione della pagina. Per fornire una buona soluzione L'API HTML del browser Web ha elaborato diversi calcoli allo stesso tempo.
Di seguito sono riportati tre importanti tipi di Web worker:
1. Web lavoratore condiviso
Questo tipo utilizza l'API e ogni unità di lavoro ha più connessioni durante l'invio di un messaggio (più script) purché ogni contesto provenga dalla stessa origine. Il supporto del browser per questo lavoratore è limitato. Vengono chiamati utilizzando il costruttore condiviso worker ().
2. Web lavoratore dedicato
La creazione di un file è molto semplice semplicemente chiamando un costruttore con il suo percorso di origine. Utilizzano la comunicazione dei messaggi chiamata metodo post message () durante il trasferimento dei messaggi. Anche i gestori di eventi vengono utilizzati quando si verifica un ascoltatore. Il gestore onmessage () è stato utilizzato per ricevere un messaggio.
3. Lavoratore di servizio
Questo lavoratore non interagisce direttamente con la pagina Web e viene eseguito in background. Possono ripristinare quando richiesto e funge da proxy, sono accessibili da più thread.
Come creare un file di lavoro Web?
Non hanno supporto per alcune funzionalità come oggetto finestra, DOM, L'oggetto principale. Tutte le funzioni vengono eseguite passando una replica di esse.
Passaggio 1: creare un costruttore di importazione file Worker () Viene creato un file utilizzando un nuovo oggetto e lo script appare come.
var worker = new Worker(sample.js);
Passaggio 2: creazione del messaggio postale (). I file di lavoro creati richiamano automaticamente il metodo post message (). I metodi post message () indirizzano il messaggio che passa al thread principale. Allo stesso modo, possiamo inviare un messaggio dal thread principale al thread di lavoro. Da qui inizia il lavoratore.
worker. postMessage();
Passaggio 3: Avanti per lanciare il gestore eventi, per consentire il messaggio dal Web worker.
worker. onmessage = function(event)
D'ora in poi abbiamo visto come inviare e ricevere messaggi, ora vediamo come terminare il lavoratore nel mezzo del processo.
Passaggio 4: interrompere il processo.
worker.terminate()
Passaggio 5: implementare uno scenario di gestione degli errori utilizzato dal lavoratore.
Worker.onerror();
Le 9 principali funzionalità dei Webworker HTML5
- Essendo i protocolli asincroni, i lavoratori Web erano i più adatti a svolgere compiti di calcolo e considerati le caratteristiche professionali di Javascript.
- Gli operatori Web pagano una piattaforma di esecuzione rigorosa per le finestre mobili e desktop, consentendo di eseguire la pagina Web senza congelare la pagina Web nei browser.
- Il vantaggio principale è che possiamo eseguire processi costosi all'interno di un singolo thread singolo che non interrompe il thread principale in esecuzione.
- I Web-worker sono piccoli thread leggeri che vivono individualmente interfacciando l'interfaccia utente.
- I web worker essendo thread orientati al kernel aiutano a raggiungere le elevate prestazioni della pagina dei browser.
- Gli operatori Web aiutano nella creazione di una programmazione parallela ed eseguono azioni di multithreading.
- I Web worker aumentano la velocità per l'applicazione JScript Java.
- Web-worker è considerato uno script sul lato client e utilizzato più in alto nell'applicazione di giochi.
- I thread del Web worker comunicano tra loro utilizzando il metodo call-back post Message ().
Esempi di HTML5 Web Workers
Gli operatori Web hanno accesso al navigatore, alla richiesta XMLHTTP, al navigatore grazie alle loro attività di elaborazione multipla. L'esempio seguente si concentra su tipi di lavoratori dedicati da dimostrare.
Esempio 1
Mostra il file di esempio del lavoratore Dimostrando il funzionamento del browser.
Codice:
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";)
)
Produzione:
Esempio n. 2
L'esempio seguente mostra come le attività di lavoro vengono eseguite dietro l'attività utilizzando la classe e il conteggio viene eseguito per le attività di lavoro. Le attività di lavoro aggiorna automaticamente la pagina Web su ogni ciclo fino alla fine del ciclo. Per terminare l'esecuzione del lavoratore, qui è stato utilizzato terminate ().
Il lavoro svolto sullo sfondo dall'operatore web:
Codice:
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++;
)
Produzione:
Conclusione
Alla fine, abbiamo visto come gli operatori Web lavorano indipendentemente dal thread principale che aiuta le organizzazioni Web a creare app impegnative. E si consiglia vivamente di utilizzare i lavoratori Web in JavaScript per attività pesanti. Si suggerisce che quando il browser non è più in uso dovrebbe essere chiuso per consumare le risorse di sistema.
Articolo raccomandato
Questa è una guida per HTML5 Web Workers. Qui discutiamo le 9 principali funzionalità di HTML5 Web Workers e i suoi esempi con l'implementazione del codice. Puoi anche consultare i nostri articoli suggeriti per saperne di più -
- Html5 Nuovi elementi | Top 10
- Frame HTML con sintassi
- Introduzione ai vantaggi dell'HTML
- Le 10 migliori domande e risposte sull'intervista HTML5