WebWorkerって何

WebWorkerとは

WebWorkerはwebアプリの処理をメインスレッドとは別のスレッドで実行するためのwebAPI。
javascriptはシングルスレッドで処理を行う言語であり、すべての処理を順番に処理するため、重い処理が実行されるとその処理が終わるまで後続の処理が実行されないが、WebWorkerを使えば重い処理を待たずに並行して処理を実行できる。

非同期処理と違うのか

非同期処理はあくまでシングルスレッドのため、非同期処理の実行中に何か重たい処理などがあると、非同期処理の切り替えに遅れが生じる。
https://jsprimer.net/basic/async/

いつ使うの

• メインスレッドをあからさまにブロックするような重い処理
  時間のかかる計算処理にはWebWorkerを使うのが良さげ。
• ユーザーが意図していない処理
  検索ボタンをユーザーが押したとして検索APIが実行され、その間ローディングUIを見せて待たせたとしても、ユーザーは検索中なんだなーという感じで違和感はない。しかし、ユーザーが意図してアクションしてないのにも関わらず、ローディング画面見せたり画面が固まるとUX的によくない。そのため、バックグラウンドで実行したい処理についてはWebWorkerを使うのは良さそう。

https://david-gilbertson.medium.com/should-you-should-be-using-web-workers-hint-probably-not-9b6d26dc8c6a

注意点

• DOMには直説アクセスできない
  DOMを操作したい場合、WebWorkerから受け取ったデータをもとにメインスレッドから操作する。
• 変数の共有はできない
  メインスレッドとは別のスレッドのため、変数の共有はできない。