Définit le style d'une esquisse
Lors de l'exécution d’un scripts javascript dans une page HTML, la page devient insensible jusqu'à ce que le script soit terminé
Un web worker est un JavaScript qui s'exécute en arrière-plan, indépendamment des autres scripts, sans affecter les performances de la page.
Vous pouvez continuer à faire ce que vous voulez : en cliquant, en sélectionnant les choses, etc., tandis que le travailleur du web s'exécute en arrière-plan.
Un Web Workers est un JavaScript en cours d'exécution en arrière-plan, sans affecter les performances de la page.
Lors de l'exécution de scripts dans une page HTML, la page ne répond pas jusqu'à ce que le script soit terminé, ou il est fréquent que nos appels serveurs dépassent le temps prévu, ce qui provoque une alerte du navigateur nous proposant "d'arrêter le script" comme le montre l'image suivante:
L’exemple suivant montre le message d’alerte émis par le navigateur.
Exemple : 📋 Copier le code
<!DOCTYPE html> <html> <head> <title>HTML5 demo</title> <meta charset="UTF-8" /> <script type="text/javascript"> function calc(){ var somme = 0; for (var i= 1; i < 10000; i++){ for (var j=1; j<10000; j++){ for (var k=1;k<10000;k++){ somme += k+j+i; }}} document.getElementById("resultat").innerHTML = somme; } </script> </head> <body> <input type="submit" onClick="calc();" value="Calculer"/><br/> Résultat = <input type="text" id="resultat"> </body> </html>
Exécuter l’exemple, click sur le boutton calculer et attendez quelques instants pour voir le résultat
Comme vous pouvez le voir sur la démonstration, le script se fait arrêter par le navigateur au bout de quelques secondes.
La solution proposée par HTML5 est simple: Un Web Workers, qui est un code JavaScript qui s'exécute en arrière-plan, indépendamment des autres scripts, sans affecter les performances de la page. Vous pouvez continuer à faire ce que vous voulez : en cliquant, sélectionnant des choses, etc, alors que le Web Workers s'exécute en arrière-plan.
Appui de navigateur
Web Workers est pri en charge par tous les principaux navigateurs, sauf Internet Explorer.
Reprenons notre exemple et externaliser notre script en créant un Web
Workers.
Externaliser veut dire mettre notre script dans un fichier javascript
externe. Donc nous allons prendre notre fonction calc() et la mettre
dans le fichier "calcule.js" que nous allons mettre dans le même
répertoire que notre fichier html .
Voici le fichier "calcule.txt" à télécharger
L'exemple ci-dessous crée un Web Workers simple pour faire les calculess en arrière-plan :
Exemple
Exemple : 📋 Copier le code
<!DOCTYPE html> <html> <head> <title>HTML5 demo</title> <meta charset="UTF-8" /> <script type="text/javascript"> function calc(){ var w = new Worker('calcule.js'); w.addEventListener('message', function(event) { document.getElementById("resultat").innerHTML = event.data; }, false); w.postMessage(""); // lance le worker. } </script> </head> <body> <input type="submit" onClick="calc();" value="Calculer"/><br/> <p>Résultat = <span id="resultat"></span></p> </body> </html>
Avant de créer un Web Workers, vérifier si le navigateur prend en charge le Web Worker :
Exemple : 📋 Copier le code
if(typeof(Worker)!=="undefined") { // Oui! Web worker est supporté! // votre code ici code..... } else { // Désolé! Web Worker n’est pas supporté.. // Code alternatif si vous voulez. }
Maintenant, nous allons créer notre Web Workers dans un JavaScript externe.
Ici, nous créons un script qui calcule. Le script est stocké dans le fichier « calcule.js » :
Exemple : 📋 Copier le code
self.onmessage = function(e) { var somme=0; for (var i= 1; i < 1000; i++){ for (var j=1; j<1000; j++){ for (var k=1;k<1000;k++){ somme += k+j+i; }}} self.postMessage(somme); };
La partie importante du code ci-dessus est la méthode postMessage() - qui est utilisé pour poster les messages de retour à la page HTML.
Remarque : Normalement les Web Workers ne servent pas pour ces scripts simples, mais pour les tâches intensives qui nécessitent plus de CPU.
Maintenant que nous avons le fichier Web Worker, nous devons l’appeler à partir d'une page HTML.
Les lignes suivantes vérifie si le Worker existe déjà, sinon - il crée un nouvel objet Web Worker et exécute le code dans fichier Worker « calcule.js » :
Exemple : 📋 Copier le code
if(typeof(w)=="undefined") { w=new Worker("calcule.js"); }
Ainsi nous pourrons envoyer et recevoir des messages du Web Worker.
Ajoutez un écouteur d'événement « onmessage » pour le Web Worker.
Exemple : 📋 Copier le code
w.onmessage=function(event){ document.getElementById("result").innerHTML=event.data; };
Lorsque le Web Worker publie un message, le code au sein de l'écouteur d'événements est exécuté. Les données du Web Worker sont stockées dans event.data.
Lorsqu'un objet Web Worker est créé, il continuera d'écouter les messages (même après que le script externe est terminé) jusqu'à ce qu'elle soit terminée.
Pour terminer un Web Workers et libérer les ressources de l'ordinateur/navigateur, utilisez la méthode terminate() :
w.terminate();
Nous avons déjà vu le code du Worker dans le fichier .js. Voici le code pour la page HTML finale :
Exemple
Exemple : 📋 Copier le code
<!DOCTYPE html> <html> <head> <title>HTML5 demo</title> <meta charset="UTF-8" /> <script type="text/javascript"> if(typeof(Worker)!=="undefined") { function calc(){ var w; if(typeof(w)=="undefined") { w = new Worker('calcule.js'); } w.addEventListener('message', function(event) { document.getElementById("resultat").innerHTML = event.data; }, false); w.postMessage(""); // lance le worker. } } else { document.getElementById("resultat").innerHTML ="Désolé! Web Worker n’est pas supporté.."; // ou un code alternatif si vous voulez. } </script> </head> <body> <input type="submit" onClick="calc();" value="Calculer"/><br/> <p>Résultat = <span id="resultat"></span></p> </body> </html>
Étant donné que les Web Workers sont dans des fichiers externes, ils n'ont pas accès aux objets JavaScript suivants :