【JS】Web Workers ～ JavaScript の マルチスレッド化 ～

JavaScript

■ 用語

Shared Worker

 * タブやiframeなど別のスクリプトからアクセスできるスレッド形式

■ サポート

https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API

■ サンプル

DemoForWorker.html

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Demo</title>
</head>
<body>
<div id="result">Result</div>
<script>
// Workerの作成
var worker = new Worker("MyWorker.js");
// ローカル実行時
// var newWorkerViaBlob = function(relativePath) {
//   var baseURL = window.location.href.replace(/\\/g, '/').replace(/\/[^\/]*$/, '/');
//   var array = ['importScripts("' + baseURL + relativePath + '");'];
//   var blob = new Blob(array, {type: 'text/javascript'});
//   var url = window.URL.createObjectURL(blob);
//   return new Worker(url);
// };
// var worker = newWorkerViaBlob("MyWorker.js");


// 処理結果、受信イベント
worker.addEventListener('message', function(event) {
  var result = document.getElementById("result");
  result.innerHTML = event.data;
}, false);

// メッセージを送信する
worker.postMessage('Hello World');

// エラーを表示する
worker.addEventListener('error', (error) => {
   console.log("[ERROR] " + error);
});

</script>
</body>
</html>

MyWorker.js

self.addEventListener('message', function(event) {

  // Do something
  var startMsec = new Date();
  while (new Date() - startMsec < 5000);
  
  // 処理結果を送信
  self.postMessage(event.data);
}, false);

参考文献

http://www.atmarkit.co.jp/ait/articles/1201/13/news138.html
https://qiita.com/qiiChan/items/5179a7e540257d38c181
http://cly7796.net/wp/javascript/try-using-web-worker/
http://rennnosukesann.hatenablog.com/entry/2018/03/24/235203

トラブルシューティング

エラー「cannot be accessed from origin 'null'」対応
http://d.hatena.ne.jp/tshino/20180106/1515218776