Un web worker de web worker este un JavaScript care rulează în fundal, fără a afecta performanța paginii.
Ce este un Web Worker ?
Când se execută script-uri într-o pagină HTML, pagina devine nu răspunde la comenzi până când script-ul este terminat.
Un web worker de web worker este un JavaScript care rulează în fundal, independent de alte script - uri, fără a afecta performanța paginii. Puteți continua să faci ce vrei: click, selectarea lucruri, etc., în timp ce web worker de web worker se execută în fundal.
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin Web Workers pe Web Workers .
| API-ul | |||||
|---|---|---|---|---|---|
| Web Workers | 4 | 10.0 | 3.5 | 4 | 11.5 |
HTML Web Workers Exemplu
Exemplul de mai jos creează un simplu web worker care conta numere în fundal:
Verificați Web Worker Suport
Înainte de a crea un web worker de web worker , verificați dacă browserul utilizatorului suportă:
if(typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Crearea unui Web Worker fișier Acum, să creați nostru web worker într - un extern JavaScript.
Aici, vom crea un script care contează. Script - ul este stocat în "/html/demo_workers.js" fișier:
var i = 0;
function timedCount()
{
i = i + 1;
postMessage(i) ;
setTimeout("timedCount() ",500);
}
timedCount() ;
Partea importantă a codului de mai sus este postMessage() metoda - care este folosit pentru a posta un mesaj înapoi la pagina HTML.
Note: În mod normal , web workers nu sunt folosite pentru astfel de scripturi simple, dar pentru mai multe sarcini CPU intensive.
Crearea unui Web Worker obiect
Acum , că avem web worker de web worker fișier, trebuie să - l numim dintr - o pagină HTML.
Următoarele linii verifică dacă web worker de web worker "/html/demo_workers.js" web worker există deja, în cazul în care nu - creează un nou web worker obiect și rulează codul în "/html/demo_workers.js" :
if(typeof(w) == "undefined") {
w = new Worker("/html/demo_workers.js");
} Apoi , putem trimite și primi mesaje de la web worker de web worker .
Adăugați un "onmessage" ascultător eveniment la web worker de web worker .
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
În cazul în care web worker postează un mesaj, codul în cadrul ascultătorul eveniment este executat. Datele de la web worker de web worker este stocat în event.data.
Terminate un Web Worker
Atunci când un web worker de (even after the external script is finished) web worker este creat obiect, acesta va continua să asculte mesajele (even after the external script is finished) și (even after the external script is finished) - (even after the external script is finished) până când este terminată.
Pentru a termina un web worker de terminate() web worker și browser - ul / resurse gratuit la calculator, utilizați terminate() metoda:
w.terminate();
Refolosi Web Worker
Dacă setați web worker variabila la nedefinită, după ce a fost încheiată, puteți reutiliza codul:
w = undefined;
Full Web Worker Exemplu de cod
Am văzut deja Web Worker codul din .js fișierul. Mai jos este codul pentru pagina HTML:
Exemplu
<!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> Încearcă - l singur »
Web Workers și DOM
Deoarece web workers sunt în fișiere externe, acestea nu au acces la următoarele obiecte JavaScript:
- Obiectul fereastră
- Obiectul documentului
- Obiectul părinte