Web Workerを使って重たい処理を実行する
時間のかかる処理を実行するときに便利なWeb Workerをとりあえず試してみたので覚書です。 サンプルのフォルダ構成 Web Workerで実行する処理は、別ファイルにする必要がある様子です。 index.html こ […]
広告ここから
広告ここまで
目次
時間のかかる処理を実行するときに便利なWeb Workerをとりあえず試してみたので覚書です。
サンプルのフォルダ構成
$ tree
.
├── index.html
└── worker.js
0 directories, 2 filesWeb Workerで実行する処理は、別ファイルにする必要がある様子です。
index.html
ここでは比較用に通常の処理とWeb Workerに実行させるための処理を記述します。
ボタンを押すと、console.logで結果が返ってきます。
<html>
<head>
<title>Web Worker practice</title>
</head>
<body>
<h1>Hello</h1>
<button id="button">メインスレッドで実行する</button>
<button id="workerButton">Web Workerで実行する</button>
<script>
const fibonacci = (i) => {
if (i < 2) return i
return fibonacci(i - 2) + fibonacci(i - 1)
}
// メインスレッドで実行する
const button = document.getElementById('button')
button.addEventListener('click', () => {
const result = fibonacci(45)
console.log(result)
})
// Web Workerで実行する
const workerButton = document.getElementById('workerButton')
if (window.Worker) {
const worker = new Worker('worker.js')
workerButton.addEventListener('click', event => {
worker.postMessage({
command: 'fibonacci',
number: 45
})
})
worker.onmessage = function(e) {
console.log('Message received from worker');
console.log(e.data)
}
}
</script>
</body>
</html>worker.js
こちらにはWeb Workerで実行する処理を記述します。fibonacci関数が重複していますが、テストなので気にしません。
const fibonacci = (i) => {
if (i < 2) return i
return fibonacci(i - 2) + fibonacci(i - 1)
}
onmessage = e => {
console.log('Message received from main script');
switch (e.data.command) {
case 'fibonacci':
const result = fibonacci(e.data.number)
postMessage(result)
default:
return
}
}Web Workerを使うメリット
今回のサンプルを実行するとわかりやすいのですが、重たい処理をメインスレッドで実行すると、その間他の入力操作ができなくなります。
ですが、Web Workerで実行させることで待機中も別操作が行えるようになります。
複数の非同期通信を裏側で同時に走らせたいときなどに使うとよさそうです。