Un web worker è un JavaScript in esecuzione in background, senza compromettere le prestazioni della pagina.
Che cosa è un Web Worker ?
Quando l'esecuzione di script in una pagina HTML, la pagina non risponde finché lo script è terminato.
Un operaio web, come definito dal World Wide Web Consortium (W3C) e l'Hypertext Application Technology Group di lavoro (WHATWG) Web, è uno script JavaScript eseguito da una pagina HTML che viene eseguito in background, indipendentemente da altri script di interfaccia utente che può anche essere stato eseguito dalla stessa pagina HTML. lavoratori sul web sono spesso in grado di utilizzare le CPU multi-core in modo più efficace.
Panoramica
Come previsto dal WHATWG, lavoratori web sono relativamente pesante. Essi dovrebbero essere di lunga durata, hanno un costo delle prestazioni di start-up ad alto, e un elevato costo di memoria per ogni istanza.
lavoratori sul web non sono destinati o dovrebbero essere utilizzati in gran numero come potrebbero ingolfare le risorse di sistema.
I lavoratori Web consentono per l'esecuzione simultanea dei fili del browser e uno o più thread JavaScript in esecuzione in background. Il browser che segue un singolo thread di esecuzione dovrà attendere su programmi JavaScript per terminare l'esecuzione prima di procedere e questo può richiedere molto tempo, che il programmatore può, come per nascondere da parte dell'utente.
Esso consente per il browser per continuare con il normale funzionamento durante l'esecuzione dello script in background. La specifica operaio web è una specifica separata dalla specifica HTML5 e può essere utilizzato con HTML5.
Ci sono due tipi di lavoratori: lavoratori web dedicati e condivisi.
Quando i lavoratori web eseguite in background, non hanno accesso diretto al DOM, ma comunicano con il documento dal messaggio che passa. Ciò consente l'esecuzione multi-threaded di programmi JavaScript.
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente Web Workers .
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML Web Workers Esempio
L'esempio seguente crea un semplice web worker che contano i numeri in background:
Controllare Web Worker Supporto
Prima di creare un web worker , controllare se il browser dell'utente supporta:
if(typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
} else {
// Sorry! No Web Worker support..
}
Creare un Web Worker file
Ora, creiamo il nostro web worker in JavaScript esterno.
Qui, creiamo uno script che conta. Lo script è archiviato nella "/html/demo_workers.js" del file:
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i) ;
setTimeout("timedCount() ",500);
}
timedCount() ;
La parte importante del codice di cui sopra è il postMessage() il metodo - che viene utilizzato per inviare un messaggio di nuovo alla pagina HTML.
Note: Normalmente web workers non sono utilizzati per tali semplici script, ma per più compiti la CPU.
Creare una Web Worker Object
Ora che abbiamo il web worker di file, abbiamo bisogno di chiamare da una pagina HTML.
Le seguenti linee controlla se il web worker già esiste, se non - si crea un nuovo web worker oggetto e viene eseguito il codice in "/html/demo_workers.js" :
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
}
Allora possiamo inviare e ricevere messaggi dal web worker .
Aggiungere un "onmessage" listener di eventi al web worker .
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Quando i web worker inserisce un messaggio, viene eseguito il codice all'interno del listener di eventi. I dati del web worker vengono memorizzati in event.data.
Termina un Web Worker
Quando un web worker è stato creato oggetto, che continuerà per ascoltare i messaggi (even after the external script is finished) fino a quando non è terminato.
Per terminare un web worker , e browser risorse gratuite / computer, utilizzare il terminate() Metodo:
w.terminate();
Riutilizzare il Web Worker
Se si imposta il web worker variabile non definita, dopo che è stata terminata, è possibile riutilizzare il codice:
w = undefined;
Pieno Web Worker Esempio di codice
Abbiamo già visto il Web Worker codice nel .js file. Di seguito è riportato il codice per la pagina HTML:
Esempio
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html> Prova tu stesso " Web Workers e il DOM
Dal momento che web workers sono in file esterni, non hanno accesso alle seguenti oggetti JavaScript:
- L'oggetto window
- L'oggetto del documento
- L'oggetto padre