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

今回は、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
nbsp;html>


    <meta>
    <title>main</title>


    <p></p>
    <input>
    <button>发送</button>
    <script>
        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(&#39;message&#39;,function(e){
            out.innerText = e.data;
        },false);
    </script>


//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
nbsp;html>


    <meta>
    <title>main</title>


    <p></p>
    <input>
    <button>发送</button>
    <script>
        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(&#39;message&#39;,function(e){
            worker2.postMessage(e.data);
        },false);
        worker2.addEventListener(&#39;message&#39;,function(e){
            out.innerText = e.data;
        },false);
    </script>


//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
nbsp;html>


    <meta>
    <title>main</title>


    <p></p>
    <input>
    <button>发送</button>
    <script>
        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(&#39;message&#39;,function(e){
            out.innerText = e.data;
            
        },false);
    </script>


//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
nbsp;HTML>

    <title>Shared workers: demo 1</title>


    <p></p>
<script>
  var worker = new SharedWorker(&#39;shared.js&#39;);
  var log = document.getElementById(&#39;log&#39;);
  worker.port.onmessage = function(e) { // note: not worker.onmessage!
    log.textContent += &#39;\n&#39; + e.data;
  }
</script>

以上がH5マルチスレッド（Worker SharedWorker）の使い方の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。