Que sont les travailleurs du Web?

Cet article concerne l'utilisation des travailleurs Web et leur importance dans HTML5.Le moteur de script Java est construit avec un seul thread et il n'y a aucun processus simultané derrière eux (aucun autre processus n'est exécuté jusqu'à ce que le premier processus soit terminé). Comme javascript s'exécute au premier plan et rend la page Web chronophage. Par conséquent, pour éviter ce gros problème, HTML5 a mis au point une nouvelle technologie nommée Web Workers. Il s'agit d'un petit script d'arrière-plan qui effectue des calculs à des tâches coûteuses sans intervenir dans l'interface utilisateur ou les performances de la page Web. Ce fil isolé est relativement léger et est pris en charge dans tous les navigateurs Web. Cela fait HTML pour démarrer des threads supplémentaires.

Types de travailleurs Web en HTML5

Les travailleurs du Web sont également appelés «travailleurs dévoués». Ils ont obtenu un modèle de mémoire partagée distinct. En d'autres termes, nous pouvons dire qu'une étendue javascript entière s'est déroulée sur un seul thread. En travaillant dans un navigateur Web, nous avons rencontré un message de dialogue de piste en raison d'un traitement intensif de la page. Pour fournir une bonne solution, l'API HTML du navigateur Web a défini des calculs différents en même temps.

Trois types importants de travailleurs Web sont indiqués ci-dessous:

1. Travailleur Web partagé

Ce type utilise l'API et chaque unité de travailleur a plusieurs connexions lors de l'envoi d'un message (plusieurs scripts) à condition que chaque contexte soit de la même origine. La prise en charge du navigateur pour ce travailleur est limitée. Ils sont appelés en utilisant le constructeur shared () partagé.

2. Travailleur Web dédié

La création d'un fichier est très simple en appelant simplement un constructeur avec son chemin source. Ils utilisent la communication de message appelée méthode post message () lors du transfert de message. Même les gestionnaires d'événements sont utilisés lorsqu'un auditeur a lieu. Le gestionnaire onmessage () a été utilisé pour recevoir un message.

3. Travailleur des services

Ce travailleur n'interagit pas directement avec la page Web et s'exécute en arrière-plan. Ils peuvent restaurer à tout moment et agissent comme un proxy, ils sont accessibles par plusieurs threads.

Comment créer un fichier Web Workers?

Ils ne prennent pas en charge certaines fonctionnalités comme l'objet fenêtre, DOM, l'objet parent. Toutes les fonctions se font en en passant une réplique.

Étape 1: pour créer un constructeur Worker () d'importation de fichiers Un fichier est créé à l'aide d'un nouvel objet et le script ressemble à.

var worker = new Worker(sample.js);

Étape 2: Création d'un message de publication (). Les fichiers de travail créés appellent automatiquement la méthode post message (). Les méthodes post message () dirigent le message vers le thread principal. Et de même, nous pouvons envoyer un message du thread principal au thread de travail. Par ici, l'ouvrier commence.

worker. postMessage();

Étape 3: Ensuite, lancez le gestionnaire d'événements, pour autoriser le message du travailleur Web.

worker. onmessage = function(event)

Désormais, nous avons vu comment envoyer et recevoir des messages. Voyons maintenant comment terminer le travailleur au milieu du processus.

Étape 4: pour arrêter le processus.

worker.terminate()

Étape 5: pour implémenter un scénario de gestion des erreurs utilisé par le travailleur.

Worker.onerror();

9 principales fonctionnalités des travailleurs Web HTML5

  1. Les travailleurs du Web étant un protocole asynchrone, ils étaient les mieux adaptés pour effectuer des tâches de calcul et considérés comme les fonctionnalités professionnelles de Javascript.
  2. Les travailleurs Web paient une plate-forme d'exécution stricte pour les fenêtres mobiles et de bureau, permettant d'exécuter la page Web sans geler la page Web dans les navigateurs.
  3. Le principal avantage est que nous pouvons exécuter des processus coûteux au sein d'un seul thread individuel qui n'interrompt pas le thread principal en cours d'exécution.
  4. Les Web-Workers sont de petits threads légers qui entrelacent individuellement l'interface utilisateur.
  5. Les Web-Workers étant des threads orientés noyau aident à atteindre les hautes performances de la page des navigateurs.
  6. Les travailleurs Web aident à créer une programmation parallèle et effectuent des actions multithreads.
  7. Les travailleurs Web améliorent la vitesse de l'application Java JScript.
  8. Web-worker est considéré comme un script côté client et utilisé plus haut dans les applications de jeux.
  9. Les threads de travail Web communiquent entre eux à l'aide de la méthode de rappel post Message ().

Exemples de travailleurs Web HTML5

Les travailleurs Web ont accès au navigateur, XMLHTTP Request, Navigator en raison de leurs activités de multi-traitement. L'exemple ci-dessous se concentre sur les types de travailleurs dédiés à démontrer.

Exemple 1

Affiche un exemple de fichier Worker Démontrant le fonctionnement du navigateur.

Code:



Web Worker Demo

Validating the browser compatibility of Web Browsers

Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)



Web Worker Demo

Validating the browser compatibility of Web Browsers

Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)



Web Worker Demo

Validating the browser compatibility of Web Browsers

Submit
function worker_demo()
(
if(typeof(Worker)!=="undefined")(
document.getElementById("yes").innerHTML=" Browser Supports";
)
else
(
document.getElementById("NO").innerHTML="Browser Not Supporting the workers";)
)

Production:

Exemple # 2

L'exemple suivant montre comment les tâches de travail s'exécutent derrière la tâche à l'aide de la classe et le décompte est effectué pour les tâches de travail. Les tâches de travail mettent automatiquement à jour la page Web sur chaque boucle jusqu'à la fin de la boucle. Pour terminer l'exécution du travailleur, terminate () est utilisé ici.

Le travail effectué en arrière-plan par le travailleur Web:

Code:

wrk.html




Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )

start worker terminate

start blocking thread

test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)

Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)


Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )

start worker terminate

start blocking thread

test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)

Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)


Web Workers Demo
body (padding-top:18px;)
.output-cont (margin-left:12%; margin-top:28px;)
.output-cont h2 (width:150px; height:95%;)
.output-cont button (padding:3px 7px; font-size:1.3rem; font-family:sans-serif; )

start worker terminate

start blocking thread

test responsiveness
var worker;
function testWork() (
if (typeof(Worker) !== "undefined") (
if (typeof(worker) == "undefined") (
worker = new Worker("demo.js");
)
worker.onmessage = function(event) (
document.getElementById("wOutput").innerHTML = event.data;
);
) else (
document.getElementById("wOutput").innerHTML = "Web Workers are unsupported";
)
)
function stopWorker() (
worker.terminate();
worker = undefined;
)
function test() (
for (var j = 0; j < 20000; j++) (
document.getElementById("mainThreadOutput").innerHTML = "Main Thread Counter: " + j;
)
)

Next creating an separate external javascript file demo.js and the code comes as shown.
demo.js
j = 0;
while (j < 200000)
( postMessage("Web Worker Counter: " + j);
j++;
)

Production:

Conclusion

À la fin, nous avons vu comment les travailleurs Web travaillent indépendamment du fil principal qui aide les organisations Web à créer des applications exigeantes. Et il est fortement recommandé d'utiliser des travailleurs Web en javascript pour les tâches lourdes. Il est conseillé de fermer le navigateur Web lorsqu'il n'est plus utilisé pour consommer les ressources système.

Article recommandé

Ceci est un guide pour les travailleurs Web HTML5. Nous discutons ici des 9 principales fonctionnalités de HTML5 Web Workers et de ses exemples avec implémentation de code. Vous pouvez également consulter nos articles suggérés pour en savoir plus -

  1. Nouveaux éléments Html5 | Top 10
  2. Cadres HTML avec syntaxe
  3. Introduction aux avantages du HTML
  4. Top 10 des questions et réponses d'entrevue HTML5

Catégorie:

Outils de développement Web