HTML5 lavoratori Web
lavoratore web eseguire JavaScript in background e non influisce sulle prestazioni della pagina.
Che cosa è un lavoratore Web?
Quando si esegue uno script in una pagina HTML, lo stato della pagina non risponde fino a quando lo script è completo.
lavoratore web eseguire JavaScript in background, indipendente da altri script non influenzerà le prestazioni della pagina. Si può continuare a fare tutto ciò che è disposto a fare: fare clic per selezionare i contenuti, ecc, in un momento in cui lavoratore web viene eseguito in background.
Supporto per il browser
Internet Explorer 10, Firefox, Chrome, Safari e di supporto lavoratori Web Opera.
Esempi di HTML5 Web Workers
L'esempio seguente crea un semplice operaio web, contando sullo sfondo:
codice del file demo_workers.js:
Funzione timedCount ()
{
i = i + 1;
postMessage (i);
setTimeout ( "timedCount ()", 500);
}
timedCount ();
Rilevare se il browser supporta il Web Worker
Prima di creare un lavoratore web, controllare il browser dell'utente supporta:
{
// Sì! Supporto lavoratore Web!
//Alcuni codice .....
}
altro
{
// Siamo spiacenti Web Worker non è supportato
}
Creare un file operaio web
Ora, creiamo il nostro operaio web in un JavaScript esterno.
Qui, abbiamo creato un conteggio script. Lo script è memorizzata nel file "demo_workers.js":
Funzione timedCount ()
{
i = i + 1;
postMessage (i);
setTimeout ( "timedCount ()", 500);
}
timedCount ();
Parte importante del codice di cui sopra è il metodo postMessage () - viene utilizzata per restituire un po 'di pagina HTML notizia.
Nota: operaio web non è generalmente utilizzato per tali semplici script, ma per più compiti CPU-intensive.
Creare un oggetto Web Worker
Abbiamo già un file di lavoratori web, e ora abbiamo bisogno di chiamare da una pagina HTML.
Il seguente codice rileva la presenza di lavoratore, se non c'è - crea un nuovo oggetto operaio web e quindi eseguire "demo_workers.js" codice:
{
w=new Worker("demo_workers.js");
}
Possiamo quindi prendere posto e ricevere messaggi da parte del lavoratore web.
Aggiungere al lavoratore web un "onMessage" listener di eventi:
. Document.getElementById ( "risultato") innerHTML = event.data;
};
terminazione Web Worker
Quando creiamo un oggetto operaio web, continuerà ad ascoltare i messaggi (anche dopo il completamento di uno script esterno) fino a quando non è terminato da.
Per terminare un lavoratore web, e rilasciare le risorse del browser / computer, utilizzare il metodo terminate ():
codice di esempio completo Web Worker
Abbiamo visto js codice Worker file. Ecco la pagina di codice HTML:
Esempi
<HTML>
<Head>
<META charset = "utf-8">
<Title> Questo tutorial (w3big.com) </ title>
</ Head>
<Body>
<P> count: <output id = "risultato"> </ output> </ p>
<Pulsante onclick = "startWorker ()"> al lavoro </ button>
<Pulsante onclick = "stopWorker ()"> arrestato </ button>
<P> <strong> Nota: </ strong> Internet Explorer 9 e versioni precedenti di browser IE non sostenere i lavoratori Web </ p>.
<Script>
var w;
funzione startWorker () {
if (typeof (operaio)! == "undefined") {
if (typeof (w) == "undefined") {
w = new Worker ( "demo_workers.js");
}
w.onmessage = function (evento) {
. Document.getElementById ( "risultato") innerHTML = event.data;
};
} Else {
document.getElementById ( "risultato") innerHTML = "Spiacente, il tuo browser non supporta gli operai sul web ..." .;
}
}
Funzione stopWorker ()
{
w.terminate ();
w = undefined;
}
</ Script>
</ Corpo>
</ Html>
Prova »
I lavoratori web e il DOM
Dal momento che il lavoratore web in un file esterno, non possono accedere oggetto il seguente esempio il JavaScript:
- oggetto finestra
- oggetto del documento
- oggetti padre