解説
「Web Workers」は、Webページでスクリプトを、バックグラウンドのスレッドで実行するための手段です。
JavaScriptは、シングルスレッドのプログラミング言語です。そして、実行中は、WebブラウザのUIなどの処理を停止させます。Web Workersは、こうした問題を解決して、他のスレッドで計算を行うためのものです。
Web Workersに対応しているWebブラウザでは、window.Workerオブジェクトを、ファイルのURIを引数にして初期化することで、Web Workersの機能を利用できます。
サンプル
「Web Workers」のサンプルです。ファイルはUTF-8で保存してください。検証はGoogle Chromeで行っています。
1つ目は、Web Workersを利用しないサンプルで、重い処理を実行している間、スクロールができなくなります。2つ目は、Web Workersを利用したサンプルで、重い処理を実行している間も、スクロールができます。
セキュリティ上の理由で、Webブラウザによっては、138_js2.htmlからtask.jsの読み込みがサーバー上でしかできません。サンプルの利用は、サーバー上で行ってください。
138_js1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>「Web Workers」のサンプル1 - Web Workers なし</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
// 重い処理を実行している間、スクロールできない
$(function() {
setTimeout(function() {
$('#out').append('start<br>');
setTimeout(function() {
var len = 500000000;
var n = 0;
for (var i = 0; i < len; i ++) {
if (len % i === 0) n ++;
}
$('#out').append('end ' + n);
}, 100);
}, 1000);
});
</script>
<div id="out" style="position: fixed;">output:<br></div>
<div style="height: 3000px;"></div>
</body>
</html>
138_js2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>「Web Workers」のサンプル2 - Web Workers あり</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
// 重い処理を実行していても、スクロールできる
var worker = new Worker('task.js');
$(function() {
setTimeout(function() {
$('#out').append('start<br>');
setTimeout(function() {
worker.onmessage = function(e) {
$('#out').append('end ' + e.data);
};
worker.postMessage(500000000);
}, 100);
}, 1000);
});
</script>
<div id="out" style="position: fixed;">output:<br></div>
<div style="height: 3000px;"></div>
</body>
</html>
task.js
onmessage = function (e) {
var len = e.data;
var n = 0;
for (var i = 0; i < len; i ++) {
if (len % i === 0) n ++;
}
postMessage(n);
};
- 実行結果（138_js1.html）：Web Workers未使用。「start」が表示されてから「end」が表示されるまでスクロールできなくなる
- 実行結果（138_js2.html）：Web Workders使用。「start」が表示された後も、引き続きスクロールできる
