English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Il web worker è un JavaScript eseguito in background, che non influisce sulle prestazioni della pagina.
Quando si esegue uno script nella pagina HTML, lo stato della pagina è non rispondente fino a quando lo script non è completato.
Il web worker è un JavaScript eseguito in background, indipendente dagli altri script, non influisce sulle prestazioni della pagina. Puoi continuare a fare qualsiasi cosa tu voglia: cliccare, selezionare contenuti, ecc., mentre il web worker esegue in background.
Internet Explorer 10, Firefox, Chrome, Safari e Opera supportano Web workers.
Il seguente esempio crea un semplice web worker che conta in background:
Codice del file demo-workers.js:
var i=0;
function timerCount()
{
i=i+1;
postMessage(i);
setTimeout("timerCount()",500);
}
timerCount();
Prima di creare il web worker, verificare se il browser dell'utente lo supporta:
if(typeof(Worker)!=="undefined")
{
// Sì! Web worker è supportato!
// alcuni codici.....
}
else
{
// Scusate! Web Worker non è supportato
}
Ora, creiamo il nostro web worker in un JavaScript esterno.
Qui abbiamo creato lo script di conteggio. Lo script è memorizzato nel file "demo-workers.js":
var i=0;
function timerCount()
{
i=i+1;
postMessage(i);
setTimeout("timerCount()",500);
}
timerCount();
La parte importante del codice sopra è il metodo postMessage() - utilizzato per inviare un messaggio alla pagina HTML.
Attenzione: Il web worker di solito non viene utilizzato per script così semplici, ma per compiti che richiedono più risorse CPU.
Abbiamo già il file web worker, ora dobbiamo chiamarlo dalla pagina HTML.
Il seguente codice verifica l'esistenza di worker, se non esiste, - crea un nuovo oggetto web worker e poi esegue il codice nel file "demo-workers.js":
if(typeof(w) == "undefined")
{
w = new Worker("demo-workers.js");
}
Poi possiamo ricevere messaggi dal web worker.
Aggiungi un ascoltatore di eventi "onmessage" al web worker:
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
Quando il web worker trasmette un messaggio, esegue il codice nell'ascoltatore degli eventi. In event.data si trova i dati provenienti da event.data.
Dopo aver creato l'oggetto web worker, continuerà a ascoltare i messaggi (anche dopo che lo script esterno è terminato) fino a che non viene terminato.
Per terminare il web worker e liberare le risorse del browser/computer, utilizzare il metodo terminate().
w.terminate();
Abbiamo visto il codice Worker nel file .js. Ecco il codice della pagina HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Manuale di Base del Sito (oldtoolbag.com)</title>
</head>
<body>
<p>Conteggio: <output id="result"></output></p>
<button onclick="startWorker()">Inizia il lavoro</button>
<button onclick="stopWorker()">Ferma il lavoro</button>
<p><strong>Attenzione：</strong> Internet Explorer 9 e versioni precedenti non supportano Web Workers.</p>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo-workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Dispiace, il tuo browser non supporta Web Workers...";
}
}
funzione stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>Testa a vedere ‹/›Poiché i web worker si trovano in file esterni, non possono accedere ai seguenti oggetti JavaScript:
Oggetto window
Oggetto document
Oggetto parent