Nouvelles fonctionnalités HTML5 Web Worker

1. Présentation

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">

Restriction DOM : Le sous-thread ne peut pas lire le DOM. l'objet de la page Web restreinte. Autrement dit, les objets document, window et parent ne peuvent pas être obtenus par le thread enfant (cependant, l'objet navigateur et l'objet location peuvent être obtenus.)

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.

2. Créez et démarrez des threads enfants

Dans le fil de discussion principal, utilisez la commande

if (window.Worker) {    // 支持} else {    // 不支持}

new

pour appeler la méthode Worker pour créer un nouveau sous. -thread. Le paramètre de la méthode

Worker est un fichier de script, ce dont le sous-thread a besoin. La tâche terminée dans le code ci-dessus est work.js puisque le thread enfant ne peut pas lire. le système de fichiers local, le fichier de script doit provenir du côté réseau. Si le téléchargement échoue, comme une erreur 404, le thread enfant échouera silencieusement.

Une fois le sous-thread créé, il n'est pas démarré. Il doit attendre que le thread principal appelle la méthode postMessage, c'est-à-dire qu'il ne démarrera pas tant qu'un signal ne sera pas envoyé.

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

Le paramètre de la méthode postMessage est le signal transmis par le thread principal au thread enfant. Il peut s'agir soit d'une

chaîne

, soit d'un objet.

worker.postMessage('hello world');

3. surveillance des événements

du sous-thread

worker.postMessage({method: 'each', args: ['work']});

Dans le sous-thread, il doit y avoir une fonction de rappel pour écouter le événement de message.

self représente le sous-thread lui-même, et self.addEventListener représente la spécification d'une fonction de rappel pour l'événement de message du sous-thread (vous pouvez également spécifier directement la valeur de l'attribut onmessage

). Le paramètre

//File: work.jsself.addEventListener('message', function(e) {

    self.postMessage('You said: ' + e.data);

}, false);

de la fonction de rappel

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

5.

Gestion des erreurs

// File: main.jsworker.addEventListener('message', function(e) {
    console.log(e.data);
}, false);

Le thread principal peut surveiller si une erreur se produit dans le thread enfant. Si une erreur se produit, l'événement d'erreur du thread principal sera déclenché.

6. Fermez le thread enfant

Après utilisation, afin d'économiser les ressources système, nous devons appeler la méthode de terminaison sur le thread principal pour fermer manuellement le thread enfant.

worker.onerror(function(e) {
    console.log(e);
});// orworker.addEventListener('error', function(e) {
    console.log(e);
}, false);

Vous pouvez également se fermer en interne dans le fil enfant.

worker.terminate();

7. Communication de données entre le thread principal et les sous-threads

Le contenu de la communication entre le thread principal et les sous-threads peut être du texte ou des objets. Il convient de noter que cette communication est une relation de copie, c'est-à-dire que

self.close();

transmet la valeur

au lieu de l'adresse. Les modifications du contenu de la communication par le sous-thread n'affecteront pas le thread principal. En fait, le mécanisme de fonctionnement interne du navigateur consiste d'abord à sérialiser le contenu de la communication, puis à envoyer la chaîne sérialisée au thread enfant, qui la restaure ensuite.

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

8、同页面的Web Worker

通常情况下，子线程载入的是一个单独的JavaScript文件，但是也可以载入与主线程在同一个网页的代码。假设网页代码如下：

<!DOCTYPE html>
    <body>
        <script id="worker" type="app/worker">

            addEventListener(&#39;message&#39;, function() {
                postMessage(&#39;Im reading Tech.pro&#39;);
            }, 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(&#39;#worker&#39;).textContent]);                
            var url = window.URL.createObjectURL(blob);                
            var worker = new Worker(url);

                worker.addEventListener(&#39;message&#39;, function(e) {
                    console.log(e.data);
                }, false);

                worker.postMessage(&amp;#39;&amp;#39;);
            })();        </script>
    

可以看到，主线程和子线程的代码都在同一个网页上面。

上面所讲的Web Worker都是专属于某个网页的，当该网页关闭，worker就自动结束。除此之外，还有一种共享式的Web Worker，允许多个浏览器窗口共享同一个worker，只有当所有窗口关闭，它才会结束。这种共享式的Worker用SharedWorker对象来创建，因为适用场合不多，这里就省略了。

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!