Loading AI tools
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]。
Wikiwand in your browser!
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.
