HTML5 Web Worker 使用例チュートリアル-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

HTML5 Web Worker 使用例チュートリアル

小云云

Jan 08, 2018 am 11:20 AM

html5 web worker

Web Worker は、HTML5 によって提供される JavaScript マルチスレッドソリューションです。ユーザーインターフェイスをフリーズさせることなく、計算負荷の高いコードを Web Worker に対して実行できます。この記事では主に HTML5 Web Worker の使用方法を紹介します。編集者がそれを紹介し、参考にしてください。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1: Worker の使用方法

Web Worker の基本原則は、Worker クラスを使用して、JavaScript の現在のメインスレッドに JavaScript ファイルをロードし、新しいスレッドを開くことです。これにはノンブロッキングの効果があります。実行し、メインスレッドと新しいスレッドの間のデータ交換用のインターフェイス (postMessage、onmessage) を提供します。

それでは、その使用方法、例を見てみましょう:

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

ログイン後にコピー

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>

ログイン後にコピー

Chrome ブラウザで test.html を開いた後、コンソール出力「hello world」はプログラムを示します実行成功。

この例を通して、Web ワーカーの使用が主に次の部分に分かれていることがわかります

WEB メインスレッド:

1. worker = new Worker( url ) を通じて JS ファイルをロードし、ワーカーを作成し、ワーカーインスタンスを返します。。

2. worker.postMessage(data) メソッドを通じてワーカーにデータを送信します。

3. worker.onmessage メソッドをバインドして、ワーカーによって送信されたデータを受信します。

4. worker.terminate() を使用してワーカーの実行を終了できます。

ワーカーの新しいスレッド:

1. postMessage(data) メソッドを通じてデータをメインスレッドに送信します。

2. onmessage メソッドをバインドして、メインスレッドによって送信されたデータを受信します。

2 つ: Worker で何ができるか

Web Worker の使用方法が分かったところで、Web Worker の用途は何で、それらの問題の解決に役立つでしょうか。フィボナッチ数列の例を見てみましょう。

数学では、フィボナッチ数列が再帰的に定義されていることは誰もが知っています: F0=0、F1=1、Fn=F(n-1)+F(n-2) (n>=2、n∈N* )、一般的に使用される JavaScript の実装は次のとおりです:

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

ログイン後にコピー

Chrome でこのメソッドを使用して 39 のフィボナッチ数列を実行するには 19097 ミリ秒かかり、40 を計算するとき、ブラウザーはスクリプトがビジーであることを直接通知します。

JavaScript は単一のスレッドで実行されるため、シーケンスを見つけるプロセス中にブラウザーは他の JavaScript スクリプトを実行できず、UI レンダリングスレッドも一時停止され、ブラウザーがゾンビ状態になります。 Web ワーカーを使用してシーケンスの計算プロセスを新しいスレッドに配置すると、この状況を回避できます。具体的に例を見てみましょう:

//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));
};

ログイン後にコピー

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>

ログイン後にコピー

Chrome で fibonacci.html を開くと、コンソールに次の出力が表示されます:

計算開始: 40 時間: 1316508212705
私は数列の計算実行時間: 1316508212734
数列計算時のタイマー関数実行時間: 1316508213735
結果: 102334155 時間: 1316508262820 時間: 50115

この例は、ワーカーで実行されたフィボナッチ数列の計算がメインに影響を与えないことを示しています。スレッドのコード実行は、独自の独立したスレッドで完全に計算され、計算が完了した後にのみ結果がメインスレッドに返されます。

Web ワーカーを使用すると、ページの表示に影響を与えることなく、フロントエンドで複雑で大規模な操作を実行でき、不快なスクリプトビジープロンプトがポップアップ表示されなくなります。

次の例では、Web ワーカーを使用してシーン内のピクセルを計算します。シーンが開かれると、ワーカーは 1 つのピクセル値のみを計算します。

3: Worker のその他の試み

Worker が URL を受け取ってワーカーを作成することはすでにわかっていますが、Web ワーカーを使用して jsonp と同様のリクエストを行うことができますか? jsonp がスクリプトタグ JSON を挿入することによって作成されることは誰もが知っていますか?データがロードされ、スクリプト要素がロード中および実行中にブロックされる Web ワーカーを使用して非同期ロードを実装できれば素晴らしいでしょう。

次の例では、Web Worker、jsonp、および ajax の 3 つの異なるメソッドを通じて 169.42KB の JSON データをロードします

// /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));
            }
        });
    };
};

ログイン後にコピー

HTML ページ: /aj/webWorker/worker.html

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

ログイン後にコピー

Set HOST

127.0.0.1 js.wcdn.cn

http://js.wcdn.cn/aj/webWorker/worker.html からページにアクセスし、3 つの方法でデータをロードしてコンソール出力を取得します。

web worker: 174
jsonp: 25
ajax: 38

ログイン後にコピー

何度か試した結果、jsonp と ajax を介してデータをロードする時間に大きな違いはなく、Web ワーカーのロード時間は常に高いレベルにあるため、Web ワーカーを使用してデータをロードするのはまだ比較的遅いことがわかりました。たとえ大量のデータであっても、ワーカーが新しいスレッドを初期化するのに時間がかかる可能性があります。ロード中にブロックされないこと以外の利点はありません。

それでは、Web Worker はクロスドメイン JS の読み込みをサポートできるのでしょうか? 今回は http://127.0.0.1/aj/webWorker/worker.html を通じてページにアクセスします。「Web Worker 読み込み」読み込みボタンをクリックすると、 Chrome では何も反映されません。FF6 ではエラーが発生します。このことから、Web Worker は JS のクロスドメイン読み込みをサポートしていないことがわかります。これは、静的ファイルを別の静的サーバーにデプロイする Web サイトにとっては悪いニュースです。

つまり、Web Worker は同じドメイン内の JSON データをロードするためにのみ使用できますが、Ajax はすでにこれを実行でき、より効率的で多用途です。ワーカーに得意なことをやらせましょう。

4: 概要

ウェブワーカーは見た目は素晴らしいが、悪魔がいっぱいです。

できること:

1. メインプロセスをハングさせることなく、大量の複雑な計算を実行するための JS をロードでき、postMessage、onmessage を通じて通信できます。

2.ワーカースクリプトファイル

3. setTimeout()、clearTimeout()、setInterval()、clearInterval() を使用できます

4. XMLHttpRequest を使用してリクエストを送信できます

5.制限は何ですか? :

1. JS をドメイン間でロードすることはできません

2. ワーカー内のコードは DOM にアクセスできません

3. たとえば、FF では新しいワーカーの作成が可能です。いいえ