Maison > interface Web > js tutoriel > Introduction détaillée aux Web Workers en JavaScript

Introduction détaillée aux Web Workers en JavaScript

不言
Libérer: 2018-09-12 17:30:22
original
2320 Les gens l'ont consulté

Cet article vous apporte une introduction détaillée à Web Worker en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Introduction

Les Web Workers fournissent un moyen simple d'exécuter des scripts dans un fil d'arrière-plan pour le contenu Web. Les threads peuvent effectuer des tâches sans interférer avec l'interface utilisateur. De plus, ils peuvent effectuer des E/S à l'aide de XMLHttpRequest (bien que les attributs ResponseXML et Channel soient toujours vides). Une fois créé, un travailleur peut envoyer des messages au code JavaScript qui l'a créé, en publiant le message sur le gestionnaire d'événements spécifié par ce code (et vice versa).

Points clés pour l'utilisation de Web Worker

  • Restriction de même origine : Le fichier script attribué au thread Worker doit avoir la même origine que le fichier script du thread principal.

  • Limitation DOM : L'objet global où se trouve le thread Worker est différent du thread principal. Il ne peut pas lire l'objet DOM de la page Web où se trouve le thread principal, et ne peut pas le faire. utilisez des objets document, fenêtre et parent. Cependant, les threads de travail peuvent parcourir les objets de navigation et les objets de localisation.

  • Communication : Le fil Worker et le fil principal ne sont pas dans le même contexte, ils ne peuvent pas communiquer directement et doivent être complétés par des messages.

  • Limitation du script : le thread de travail ne peut pas exécuter la méthode alert() et la méthode confirm(), mais peut utiliser l'objet XMLHttpRequest pour émettre une requête AJAX.

  • Restrictions de fichiers : Le thread Worker ne peut pas lire les fichiers locaux, c'est-à-dire qu'il ne peut pas ouvrir le système de fichiers local (fichier://). Le script qu'il charge doit provenir du réseau. Nous y reviendrons plus tard.

Installer le serveur http

Le thread de travail ne peut pas lire les fichiers locaux, c'est-à-dire qu'il ne peut pas ouvrir le système de fichiers local (fichier://) et le script ça charge, ça doit venir d'Internet. Nous pouvons donc nous permettre un projet. Utilisationhttp-serverLa plus simple
Installation :

> cnpm i -g http-server
Copier après la connexion

Utilisation :

> http-server
Copier après la connexion

Utilisation de base

Nous créons un nouveau dossier nommé worker, Le trois nouveaux fichiers à l'intérieur sont

index.html
main.js
worker.js
Copier après la connexion

Créer un fil de discussion worker est très simple, il suffit de :

var worker = new Worker('worker.js')
Copier après la connexion

main.js :

var worker = new Worker('./worker.js')
console.log('worker running')
worker.addEventListener('message',e => {
    console.log('main: ', e.data);
})
// 也可使用:
// worker.onmessage = (e)=>{
//     console.log('main: ', e.data);
// }
worker.postMessage('hello worker,I am from main.js')
Copier après la connexion

worker.js:

console.log('worker task running')
onmessage = (e)=>{
    console.log('worker task receive', e.data);
    // 发送数据事件
    postMessage('Hello, I am from Worker.js');
}
Copier après la connexion

Dans le dossier worker, saisissez http-server sur la ligne de commande, démarrez le projet, ouvrez-le avec un navigateur et regardez la console :

worker running
worker task running
worker task receive hello worker,I am from main.js
main:  Hello, I am from Worker.js
Copier après la connexion

D'en haut, vous pouvez voir, worker surveille les données via onmessage et envoie des données via postMessgae

met fin au travailleur

worker.terminate();
Copier après la connexion

gère les erreurs

worker.addEventListener('error',  (e) => {
  console.log('main error', 'filename:' + e.filename + 'message:' + e.message + 'lineno:' + e.lineno;
});
Copier après la connexion
  • event.filename : le nom du script Worker qui a provoqué l'erreur

  • event.message : le mauvais message ;

    event .lineno : numéro de ligne où l'erreur s'est produite
  • Charger le script externe
main.js

worker1.js

var worker = new Worker('./worker1.js');
Copier après la connexion

worker2.js

console.log("I'm worker1")
importScripts('worker2.js', 'worker3.js');
// 或者
// importScripts('worker2.js');
// importScripts('worker3.js');
Copier après la connexion

worker3.js

console.log("I'm worker2")
Copier après la connexion

Compatibilité

console.log("I'm worker3")
Copier après la connexion
https://caniuse.com/#feat =webworkers

La compatibilité n'est pas très optimiste, mais la compatibilité sur le terminal mobile est plutôt bonne

Recommandations associées :

Recherche d'API multi-thread des Web Workers en compétences JavaScript_javascript


Introduction détaillée aux cours de compétences JavaScript_javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal