Raid sur l'extension 1 de l'API Javascript HTML5 – Exécution asynchrone de Web Worker et compétences du didacticiel Overview

Mécanisme d'exécution Javascript
Avant HTML5, l'exécution de JavaScript dans les navigateurs fonctionnait de manière monothread, bien qu'il existe de nombreuses façons de simuler le multi-threading (par exemple : dans la méthode setinterval Javascript, la méthode setTimeout , etc.), mais en substance, l'exécution du programme est toujours effectuée par le moteur JavaScript de manière planifiée à un seul thread. Le thread de travail introduit dans HTML5 permet au moteur Javascript côté navigateur d'exécuter du code Javascript simultanément, obtenant ainsi une bonne prise en charge de la programmation multithread côté navigateur.

Threads multiples en Javascript - WebWorker
Web Worker en HTML5 peut être divisé en deux types de threads différents, l'un est un thread dédié Dedicated Worker et l'autre est un thread partagé Partagé Travailleur. Les deux types de threads répondent à des objectifs différents.
Travailleur Web dédié
Un travailleur dédié est connecté au script qui l'a créé. Il peut communiquer avec d'autres travailleurs ou composants du navigateur, mais il ne peut pas communiquer avec le DOM. La signification de dédié, je pense, est que ce fil ne gère qu'une seule exigence à la fois. Les threads dédiés sont implémentés dans divers navigateurs grand public, à l'exception d'IE, et peuvent être utilisés en toute confiance.
Créer un thread
Créer un travailleur est très simple. Il suffit de transmettre le nom du fichier JavaScript qui doit être exécuté dans le thread au constructeur.
Communication par thread
Pour communiquer entre le thread principal et le sous-thread, les méthodes postMessage et onmessage de l'objet thread sont utilisées. Peu importe qui envoie des données à qui, l'expéditeur utilise la méthode postMessage et le destinataire utilise la méthode onmessage pour recevoir des données. postMessage n'a qu'un seul paramètre, qui correspond aux données transférées, et onmessage n'a également qu'un seul paramètre. S'il s'agit d'un événement, les données reçues sont obtenues via event.data.
Envoyer des données JSON
JSON est quelque chose de pris en charge nativement par JS. Il n'est pas nécessaire de l'utiliser en vain. Utilisez JSON pour transmettre des données complexes. Par exemple :

Copier le code

Le code est le suivant :

postMessage({ 'cmd': 'init', 'timestamp': Date.now()});

Gestion des erreurs
Lorsqu'une erreur se produit dans un fil, c'est une erreur le rappel d'événement sera appelé. La façon de gérer les erreurs est donc très simple : elle consiste à accrocher l'événement onerror de l'instance de thread. Cette fonction de rappel a un paramètre error, qui comporte 3 champs : message - le nom du fichier d'erreur ; le fichier de script où l'erreur s'est produite ;
Détruisez le fil
À l'intérieur du fil, utilisez la méthode close pour se détruire. Dans le thread principal en dehors du thread, utilisez la méthode terminate de l'instance de thread pour détruire le thread.
Regardons le fonctionnement de base des threads à partir d'un exemple :
Code HTML :

Copier le code

Le code est le suivant :

content="text/ html; charset=utf-8" />
web worker fibonacci

Code fibonacci.js :

Copier le code

Le code est le suivant :

/ /fibonacci.js var fibonacci = function(n) { return n < 2 ? n : arguments.callee(n - 1) arguments.callee(n - 2>); >onmessage = function(event) { var n = parseInt(event.data, 10);

postMessage(fibonacci(n));

Mettez-les dans le même répertoire et exécutez la page Fichier, vérifiez la console, vous pouvez voir les résultats de l'opération.
Une dernière chose ici est que dans le fil de discussion principal, l'événement onmessage peut être accroché d'une autre manière :

Copier le code

Le code est le suivant :

worker.addEventListener('message', function(event) {

console.log("Result:" event.data);

}, faux );
Personnellement, je pense que c'est très gênant, donc il vaut mieux utiliser directement onmessage.
Utilisation d'autres fichiers de script
Les threads de travail peuvent utiliser la méthode globale importScripts pour charger et utiliser d'autres fichiers de script ou bibliothèques de classes du domaine. Par exemple, les utilisations suivantes sont légales :

Copiez le code

Le code est le suivant :

importScripts();/* n'importe rien */
importScripts('foo.js'); /* importe juste "foo.js" */
importScripts('foo.js', 'bar .js') ;/* importe deux scripts */

Après l'importation, vous pouvez utiliser directement les méthodes de ces fichiers. Regardez un petit exemple en ligne :

Copiez le code

Le code est le suivant :

/* *
* Utilisez la méthode importScripts pour introduire des scripts de ressources externes. Ici, nous utilisons la bibliothèque d'outils de calcul de formules mathématiques math_utilities.js
* Lorsque le moteur JavaScript a fini de charger ce fichier de ressources, continuez à exécuter le code suivant. En même temps, le code suivant peut accéder et appeler
* variables et méthodes définies dans les fichiers de ressources.
**/
importScripts('math_utilities.js');
onmessage = function (event)
{
var first = event.data.first
var second = event .data.second;
calculate(first,second);
};
function calculate(first,second) {
//faire le travail de calcul
var common_divisor= divisor(first, second);
var common_multiple=multiple(first,second);
postMessage("Travail effectué ! "
"Le plus petit commun multiple est " common_divisor
" et le plus grand commun diviseur est " common_multiple) ;
}

Certains internautes sur Internet ont également pensé à utiliser ici la méthode importScripts pour résoudre le problème de préchargement des ressources (le navigateur charge la ressource à l'avance sans analyser ni exécuter la ressource). La raison est également très simple.
Imbrication de threads
Vous pouvez également créer des sous-threads dans le thread de travail, et les différentes opérations sont toujours les mêmes.
Problèmes de synchronisation
Worker n'a pas de mécanisme de verrouillage et les problèmes de synchronisation multi-thread ne peuvent être résolus que par du code (comme la définition de variables de signal).
SharedWebWorker
Shared Web Worker est principalement adapté aux problèmes de concurrence multi-connexions. Parce qu'il doit gérer plusieurs connexions, son API est légèrement différente de celle d'un travailleur dédié. En dehors de cela, les travailleurs Web partagés, comme les travailleurs dédiés, n'ont pas accès au DOM et ont un accès limité aux propriétés des formulaires. Les travailleurs Web partagés ne peuvent pas non plus communiquer sur le réseau.
Les scripts de page peuvent communiquer avec des Web Workers partagés. Cependant, à la différence des Web Workers dédiés (qui utilisent un port implicite pour communiquer), la communication est explicite via l'utilisation d'un objet port et cela se fait en attachant un gestionnaire d'événements de message. .
Après avoir reçu le premier message du script du Web Worker, le Web Worker partagé attache un gestionnaire d'événements au port activé. Normalement, le gestionnaire exécutera sa propre méthode postMessage() pour renvoyer un message au code appelant, puis la méthode start() du port générera un processus de message valide.
Regardez le seul exemple que je puisse trouver sur Internet : créez un fil de discussion partagé pour recevoir les instructions envoyées par différentes connexions, puis implémentez votre propre logique de traitement des instructions. Une fois le traitement des instructions terminé, les résultats sont renvoyés les uns aux autres. utilisateur de connexion.
Code HTML :

Copier le code

Le code est le suivant :

Exemple de travailleur partagé : comment utiliser un travailleur partagé en HTML5
<script> var worker = new SharedWorker('sharedworker.js'); var log = document.getElementById('response_from_worker'); worker.port.addEventListener('message', function(e) { //enregistre les données de réponse dans la page Web log.textContent =e.data; }, false); worker.port.start(); worker.port.postMessage('ping depuis la page Web de l'utilisateur..'); //la méthode suivante enverra l'entrée de l'utilisateur à sharedworker function postMessageToSharedWorker(input) { //définit un objet json pour construire la requête var instructions={instruction:input.value } ; worker.port.postMessage(instructions); } </script>

Exemple de travailleur partagé : comment utiliser un travailleur partagé en HTML5

envoyer des instructions au travailleur partagé :

脚本文件代码：

复制代码

代码如下:

//
var connect_number = 0;
onconnect = function(e) {
connect_number =connect_number 1;
//récupérez le premier port ici
var port = e.ports[0];
port.postMessage('Une nouvelle connexion ! Le numéro de connexion actuel est '
connect_number);
port.onmessage = function(e) {
//obtenir les instructions du demandeur
var instruction=e.data.instruction;
var results=execute_instruction(instruction);
port.postMessage('Demande : 'instruction 'Réponse' résultats
'du travailleur partagé...');
} ;
} ;
/*
* cette fonction sera utilisée pour exécuter les instructions envoyées par le demandeur
* @param instruction
* @return
*/
function execute_instruction(instruction)
{
var result_value ;
//implémentez votre logique ici
//exécutez l'instruction...
return result_value；
}

Dans l'exemple de fil partagé ci-dessus, un objet de fil partagé est construit sur la page principale, c'est-à-dire sur chaque page de connexion utilisateur, puis une méthode postMessageToSharedWorker est définie pour envoyer des instructions utilisateur au fil partagé. Dans le même temps, connect_number est défini dans l’extrait de code d’implémentation du thread partagé pour enregistrer le nombre total de connexions à ce thread partagé. Après cela, utilisez le gestionnaire d'événements onconnect pour accepter les connexions de différents utilisateurs et analyser les instructions transmises par eux. Enfin, une méthode execute_instruction est définie pour exécuter les instructions de l'utilisateur. Une fois l'instruction exécutée, les résultats sont renvoyés à chaque utilisateur.

Ici, nous n'utilisons pas le gestionnaire d'événements onmessage du thread de travail comme dans l'exemple précédent, mais utilisons une autre méthode addEventListener. En fait, comme mentionné précédemment, les principes d'implémentation des deux sont fondamentalement les mêmes, mais il existe ici quelques légères différences. Si addEventListener est utilisé pour accepter les messages provenant de threads partagés, alors la méthode worker.port.start() doit être utilisée. d'abord pour activer ce port. Après cela, vous pouvez recevoir et envoyer des messages normalement de la même manière qu'un thread de travail.
Déclaration finale
Choses qui peuvent être faites dans le fil :
1 Vous pouvez utiliser setTimeout(), clearTimeout(), setInterval(), clearInterval. (), etc. fonction.
2. Peut utiliser un objet navigateur.
3. Peut utiliser XMLHttpRequest pour envoyer des requêtes.
4. Le stockage Web peut être utilisé dans les threads.
5. Vous pouvez utiliser self dans un fil de discussion pour obtenir la portée de ce fil.
Choses qui ne peuvent pas être faites dans les threads :
1. Les objets DOM/BOM autres que le navigateur ne peuvent pas être utilisés dans les threads, tels que la fenêtre et le document (si vous souhaitez opérer, vous ne pouvez que le faire). envoyer des messages aux travailleurs Créateur, actionnés via la fonction de rappel).
2. Les variables et fonctions du thread principal ne peuvent pas être utilisées dans les threads.
3. Les commandes d'opération avec des effets de "suspension", tels que des alertes, etc., ne peuvent pas être utilisées dans les threads.
4. JS ne peut pas être chargé sur plusieurs domaines dans un fil de discussion.
Les threads consomment également des ressources, et leur utilisation apportera également une certaine complexité, donc s'il n'y a aucune bonne raison d'utiliser des threads supplémentaires, ne les utilisez pas.
Référence pratique
Documentation officielle : http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html
Description de la classification WebWorker : http://www.w3schools.com/html5/html5_webworkers.asp
Script House : http://www.jb51.net/w3school/html5/
Présentation de WebWorker : https://developer.mozilla.org/en/Using_web_workers

Raid sur l'extension 1 de l'API Javascript HTML5 – Exécution asynchrone de Web Worker et compétences du didacticiel Overview_html5 associées