Web Worker
Web Worker（ウェブ・ワーカー）は、HTMLページから実行され、同じHTMLページから実行される可能性があるスクリプトからは独立にバックグラウンドで動作する[1]、JavaScriptのスクリプトである。World Wide Web Consortium（W3C）とWeb Hypertext Application Technology Working Group（WHATWG）で仕様が定義されている。web workerはマルチコアのCPUをより効率よく利用できることが多い[2]。
Web Workerは、全てのタスクがシングルスレッドで処理されるJavaScriptの持つ問題を解消するための仕様である。JavaScriptで長時間かかる処理を実行すると、入力や画面の描画処理がブロックされて、アプリケーションが操作不能となってしまうため、処理を分割して何度もsetTimeout等で呼び出すなどの工夫が必要であった。しかし、workerを使用することによって、一部の操作について並行処理（バックグラウンド処理）が可能となる[3]。
W3CとWHATWGは、Web Workerをクリックやユーザー操作などに応答するスクリプトによって中断されない長時間実行するスクリプトとして想定している。workerがユーザーアクティビティで中断されないようにすることで、バックグラウンドで長いタスクを実行すると同時に、Webページの応答性を確保できるようになる。
Web Workerの仕様はHTML Living Standardの一部である[4]。
特徴 編集
ワーカー内ではDOM操作などUI操作はできないが、タイマーや非同期通信等の機能は使用できる。また、この機能の仕様は、HTMLの中に含まれている。
例 編集
workerの最も簡単な使用法は、ユーザーインターフェイスを中断せずに計算コストの高いタスクを実行することである。
この例では、メインのドキュメントが素数を計算するweb workerを生成し、直近に発見された素数が徐々に表示される。
メインページは次のようになる;。
<!DOCTYPE html>
<html>
<head>
<title>Worker の例: 1コアの計算</title>
</head>
<body>
<p>これまでに見つかった最も大きな素数: <output id="result"></output></p>
<script>
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
document.getElementById('result').textContent = event.data;
};
</script>
</body>
</html>
Worker()コンストラクタの呼び出しがweb worker を生成し、web workerを表すworkerオブジェクトを返し、このオブジェクトを使用してweb workerと通信する。オブジェクトのonmessageイベントハンドラーはコードがweb workerからメッセージを受信できるようにする。
Web Worker本体は次のようになる。
var n = 1;
var end_value = 10**7;
search: while (n <= end_value) {
n++;
for (var i = 2; i <= Math.sqrt(n); i++)
if (n % i == 0)
continue search;
// 素数を発見した！
postMessage(n);
}
素数が見つかったときには、postMessage()メソッドを利用してメッセージがページに送り返される[5]。
出典 編集
- ^ Web Workers, WHATWG 2010年6月3日閲覧。
- ^ “HTML Living Standard”. Html.spec.whatwg.org (2017年1月30日). 2017年1月31日閲覧。
- ^ Flanagan D. JavaScript 6th edition pp.747 - 754, 2012、古籏一浩 JavaScriptポケットリファレンス 5版 pp.390 - 396, 2011、JSさぽーたーず JavaScriptバイブル pp.366 - 368, 2012
- ^ Web Workers, WHATWG 2010年6月3日閲覧。
- ^ Web Workers, WHATWG 2010年6月3日閲覧。
外部リンク 編集
- HTML Standard 10 Web workers: 仕様
- HTML Standard — Web Workers （日本語訳）: 仕様の非公式な日本語訳
- Web Workers API - Web API | MDN
- Workers overview - web.dev