JavaScriptLe langage utilise un seul thread Modèle, c'est-à-dire que toutes les tâches sont disposées dans une file d'attente, et qu'une seule chose peut être faite à la fois. À mesure que la puissance de calcul des ordinateurs augmente, cela entraîne de grands inconvénients. . Le potentiel de JavaScript ne peut pas être pleinement utilisé. Cela est particulièrement vrai étant donné que Fichier API permet à JavaScript de lire des fichiers locaux. Il s'agit de créer un environnement multithread pour JavaScript, permettant ainsi. le thread principal pour attribuer certaines tâches aux sous-threads Pendant que le thread principal est en cours d'exécution, les sous-threads s'exécutent en arrière-plan et les deux n'interfèrent pas jusqu'à ce que le sous-thread termine la tâche de calcul et renvoie ensuite le. résultats. Fil principal. Par conséquent, chaque sous-thread est comme un "worker", accomplissant son travail en silence
Web Worker a les caractéristiques suivantes :
<. restriction de domaine : le fichier script charg par sous-thread doit dans m que du thread principal class=" list-paddingleft-2">Limitation du script : le thread enfant ne peut pas lire la page globale de la page Web. Les variables et les fonctions ne peuvent pas exécuter les méthodes d'alerte et de confirmation, mais elles peuvent exécuter setInterval et setTimeout et utiliser l'objet XMLHttpRequest pour effectuer des requêtes AJAX. >
Limitation des fichiers : les threads enfants ne peuvent pas lire les fichiers locaux. Autrement dit, le thread enfant ne peut pas ouvrir le système de fichiers local (file://) et le script qu'il charge doit provenir du réseau.
Avant de l'utiliser, vérifiez si le navigateur prend en charge cette API. Les navigateurs pris en charge incluent IE 10+, Firefox 3.6+, Safari 4.0+, Chrome et Opera 11, mais les navigateurs mobiles ne le sont pas encore. pris en charge.
if (window.Worker) { // 支持} else { // 不支持}var worker = new Worker('work.js');
chaîne
, soit d'un objet.worker.postMessage('hello world');
3. surveillance des événements
du sous-threadworker.postMessage({method: 'each', args: ['work']});//File: work.jsself.addEventListener('message', function(e) {
self.postMessage('You said: ' + e.data);
}, false);est un objet événement, et son attribut data contient le signal envoyé par le thread principal. self.postMessage signifie que le thread enfant envoie un signal au thread principal. Selon les différentes valeurs de signal envoyées par le thread principal, le sous-thread peut appeler différentes méthodes.
4. Surveillance des événements du thread principal Le thread principal doit également spécifier une fonction de rappel pour l'événement de message afin d'écouter les signaux envoyés par le thread enfant.'message', method = args = reply =);
Gestion des erreurs
// File: main.jsworker.addEventListener('message', function(e) {
console.log(e.data);
}, false);worker.onerror(function(e) {
console.log(e);
});// orworker.addEventListener('error', function(e) {
console.log(e);
}, false);worker.terminate();
self.close();
Le thread principal et le sous-thread peuvent également échanger des données binaires, telles que File, Blob, ArrayBuffer et d'autres objets, qui peuvent également être envoyés entre les threads.
但是，用拷贝方式发送二进制数据，会造成性能问题。比如，主线程向子线程发送一个500MB文件，默认情况下浏览器会生成一个原文件的拷贝。为了解决这个问题，JavaScript允许主线程把二进制数据直接转移给子线程，但是一旦转移，主线程就无法再使用这些二进制数据了，这是为了防止出现多个线程同时修改数据的麻烦局面。这种转移数据的方法，叫做Transferable Objects。
如果要使用该方法，postMessage方法的最后一个参数必须是一个数组，用来指定前面发送的哪些值可以被转移给子线程。
worker.postMessage(arrayBuffer, [arrayBuffer]);
通常情况下，子线程载入的是一个单独的JavaScript文件，但是也可以载入与主线程在同一个网页的代码。假设网页代码如下：
<!DOCTYPE html>
<body>
<script id="worker" type="app/worker">
addEventListener('message', function() {
postMessage('Im reading Tech.pro');
}, false); </script>
</body></html>我们可以读取页面的script，用worker来处理。
var blob = new Blob([document.querySelector('#workere').textContent]);
这里需要把代码当作二进制数据读取，所以使用Blob接口。然后，这个二进制对象转为URL，再通过这个URL创建worker。
var url = window.URL.createObjectURL(blob);var worker = new Worker(url);
部署事件监听代码。
worker.addEventListener('message', function(e) {
console.log(e.data);
}, false);最后启动worker。
worker.postMessage('');
整个页面的代码如下：
<script>
(function() {
var blob = new Blob([document.querySelector('#worker').textContent]);
var url = window.URL.createObjectURL(blob);
var worker = new Worker(url);
worker.addEventListener('message', function(e) {
console.log(e.data);
}, false);
worker.postMessage(&#39;&#39;);
})(); </script>