Traitements Web

Internet Explorer 10 et les applications du Windows Store en JavaScript prennent en charge les traitements Web. L’API de traitements Web définit une méthode d’exécution des scripts en arrière-plan. Les traitements Web sont spécifiés dans la spécification Web Workers du World Wide Web Consortium (W3C).

Généralement, les navigateurs sont à thread unique, forçant l’exécution de tous les scripts de votre application dans un seul thread d’interface utilisateur. Bien que vous puissiez créer l’illusion de plusieurs actions se produisant en même temps à l’aide des événements DOM (Document Object Model) et de l’API setTimeout , une seule tâche gourmande en calcul suffit pour arrêter brutalement l’application.

L’API de traitements Web permet aux auteurs d’applications Web de générer des scripts en arrière-plan qui s’exécutent parallèlement à la page principale. Vous pouvez générer plusieurs threads à la fois destinés à des tâches longues. Un nouvel objet de traitement nécessite un fichier .js, qui est inclus via une demande asynchrone envoyée au serveur.


var myWorker = new Worker('worker.js');

Toutes les communications vers et depuis le thread de traitement sont gérées via des messages. Le thread de traitement hôte et le script de thread de traitement peuvent envoyer des messages à l’aide de postMessage et écouter une réponse à l’aide de l’événement onmessage. Le contenu du message est envoyé en tant que propriété de données de l’événement.

L’exemple suivant permet de créer un thread de traitement et d’écouter un message.


var hello = new Worker('hello.js');
hello.onmessage = function(e) {
  alert(e.data);
};

Le thread de traitement envoie le message à afficher.


postMessage('Hello world!');

Communication bidirectionnelle avec les traitements Web

Pour configurer la communication bidirectionnelle, la page principale et le thread de traitement écoutent l’événement onmessage. Dans l’exemple suivant, le thread de traitement retourne le message après un délai spécifié.

Le script crée d’abord le thread de traitement.


var echo = new Worker('echo.js'); 
echo.onmessage = function(e) {
  alert(e.data); 
}

Le texte du message et les valeurs de délai d’expiration sont spécifiées dans un formulaire. Lorsque l’utilisateur clique sur le bouton d’envoi, le script transmet deux informations au thread de traitement dans un littéral d’objet JavaScript. Pour empêcher la page de transmettre le formulaire de valeurs dans une nouvelle demande HTTP, le gestionnaire d’événements appelle également preventDefault sur l’objet d’événement. Notez que vous ne pouvez pas envoyer des références relatives à des objets DOM à un thread de traitement. Les traitements Web ne peuvent accéder qu’à certaines données. Ils peuvent uniquement accéder aux primitives JavaScript comme les valeurs d’objet ou de chaîne.


<script>
window.onload = function() {
  var echoForm = document.getElementById('echoForm'); 
  echoForm.addEventListener('submit', function(e) {
    echo.postMessage({
      message : e.target.message.value,
      timeout : e.target.timeout.value
    }); 
    e.preventDefault();
  }, false); 
  }
</script>
<form id="echoForm">
  <p>Echo the following message after a delay.</p>
  <input type="text" name="message" value="Input message here."/><br/>
  <input type="number" name="timeout" max="10" value="2"/> seconds.<br/>
  <button type="submit">Send Message</button>
</form>


Enfin, le thread de traitement écoute le message et le renvoie au terme du délai d’expiration spécifié.


onmessage = function(e) 
{
  setTimeout(function() 
  {
    postMessage(e.data.message);
  }, 
  e.data.timeout * 1000);
}

Dans Internet Explorer 10 et les applications du Windows Store en JavaScript, l’API de traitements Web prend en charge les méthodes suivantes.

MéthodeDescription

void close();

Arrête le thread de traitement.

void importScripts(inDOMString... urls);

Importe une liste de fichiers JavaScript supplémentaires séparés par une virgule.

void postMessage(quelles que soient les données);

Envoie un message vers ou depuis le thread de traitement.

 

Internet Explorer 10 et les applications du Windows Store en JavaScript prennent en charge les attributs de l’API de traitements Web suivants :

AttributTypeDescription
locationWorkerLocationReprésente une URL absolue, comprenant les composants protocol, host, port, hostname, pathname, search et hash.
navigatorWorkerNavigatorReprésente l’identité et l’état onLine du client de l’agent utilisateur.
selfWorkerGlobalScopeÉtendue du traitement, qui inclut les objets WorkerLocation et WorkerNavigator.

 

Internet Explorer 10 et les applications du Windows Store en JavaScript prennent en charge les événements de l’API de traitements Web suivants :

ÉvénementDescription

onerror

Une erreur d’exécution s’est produite.

onmessage

Données de message reçues.

 

WindowTimers

L’API de traitements Web prend également en charge la fonctionnalité mise à jour  WindowTimers HTML5.

MéthodeDescription

void clearInterval(inlonghandle);

Annule un délai d’expiration identifié à l’aide d’un handle.

void clearTimeout(inlonghandle);

Annule un délai d’expiration identifié à l’aide d’un handle.

long setInterval(inanyhandler, inoptionalanytimeout, inany... args);

Planifie l’exécution répétitive d’un délai d’expiration après le nombre spécifié de millisecondes. Notez que vous pouvez désormais transmettre directement des arguments supplémentaires au gestionnaire. Si le gestionnaire est une chaîne DOMString, il est compilé en JavaScript. Retourne un handle pour le délai d’expiration. Supprime le délai d’expiration avec clearInterval.

long setTimeout(inanyhandler, inoptional anytimeout, inany... args);

Planifie l’exécution d’un délai d’expiration après le nombre spécifié de millisecondes. Notez que vous pouvez désormais transmettre directement des arguments supplémentaires au gestionnaire. Si le gestionnaire est une chaîne DOMString, il est compilé en JavaScript. Retourne un handle pour le délai d’expiration. Supprime le délai d’expiration avec clearTimeout.

 

Mises à jour des traitements Web dans IE10 Platform Preview 4

Internet Explorer 10 Platform Preview Build 4 impose une limite de 25 threads de traitement Web par processus. Vous pouvez créer plus de threads de traitement dans le script mais seulement 25 seront actifs en même temps.

La création d’un thread de traitement ne générera pas une exception si le nombre maximal de threads est atteint. L’appel réussit toujours. Vous pouvez alors ajouter des gestionnaires au thread et lui transmettre des messages. Cependant, il est possible que, pour démarrer, le thread de traitement doive attendre que l’un des 25 threads existants soit disponible.


// Coding pattern before IE10 Platform Preview Build 4
try {
    var worker = new Worker(url);
} catch(ex) {
    // IE might throw...?
}

// After IE10 Platform Preview Build 4
var worker = new Worker(url);
// Continue with confidence...

Informations de référence sur les API

Web Workers

Exemples et didacticiels

Exemple de traitements Web
Comment explorer l’ensemble de Mandelbrot à l’aide de HTML5

Démonstrations du site Internet Explorer Test Drive

Mandelbrot Explorer
The Web Worker Fountains
Web Worker Harness for test262

Billets IEBlog

Débogage des traitements Web dans Internet Explorer 10
Traitements Web dans IE10 : JavaScript en arrière-plan rend les applications plus rapides

Spécification

Traitements Web

Rubriques connexes

Thread HTML5 avec les traitements Web et stockage de données avec IndexedDB
Présentation des traitements Web HTML5 : approche multithreading de JavaScript

 

 

Afficher:
© 2014 Microsoft