Web Workerでマルチスレッド[並列処理]

2019年1月24日

Web Workers APIを利用するとJavaScriptにおいてマルチスレッドの処理をおこなうことができます。

 

下記リンクは、本記事で作成したWeb Workerのサンプル画面です。「計算」ボタンをクリックすると、フォームに入力した数値までの素数の数を別スレッドにて計算します。「終了」ボタンをクリックすると、スレッドは破棄され計算は終了します。

 

Web Workerサンプル

 

 

worker.html

19行目

Workerオブジェクトを作成します。引数にはメインスレッドとは別の処理をおこなうworker.jsを指定しています。これでブラウザによるメインスレッド(UIスレッド)とworker.jsの2つのスレッドが生成されます。メイン以外のスレッドを一般的に「ワーカー」と呼びます。このワーカーによるスレッドは、ブラウザの描画とは別スレッドであるため計算中もフォームを編集することが可能です。

 

Chromのデベロッパーツールでもスレッドを確認できます。

 

22〜24行目

ワーカーに対して値を渡すには、postMessage()メソッドを利用します。引数にJSONを利用します。

 

27〜29行目

messageイベントによって、ワーカーからの送信を検知しています。

 

32行目

メインスレッドにおいてワーカーを終了するにはterminate()メソッドを利用します。ワーカーの中で自身のスレッドを終了するには、close()を利用します。

 

worker.js

1行目

messageイベントでメインスレッドからの送信を検知しています。

 

13行目

postMessage()メソッドでメインスレッドに対して値を返しています。

 

素数の求め方については下記ページをご覧下さい。

 

素数を求める[エラトステネスのふるい]

 

 

ちなみに下記リンクは、Web Workerを利用していないサンプル画面です。計算の間は画面が止まり、フォームも編集できないことを確認できます。

 

Web Worker不使用サンプル

 

no-worke.html

 

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー