Introduction détaillée aux Web Workers en JavaScript

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

Utilisation :

> http-server

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

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

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

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')

worker.js:

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

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

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();

gère les erreurs

worker.addEventListener('error',  (e) => {
  console.log('main error', 'filename:' + e.filename + 'message:' + e.message + 'lineno:' + e.lineno;
});

• 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');

worker2.js

console.log("I'm worker1")
importScripts('worker2.js', 'worker3.js');
// 或者
// importScripts('worker2.js');
// importScripts('worker3.js');

worker3.js

console.log("I'm worker2")

Compatibilité

console.log("I'm worker3")

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!