ホームページ >ウェブフロントエンド >H5 チュートリアル >H5マルチスレッド（Worker SharedWorker）の使い方の詳細説明

H5マルチスレッド（Worker SharedWorker）の使い方の詳細説明

php中世界最好的语言オリジナル: 2018-03-26 15:46:043962ブラウズ

今回は、H5 マルチスレッド (Worker SharedWorker) の使用方法と、H5 マルチスレッド (Worker SharedWorker) を使用する際の注意事項について詳しく説明します。以下は実際的なケースです。見て。

JavaScript には、一度に 1 つのことしか実行できません。1 つのことを実行するのに時間がかかる場合は、次のことを実行します。長時間使用すると、ブラウザが一定時間フリーズし、ユーザーの操作に応答しなくなります。どうすればよいでしょうか。ありがたいことに、HTML5 はマルチスレッドを実装するためのメカニズムを提供します。昔はこのような優れた機能を使用していたはずですが、それは問題ではありません。一緒に確認しましょう。

1. ワーカークラス

1. メソッドの紹介

(1)

Constructor new Worker(arg) : パラメーターは、スレッドによって実行されるコードが配置されている js ファイルを示します。「myworker .js」など、コンストラクターはもちろん Worker クラスのインスタンスを返します

(2) worker.postMessage(message): このメソッドは、メインスレッドから子スレッド

または子スレッドにメッセージを送信することを意味しますメインスレッドにメッセージを送信する場合、メッセージは一般的に文字列ですが、jsオブジェクトを文字列に変換して送信することもできます (3) 誰かがメッセージを送信するときに、メッセージイベントも発生します。このワーカーインスタンスに対して、イベントがトリガーされます。ポストされた値は、イベントオブジェクトのデータ属性から取得されます

Wker クラスの API は非常に単純で、最も一般的に使用されるメソッドが 2 つだけであることがわかります。実際の例を通して見てみましょう。

//main.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main</title>
</head>
<body>
    <p id="out"></p>
    <input type="text" name="" id="txt">
    <button id="btn">发送</button>
    <script type="text/javascript">
        var out = document.getElementById("out");
        var btn = document.getElementById("btn");
        var txt = document.getElementById("txt");
        var worker = new Worker("thread1.js");
        btn.addEventListener("click",function(){
            var postData = txt.value;
            worker.postMessage(postData);
        },false);
        worker.addEventListener('message',function(e){
            out.innerText = e.data;
        },false);
    </script>
</body>
</html>
//thread1.js
onmessage = function(event){
    var res = event.data+"帅气！";
    postMessage(res);
}

テキストボックスに「Big~Bear」と入力して送信ボタンをクリックすると、以下のような効果が表示されます

簡単な解析のため、メインスレッドにthead1.jsでWorkerインスタンスのワーカーを作成しました。ボタンをクリックすると、postMessage メソッドが呼び出され、テキストボックスの内容が thread1.js に送信されます。それだけです。メッセージイベントをリッスンし、メインスレッドはメッセージの送信時にイベントをトリガーし、

コールバック関数

を実行します。コールバック関数は、イベントオブジェクトから送信された値を取得し、「ハンサム!」を追加します。この値に戻してから戻します。メインスレッドはワーカーのメッセージイベントもリッスンするので、メッセージが通過するとトリガーされ、メッセージの内容が p に表示されるため、上記の効果がわかります。おそらくこれを何の目的で使用しますか?ここでは、メインスレッドで「ハンサム!」を追加する操作をいつでも完了できます。その複雑さは O(1) です (笑、最近アルゴリズムを勉強しています!)。しかし、そうでない場合は、簡単操作毛織物？この方法の利点は、サブスレッドが実行する処理がどれほど複雑であっても、メインスレッドは、サブスレッドがデータを処理した後は実行し続けることです。それを引き継ぐことができます。

ルー先生は、サブスレッドで new Worker() を呼び出すことで新しいサブスレッドを作成できますが、これは不可能であり、未定義のエラーが報告されることがわかりました。これは、Worker コンストラクターを呼び出すことができないことを意味します。最初は間違っていると思いましたが、後で公式ドキュメントを確認したところ、関連する記述がないことがわかりました。

メインスレッドで複数のサブスレッドを呼び出す例を見てみましょう:

//main.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main</title>
</head>
<body>
    <p id="out"></p>
    <input type="text" name="" id="txt">
    <button id="btn">发送</button>
    <script type="text/javascript">
        var out = document.getElementById("out");
        var btn = document.getElementById("btn");
        var txt = document.getElementById("txt");
        var worker1 = new Worker("thread1.js");
        var worker2 = new Worker("thread2.js");
        btn.addEventListener("click",function(){
            var postData = txt.value;
            worker1.postMessage(postData);
        },false);
        worker1.addEventListener('message',function(e){
            worker2.postMessage(e.data);
        },false);
        worker2.addEventListener('message',function(e){
            out.innerText = e.data;
        },false);
    </script>
</body>
</html>
//thread1.js
onmessage = function(event){
    var res = event.data+"帅气！";
        postMessage(res);    
}
//thread2.js
onmessage = function(event){
    var res = event.data+"没骗你哟！";
    postMessage(res);
    close();
}

メインスレッドはタスクを完了するために 2 つのスレッドを必要とします。worker1 と 2 の 2 つのスレッドを作成します。最初に worker1 を要求し、返されたデータを取得します。次に、worker2 にリクエストを送信すると同時に、worker1 が処理したデータを worder2 に渡して処理し、最終的な結果を取得してページに表示します。

以下の例のように、他の js ファイルを子スレッドに導入して呼び出すことができます。

//main.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main</title>
</head>
<body>
    <p id="out"></p>
    <input type="text" name="" id="txt">
    <button id="btn">发送</button>
    <script type="text/javascript">
        var out = document.getElementById("out");
        var btn = document.getElementById("btn");
        var txt = document.getElementById("txt");
        var worker1 = new Worker("thread1.js");
        btn.addEventListener("click",function(){
            var postData = txt.value;
            worker1.postMessage(postData);
        },false);
        worker1.addEventListener('message',function(e){
            out.innerText = e.data;
            
        },false);
    </script>
</body>
</html>
//thread1.js
importScripts('tools.js')
onmessage = function(event){
    var res = handler(event.data);
        postMessage(res);    
}
//tools.js
function handler(data){
    return data+"加油加油！"
}

thread1.js には tools.js というファイルがありませんが、importScripts() を通じて js ファイルをインポートし、内部で公開されているメソッドを呼び出すことができることがわかります。

2. SharedWorker クラス SharedWorker の本質は、異なるスレッドが 1 つのスレッドを共有でき、それらのデータも共有されます。

事例を挙げて直接議論する。

　　使用方法一：

//main.html
<!DOCTYPE HTML>
<head>
    <title>Shared workers: demo 1</title>
</head>
<body>
    <p id="log"></p>
<script>
  var worker = new SharedWorker('shared.js');
  var log = document.getElementById('log');
  worker.port.onmessage = function(e) { // note: not worker.onmessage!
    log.textContent += '\n' + e.data;
  }
</script>
</body>
</html>
//shared.js
onconnect = function(e) {
  var port = e.ports[0];
  port.postMessage('Hello World!');
}

　　这是从w3c拿得一个例子，下面先看第二种方法，再做分析

<!DOCTYPE HTML>
<html>
<head>
    <title>Shared workers: demo 2</title>
</head>
<body>
<p id="log"></p>
<script>
  var worker = new SharedWorker('shared.js');
  var log = document.getElementById('log');
  worker.port.addEventListener('message', function(e) {
    log.textContent += '\n' + e.data;
  }, false);
  worker.port.start(); // note: need this when using addEventListener
  worker.port.postMessage('ping');
</script>
</body>
</html>　　
//shared
onconnect = function(e) {
  var port = e.ports[0];
  port.postMessage('Hello World!');
  port.onmessage = function(e) {
    port.postMessage('pong'); // not e.ports[0].postMessage!
    // e.target.postMessage('pong'); would work also
  }
}

　　第一种方法中是使用事件句柄的方式将听message事件，不需要调用worker.port.start(),第二种方法是通过addEventListener()方法监听message事件，需要worker.port.start()方法激活端口。他们不同于worker，当有人和他通信时触发connect事件，然后他的message事件是绑定在messagePort对象上的，不想worker那样，你可以回头看看worker是怎么做的。

　　那么sharedWorker是怎么共享数据的呢？请看下面的例子。

//main1 和main2都是这样
<!DOCTYPE HTML>
<html>
<head>
    <title>Shared workers: demo 2</title>
</head>
<body>
<p id="log"></p>
<input type="text" name="" id="txt">
<button id="get">get</button>
<button id="set">set</button>
<script>
  var worker = new SharedWorker('shared.js');
  var get = document.getElementById('get');
  var set = document.getElementById('set');
  var txt = document.getElementById('txt');
  var log = document.getElementById('log');
  worker.port.addEventListener('message', function(e) {
    log.innerText = e.data;
  }, false);
  worker.port.start(); // note: need this when using addEventListener
  set.addEventListener('click',function(e){
      worker.port.postMessage(txt.value);
  },false);
  get.addEventListener('click',function(e){
      worker.port.postMessage('get');
  },false);
</script>
</body>
</html>
//shared
var data;
onconnect = function(e) {
  var port = e.ports[0];
  port.onmessage = function(e) {
    if(e.data=='get'){
        port.postMessage(data);
    }else{
        data=e.data;
    }
  }
}

　　这里分析一波，我们在main1.html的文本框输入数据，点击set，然后在main2.html中点击get法现能够获取到我们在main1.html中设置的数据，这说明我们的sharedWorker事实上是单例的，就像java中的static类一样，不管new多少个，实际上只有一个，这样我们的不同线程就可以共享到sharedWorker中的数据了。这里把图给上，记得有篇文章没给图，然后有人给我建议了，问能不能给图。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

H5マルチスレッド（Worker SharedWorker）の使い方の詳細説明

関連記事