Web Workers HTML5
travailleur web exécuter JavaScript en arrière-plan et ne pas affecter les performances de la page.
Qu'est-ce qu'un travailleur Web?
Lors de l'exécution d'un script dans une page HTML, l'état de la page ne répond pas jusqu'à ce que le script est terminé.
travailleur web exécuter JavaScript en arrière-plan, indépendamment des autres scripts ne seront pas affecter les performances de la page. Vous pouvez continuer à faire tout ce qui est prêt à faire: Cliquez pour sélectionner le contenu, etc., à un moment où travailleur web fonctionne en arrière-plan.
support du navigateur
Internet Explorer 10, Firefox, Chrome, Safari et Opera soutien des travailleurs sur le Web.
Web Workers HTML5 exemples
L'exemple suivant crée un travailleur web simple, comptant en arrière-plan:
Code de fichier demo_workers.js:
fonction timedCount ()
{
i = i + 1;
postMessage (i);
setTimeout ( "timedCount ()", 500);
}
timedCount ();
Détecter si le navigateur prend en charge le travailleur Web
Avant de créer un travailleur Web, s'il vous plaît vérifier le navigateur de l'utilisateur prend en charge:
{
// Oui! Le soutien des travailleurs de Web!
// Unepartieducode .....
}
autre
{
// Désolé! Web Worker est pas pris en charge
}
Créez un fichier de travail web
Maintenant, nous allons créer notre travailleur Web dans un JavaScript externe.
Ici, nous avons créé un compte de script. Le script est stocké dans le "demo_workers.js" file:
fonction timedCount ()
{
i = i + 1;
postMessage (i);
setTimeout ( "timedCount ()", 500);
}
timedCount ();
Une partie importante du code ci-dessus est la méthode postMessage () - il est utilisé pour retourner une page HTML nouvelles.
Remarque: travailleur Web est généralement pas utilisé pour de tels scripts simples, mais pour des tâches plus gourmandes en temps processeur.
Création d'un objet Web Worker
Nous avons déjà un fichier de travail Web, et maintenant nous avons besoin de l'appeler à partir d'une page HTML.
Le code suivant détecte la présence du travailleur, s'il n'y a pas - il crée un nouvel objet travailleur web puis exécutez "demo_workers.js" code:
{
w=new Worker("demo_workers.js");
}
On peut alors avoir lieu et recevoir des messages du travailleur Web.
Ajouter au travailleur web un des écouteurs d'événement "onMessage":
. Document.getElementById ( "résultat") innerHTML = event.data;
};
Web Worker résiliation
Lorsque nous créons un objet travailleur web, il va continuer à écouter les messages (même après l'achèvement d'un script externe) jusqu'à ce qu'il se termine par.
Pour mettre fin à un travailleur Web, et libérer les ressources navigateur / ordinateur, utilisez la méthode terminate ():
Complete Web Worker exemple de code
Nous avons vu .js Code fichier travailleur. Voici la page code HTML:
Exemples
<Html>
<Head>
<Meta charset = "utf-8">
<Titre> Ce tutoriel (w3big.com) </ title>
</ Head>
<Body>
<P> count: <output id = "résultat"> </ output> </ p>
<Bouton onclick = "startWorker ()"> pour travailler </ button>
<Bouton onclick = "stopWorker ()"> arrêté </ button>
<P> <strong> Remarque: </ strong> Internet Explorer 9 et les versions antérieures de IE navigateur ne supporte pas les travailleurs Web </ p>.
<Script>
w var;
fonctionner startWorker () {
if (typeof (travailleur)! == "undefined") {
if (typeof (w) == "undefined") {
w = new Worker ( «demo_workers.js»);
}
w.onmessage = function (event) {
. Document.getElementById ( "résultat") innerHTML = event.data;
};
} Else {
document.getElementById ( "résultat") innerHTML = "Désolé, votre navigateur ne supporte pas les Web Workers ..." .;
}
}
fonction stopWorker ()
{
w.terminate ();
w = undefined;
}
</ Script>
</ Body>
</ Html>
Essayez »
Web Les travailleurs et les DOM
Depuis le travailleur web dans un fichier externe, ils ne peuvent pas accéder à l'objet JavaScript l'exemple suivant:
- objet fenêtre
- Document Object
- objets parents