Maison > Article > interface Web > Tutoriel d'exemple d'utilisation de HTML5 Web Worker

Tutoriel d'exemple d'utilisation de HTML5 Web Worker

小云云original: 2018-01-08 11:20:411640parcourir

Web Worker est une solution multithread javascript fournie par HTML5. Nous pouvons exécuter des codes gourmands en calcul sur le Web Worker sans geler l'interface utilisateur. Cet article présente principalement l'utilisation de HTML5 Web Worker. L'éditeur pense que c'est plutôt bien. Je vais maintenant le partager avec vous et vous donner une référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

1 : Comment utiliser Worker

Le principe de base de Web Worker est d'utiliser la classe Worker pour charger un fichier javascript dans le thread principal actuel de javascript pour l'ouvrir un nouveau thread , obtient l'effet d'exécution non bloquante et fournit une interface pour l'échange de données entre le thread principal et le nouveau thread : postMessage, onmessage.

Alors comment l'utiliser, regardons un exemple :

//worker.js
onmessage =function (evt){
  var d = evt.data;//通过evt.data获得发送来的数据
  postMessage( d );//将获取到的数据发送会主线程
}

Page HTML : test.html

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <script type="text/javascript">
//WEB页主线程
var worker =new Worker("worker.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
 worker.postMessage("hello world");     //向worker发送数据
 worker.onmessage =function(evt){     //接收worker传过来的数据函数
   console.log(evt.data);              //输出worker发送来的数据
 }
 </script>
 </head>
 <body></body>
</html>

Après avoir ouvert test.html avec le navigateur Chrome, la sortie de la console "hello world" indique que l'exécution du programme a réussi.

À travers cet exemple, nous pouvons voir que l'utilisation des Web Workers est principalement divisée en les parties suivantes

Thème principal WEB :

1. Charger un through worker = new Worker( url. ) Fichier JS pour créer un travailleur et renvoyer une instance de travail.

2. Envoyez les données au travailleur via la méthode worker.postMessage(data).

3. Liez la méthode worker.onmessage pour recevoir les données envoyées par le travailleur.

4. Vous pouvez utiliser worker.terminate() pour terminer l'exécution d'un travailleur.

Nouveau fil de travail :

1. Envoyez les données au fil principal via la méthode postMessage(data).

2. Liez la méthode onmessage pour recevoir les données envoyées par le thread principal.

2 : Que peut faire Worker

Maintenant que nous savons comment utiliser Web Worker, à quoi sert-il et peut-il nous aider à résoudre ces problèmes. Regardons un exemple de la séquence de Fibonacci.

Tout le monde sait qu'en mathématiques, la suite de Fibonacci est définie de manière récursive : F0=0, F1=1, Fn=F(n-1)+F(n-2) (n>=2, n∈ N*), et l'implémentation courante de javascript est :

var fibonacci =function(n) {
    return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);
};
//fibonacci(36)

L'utilisation de cette méthode dans Chrome pour effectuer la séquence de 39 Fibonacci, le temps d'exécution est de 19097 millisecondes, et à Quand en calculant 40, le navigateur indique directement que le script est occupé.

Étant donné que JavaScript est exécuté dans un seul thread, le navigateur ne peut pas exécuter d'autres scripts JavaScript pendant le processus de recherche de la séquence, et le thread de rendu de l'interface utilisateur sera également suspendu, provoquant l'entrée du navigateur dans un état zombie. Utiliser un web worker pour placer le processus de calcul de la séquence dans un nouveau thread évitera cette situation. Voir l'exemple spécifiquement :

//fibonacci.js
var fibonacci =function(n) {
    return n <2? n : arguments.callee(n -1) + arguments.callee(n -2);
};
onmessage =function(event) {
    var n = parseInt(event.data, 10);
    postMessage(fibonacci(n));
};

Page HTML : fibonacci.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>web worker fibonacci</title>
<script type="text/javascript">
  onload =function(){
      var worker =new Worker(&#39;fibonacci.js&#39;);  
      worker.addEventListener(&#39;message&#39;, function(event) {
        var timer2 = (new Date()).valueOf();
           console.log( &#39;结果：&#39;+event.data, &#39;时间:&#39;+ timer2, &#39;用时：&#39;+ ( timer2  - timer ) );
      }, false);
      var timer = (new Date()).valueOf();
      console.log(&#39;开始计算：40&#39;,&#39;时间:&#39;+ timer );
      setTimeout(function(){
          console.log(&#39;定时器函数在计算数列时执行了&#39;, &#39;时间:&#39;+ (new Date()).valueOf() );
      },1000);
      worker.postMessage(40);
      console.log(&#39;我在计算数列的时候执行了&#39;, &#39;时间:&#39;+ (new Date()).valueOf() );
  }  
  </script>
</head>
<body>
</body>
</html>

Ouvrir dans Chrome fibonacci.html, la console obtient le résultat suivant :

Démarrer le calcul : 40 Heure : 1316508212705
J'ai exécuté l'heure lors du calcul de la séquence : 1316508212734
La fonction timer a exécuté l'heure lors du calcul de la séquence ; Calcul, renvoyez simplement les résultats au thread principal une fois le calcul terminé.

À l'aide de Web Workers, nous pouvons effectuer des opérations complexes et à grande échelle sur le front-end sans affecter l'affichage de la page, et l'invite dégoûtante de script occupé ne s'affichera pas.

L'exemple suivant utilise un travailleur Web pour calculer les pixels de la scène. Lorsque la scène est ouverte, elle est dessinée un par un et un seul travailleur ne calcule qu'une seule valeur de pixel.

Trois : Autres tentatives de Worker

Nous savons déjà que Worker crée un travailleur en recevant une URL, pouvons-nous donc utiliser Web Worker pour faire quelque chose comme jsonp Quant à demandes, tout le monde sait que jsonp charge les données json en insérant des balises de script et que les éléments de script se bloquent pendant le chargement et l'exécution. Ce serait très bien si les Web Workers pouvaient être utilisés pour implémenter le chargement asynchrone.

L'exemple suivant chargera des données JSON de 169,42 Ko via trois méthodes différentes : web worker, jsonp et ajax

Page HTML : / aj/webWorker/worker.html

// /aj/webWorker/core.js
function $E(id) {
    return document.getElementById(id);
}
onload =function() {
    //通过web worker加载
    $E(&#39;workerLoad&#39;).onclick =function() {
        var url =&#39;http://js.wcdn.cn/aj/mblog/face2&#39;;
        var d = (new Date()).valueOf();
        var worker =new Worker(url);
        worker.onmessage =function(obj) {
            console.log(&#39;web worker: &#39;+ ((new Date()).valueOf() - d));
        };
    };
    //通过jsonp加载
    $E(&#39;jsonpLoad&#39;).onclick =function() {
        var url =&#39;http://js.wcdn.cn/aj/mblog/face1&#39;;
        var d = (new Date()).valueOf();
        STK.core.io.scriptLoader({
            method:&#39;post&#39;,
            url : url,
            onComplete : function() {
                console.log(&#39;jsonp: &#39;+ ((new Date()).valueOf() - d));
            }
        });
    };
    //通过ajax加载
    $E(&#39;ajaxLoad&#39;).onclick =function() {
        var url =&#39;http://js.wcdn.cn/aj/mblog/face&#39;;
        var d = (new Date()).valueOf();
        STK.core.io.ajax({
            url : url,
            onComplete : function(json) {
                console.log(&#39;ajax: &#39;+ ((new Date()).valueOf() - d));
            }
        });
    };
};

Set HOST

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Worker example: load data</title>
<script src="http://js.t.sinajs.cn/STK/js/gaea.1.14.js" type="text/javascript"></script>
<script type="text/javascript" src="http://js.wcdn.cn/aj/webWorker/core.js"></script>
</head>
<body>
    <input type="button" id="workerLoad" value="web worker加载"></input>
    <input type="button" id="jsonpLoad" value="jsonp加载"></input>
    <input type="button" id="ajaxLoad" value="ajax加载"></input>
</body>
</html>

127.0.0.1 js.wcdn.cn

Accéder à la page via http://js.wcdn.cn/aj/webWorker/worker.html, puis chargez les données de trois manières pour obtenir la sortie de la console :

Après avoir essayé plusieurs fois, j'ai constaté que le décalage horaire entre le chargement des données via jsonp et ajax n'est pas très différent, alors que le temps de chargement du Web Worker a toujours été à un niveau élevé, donc l'utilisation du Web Worker pour charger des données est encore relativement lente, même pour de grandes quantités de données. L'un des avantages peut être que Worker prend du temps pour initialiser de nouveaux threads. Il n’y a aucun avantage autre que d’être non bloquant lors du chargement.

web worker: 174
jsonp: 25
ajax: 38

Le Web Worker peut-il donc prendre en charge le chargement de JS inter-domaines ? Cette fois, nous accédons à la page via http://127.0.0.1/aj/webWorker/worker.html En cliquant sur le bouton de chargement « Web Worker Loading ». Il n'y a pas de réponse sous Chrome et une erreur est affichée sous FF6. De cela, nous pouvons savoir que Web Worker ne prend pas en charge le chargement inter-domaines de JS, ce qui est une mauvaise nouvelle pour les sites Web qui déploient des fichiers statiques sur un serveur statique distinct.

Ainsi, Web Worker ne peut être utilisé que pour charger des données JSON dans le même domaine, mais ajax peut déjà le faire, et il est plus efficace et polyvalent. Laissez le travailleur faire ce pour quoi il est bon.

Quatre : Résumé

Le Web Worker est magnifique, mais il est plein de démons.

Ce que nous pouvons faire :

1. Peut charger un JS pour effectuer un grand nombre de calculs complexes sans suspendre le processus principal, et communiquer via postMessage, onmessage

2. . Vous pouvez charger des fichiers de script supplémentaires dans le travailleur via importScripts(url)

3. Vous pouvez utiliser setTimeout(), clearTimeout(), setInterval() et clearInterval()

4. Vous pouvez utiliser XMLHttpRequest pour envoyer des requêtes

5. Peut accéder à certaines propriétés du navigateur

Quelles sont les limitations :

1. Impossible de charger JS sur plusieurs domaines

2. Le code dans le travailleur ne peut pas accéder au DOM

3. L'implémentation de Worker par différents navigateurs est incohérente. Par exemple, FF permet la création de nouveaux travailleurs dans les travailleurs, mais Chrome ne le permet pas.

4. Non Tous les navigateurs prennent en charge cette nouvelle fonctionnalité

Recommandations associées :

Comment implémenter le multithreading dans H5 Web Worker

WebWorkers-Calcul haute performance front-end

Ouvrier du cadre de serveur de socket PHP

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!

Déclaration：

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

Article précédent：CSS a une compréhension approfondie de width: partage automatique d'exemples d'utilisationArticle suivant：CSS a une compréhension approfondie de width: partage automatique d'exemples d'utilisation

Articles Liés

Voir plus