HTML5Web Workers
Exécuter des scripts en tâche de fond
Les Web Workers permettent d'exécuter des scripts en tâche de fond (à l'arrière-plan).
Une fois créé, un worker peut envoyer des messages à son processus père en envoyant des messages qui seront réceptionnés par un gestionnaire d'événement spécifié à la création.
Nos sites internet sont de plus en plus lourds, nos applications web de plus en plus complexes. Il est nécessaire, voire indispensable, d'externaliser les traitements afin d'accélérer nos applications.
Etant donné qu'aujourd'hui nos navigateurs tournent sur des machines multi processeurs et multi coeurs, la solution proposée par HTML5 est simple : exporter la récupération de données du serveur dans un autre thread (ou fil d'exécution ou tâche).
Exemple de recherche de nombre premiers:
Le fichier worker.js :
> Essayez-le !
Attention, si vous testez ce code avec le moteur Webkit (qui est utilisé par Chrome et Safari), vous devez mettre la page en ligne. Car webkit refuse d'utiliser les web-workers en local !
Il est donc possible de créer plusieurs références vers le même worker, et ces références peuvent même provenir de pages différentes.
Voici la page HTML (Exemple du Hello World !)
Le fichier test-shared-workers.js
> Essayez cet exemple plusieurs fois !
Une fois créé, un worker peut envoyer des messages à son processus père en envoyant des messages qui seront réceptionnés par un gestionnaire d'événement spécifié à la création.
Nos sites internet sont de plus en plus lourds, nos applications web de plus en plus complexes. Il est nécessaire, voire indispensable, d'externaliser les traitements afin d'accélérer nos applications.
Etant donné qu'aujourd'hui nos navigateurs tournent sur des machines multi processeurs et multi coeurs, la solution proposée par HTML5 est simple : exporter la récupération de données du serveur dans un autre thread (ou fil d'exécution ou tâche).
Dedicated-Workers
Il existe deux types de web-workers. Les shared-workers (workers partagés en français) et les dedicated-workers (workers dédiés) que nous allons analyser ci-dessous. Ces dedicated-workers, une fois créés, sont liés à leur créateur et uniquement à celui-ci.Exemple de recherche de nombre premiers:
<!DOCTYPE HTML>
<html>
<head>
<title>Worker - Exemple de noyau de calcul</title>
</head>
<body>
<p>Le plus grand nombre premier découvert à ce jour est : <output id="result"></output></p>
<script>
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
document.getElementById('result').textContent = event.data;
};
</script>
</body>
</html>
<html>
<head>
<title>Worker - Exemple de noyau de calcul</title>
</head>
<body>
<p>Le plus grand nombre premier découvert à ce jour est : <output id="result"></output></p>
<script>
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
document.getElementById('result').textContent = event.data;
};
</script>
</body>
</html>
Le fichier worker.js :
var n = 1;
search: while(true) {
n += 1;
for (var i = 2; i <= Math.sqrt(n); i += 1)
if (n % i == 0)
continue search;
// trouve un nombre premier!
postMessage(n);
}
search: while(true) {
n += 1;
for (var i = 2; i <= Math.sqrt(n); i += 1)
if (n % i == 0)
continue search;
// trouve un nombre premier!
postMessage(n);
}
> Essayez-le !
Attention, si vous testez ce code avec le moteur Webkit (qui est utilisé par Chrome et Safari), vous devez mettre la page en ligne. Car webkit refuse d'utiliser les web-workers en local !
Shared-Workers
Contrairement aux dedicated-workers (workers dédiés), les shared-workers (workers partagés) peuvent être contrôlés par plusieurs threads.Il est donc possible de créer plusieurs références vers le même worker, et ces références peuvent même provenir de pages différentes.
Voici la page HTML (Exemple du Hello World !)
<!DOCTYPE HTML>
<title>exemple de Shared workers</title>
<pre id="log">Message :</pre>
<script type="text/javascript">
var worker = new SharedWorker('test-shared-workers.js');
var log = document.getElementById('log');
worker.port.onmessage = function(e) { // note: not worker.onmessage!
log.textContent += '\n' + e.data;
}
</script>
<title>exemple de Shared workers</title>
<pre id="log">Message :</pre>
<script type="text/javascript">
var worker = new SharedWorker('test-shared-workers.js');
var log = document.getElementById('log');
worker.port.onmessage = function(e) { // note: not worker.onmessage!
log.textContent += '\n' + e.data;
}
</script>
Le fichier test-shared-workers.js
onconnect = function(e) {
var port = e.ports[0];
port.postMessage('Bonjour le Monde!');
var port = e.ports[0];
port.postMessage('Bonjour le Monde!');
> Essayez cet exemple plusieurs fois !
