JavaScript Web Workerについて

JavaScriptはシングルスレッドです。

そのため、重い処理を行ってしまうと、ブラウザの描画が止まったりとユーザビリティが低下します。

Web Worker を使うことで、別スレッドで処理を実行できるため、重い処理を実行してもメインスレッドには影響を与えません。

例えば、以下のコードを実行すると数秒の間、ブラウザのタブの横にローディングが出てしまいます。(これはメインスレッドがビジー状態になっていることを示します。)

const makeArr = (length) => {
  const arr = []
  for (let i = 0; i < length; i++) {
    arr.push(i)
  }
  return arr
}

const result = makeArr(10000000)
console.log(result)

Web Worker を使った場合は以下のようになります。

const myWorker = new Worker('worker.js')
myWorker.postMessage(10000000)
myWorker.addEventListener('message', (response) => {
  console.log('recieve response', response.data)
})

const makeArr = (length) => {
  const arr = []
  for (let i = 0; i < length; i++) {
    arr.push(i)
  }
  return arr
}

self.addEventListener('message', (e) => {
  const length = e.data
  self.postMessage(makeArr(length))
})

この場合はブラウザはローディング状態となりません。

別スレッドでmakeArrの処理を行い、終わったらその結果の配列をメインスレッドに渡しているため、メインスレッドの動作は阻害しません。

フロントエンド側で大きな処理をすることが多くなってきていると思います。

サーバーからはほぼ加工していないデータが返ってきて、それをユーザーに表示するように加工するなど、パフォーマンスに困った場合には Web Worker を使ってみるのもありかもしれません。

JavaScript

Posted by たみぼうず