Javascript でマルチスレッドを利用する - WebWorkers や WebAssembly についてではない-jsチュートリアル-php.cn

Utilize Multi-Thread in Javascript - Not About WebWorkers nor WebAssembly

JavaScript が単一のスレッドで実行されることはよく知られています。この概念は非常に不可欠であるため、私たちはそれを メインスレッド という名前で呼ぶことがよくあります。ということは、JavaScript の実行時にはマルチコア CPU が役に立たないということでしょうか?

そうではありません。

JavaScript は少し生意気で、スレッドに関するさまざまなメッセージを送信することがあります。

ただし、Web Workers や WebAssembly などのより複雑な機能を詳しく調べなくても、基本的な JavaScript でマルチスレッドワークフローを利用できます。

明確にするために、この記事は Web ブラウザーベースの JavaScript に焦点を当てています。 Node.js などの他の環境では、処理が異なる場合があります。

JavaScript でのマルチスレッドおよびマルチスレッドのような操作のオプションを検討していきます。実際には、基本的な純粋なバニラ JavaScript でマルチスレッドワークフローを利用できますし、そうすべきです。

"説明する！"

嬉しいです。

JavaScript はシングルスレッド言語ですが、Web ブラウザによって解釈されます。ブラウザはマルチスレッドソフトウェアです。

マルチスレッドをシミュレートして利用する方法はいくつかあり、あなたも気づかずにそれらを使用しているかもしれません。

さらに、JavaScript は、実際にはマルチスレッドであるにもかかわらず、マルチスレッドのように動作することがよくあります。不正行為のように聞こえるかもしれませんが、マルチスレッドの動作から期待される利点を効果的に提供します。

イベントベースのプログラミングはマルチスレッドであると感じる

JavaScript はイベントベースのシステムです。ブラウザは JavaScript ファイルを処理するときに、内部のすべてのコードを実行します。実行を停止しないコードを記述することは完全に可能ですが、ブラウザがクラッシュする可能性があるため、一般的には悪い考えです。

私たちが通常行うことは、イベントリスナーをセットアップして、何かが起こるのを待つことです。この時点で、JavaScript は完全にアイドル状態です。このアイドル待機は、メインスレッドから一部の作業をオフロードしない限り不可能です。

イベント自体はマルチスレッドではありませんが、イベントの待機と確認は JavaScript ではなくブラウザーによって処理されます。このプロセスはメインスレッドからオフロードされます。

非同期関数とマルチスレッド

setTimeout や setInterval などの関数は、長年にわたって使用されてきました。メインスレッドから待機時間をオフロードします。

これがどのように機能するかを単純化してみましょう。低レベル言語では、タイマーや待機は、「もう時間ですか?」を常にチェックすることによって実装されることがよくあります。経過時間をチェックし、適切な時間が来たら続行する while() ループを想像してください。最新のアプローチでは、CPU スレッドの詰まりを避けるために CPU 割り込みを使用する場合があります。

ただし、JavaScript で setTimeout または setInterval を使用すると、言語は待機中に完全にアイドル状態になります。これは、繰り返しますが、待機がメインスレッドから何らかの方法で処理されることを意味します。

フェッチおよびその他の非同期 API

最近では、ブラウザーから非同期関数や API がますます増えています。フェッチ API はよく知られた例です。 Clipboard API などの新しい API も非同期です。

これは、ブラウザにアクションの実行を要求することを意味し、JavaScript のメインスレッドが解放され (または、他の処理ができるようになります。詳細は後ほど)、それが完了すると (次のコードを処理することで) 通知されます。

非同期とマルチスレッド

非同期は、必ずしもマルチスレッドを意味するわけではありません。常に、直接というわけではありません。関数の前に async という単語を置くだけでは、何の役にも立ちません。

JavaScript が非同期動作を処理する方法には 2 つの重要なコンポーネントがあります。

1. コールバックキューとイベントループ

コールバックキューは、実行を待機している一連の関数と考えてください。これらの関数はメインスレッドで 1 つずつ実行されます。非同期操作が完了すると (イベント、タイムアウト、フェッチ完了など)、そのコールバックがこのキューに配置されます。

イベントループは、コールスタックが空のときにコールバックをキューからコールスタックに移動する役割を果たします。

2. ブラウザで処理される関数

Web ブラウザは特定の操作を制御し、その操作のために新しいスレッドを起動する場合があります。これには、fetch や setTimeout などのアクションが含まれます。 JavaScript はこれらのスレッドを管理する必要はありません。非同期操作が完了すると、ブラウザーは対応するコールバックをコールバックキューに配置し、そこから JavaScript が実行を継続します。

次のコードを考えてみましょう:

console.log('Start');

setTimeout(() => {
  console.log('This is asynchronous');
});

console.log('End');

ログイン後にコピー

出力:

Start
End
This is asynchronous

ログイン後にコピー

以下のことが起こります:

「開始」が記録されます。
setTimeout はタイムアウトパラメーターなしで呼び出されるため、デフォルトは 0 ミリ秒になります。コールバックはブラウザに送信され、現在のコールスタックがクリアされた後に実行されます。
「終了」が記録されます。
メインスレッドが解放され、イベントループがコールバックキューをチェックします。
setTimeout からのコールバック関数はコールスタックに移動されます。
「これは非同期です」がログに記録されます。

setTimeout にタイムアウトパラメーターが欠落していることに注意してください。これは、優先度の低いコードの実行を延期する一般的な手法です。最初に他のすべてを処理し、それが完了したら、「優先度の低い」処理を実行します。

これにより、setTimeout 内の関数がコールバックキューに即座に配置され、メインスレッドがアイドル状態になったときに最初の機会に実行されます。

requestAnimationFrame の特殊なケース

requestAnimationFrame は、ビュー (ビデオゲームにおける 1 秒あたりのフレーム数と考えてください) を計算して更新する直前に、ブラウザにコードの実行を指示するブラウザ API です。

何らかの理由で、Web 開発者は再描画や FPS について考えませんが、それが仕組みです。

本質的に非同期です (ただしマルチスレッドではありません)。

時間を指定せずに setTimeout を使用することは、requestAnimationFrame が導入される前は同様の目的でよく使用されていましたが、それほど便利とは言えませんでした (何もしないよりは良いだけです)。

この関数は、コードを特別なスタックにキューに入れます。新しいフレームをレンダリングする (再描画) 直前に、ブラウザーはキューに入れられたこのコードを実行します。これは、DOM、HTML、または CSS に変更を加えるのに最適です (ただし、これらのみで計算を行うことは禁止します!)。

真のマルチスレッドオプション

この記事はそれらに関するものではありませんが、Web Workers と WebAssembly を利用することで真のマルチスレッド操作を実現できることは言及する価値があります。これらにより、バックグラウンドスレッドでスクリプトを実行できるようになります。 DOM を直接操作することはできませんが、重いタスク (行列計算など) を処理するのに非常に役立ちます。このアプローチは、三目並べだけでなく、より複雑な HTML5 ベースのゲームでよく使用されます。