JavaScript実行メカニズムの詳細な紹介

1. プロセスとスレッドの概念

ブラウザの原則
イベントループ (Event-Loop)、タスクキュー (同期タスク、非同期タスク、マイクロタスク、マクロタスク)
プロセスとスレッド

コンピュータの中核はすべてのコンピューティングタスクを実行する CPU であり、オペレーティングシステムはコンピュータの管理者であり、タスクのスケジュール、リソースの割り当てと管理を担当し、コンピュータのハードウェア全体を制御します。アプリケーションは特定の機能を備えたプログラムであり、プログラムはオペレーティングシステム上で実行されることは誰もが知っています。

プロセス：

プロセスとは、データセット上で独立した機能を持つプログラムの動的な実行プロセスです。これは、オペレーティングシステムによるリソースの割り当てとスケジュールの独立した単位です。これは、アプリケーションプログラムを実行するためのキャリアです。プロセスは、リソースを所有し、独立して実行できる最小単位であり、プログラム実行の最小単位でもあります。

プロセスの特性:

動的性:プロセスはプログラムの実行プロセスです。一時的なものであり、ライフサイクルがあり、動的に生成および破棄されます。
同時実行性:任意のプロセスを他のプロセスと同時に実行できます。
独立性:プロセスは、システム内のリソースの割り当てとスケジュール設定のための独立した単位です。
構造:プロセスは、プログラム、データ、プロセス制御ブロックの 3 つの部分で構成されます。

スレッド:

スレッドは、プログラム実行における単一の連続制御フローであり、プログラム実行フローの最小単位であり、プロセッサのスケジューリングとディスパッチの基本単位です。プロセスには 1 つ以上のスレッドがあり、各スレッドはプログラムのメモリ空間 (つまり、プロセスのメモリ空間) を共有します。標準スレッドは、スレッド ID、現在の命令ポインター (PC)、レジスタ、およびスタックで構成されます。プロセスは、メモリ空間 (コード、データ、プロセス空間、開いているファイル) と 1 つ以上のスレッドで構成されます。

プロセスとスレッドの違い:

スレッドはプログラム実行の最小単位であり、プロセスはオペレーティングシステムによるリソース割り当ての最小単位です。
プロセスは 1 つ以上のスレッドで構成されます。スレッドはプロセス内のコードの異なる実行ルートです。
プロセスは互いに独立していますが、同じプロセス内のスレッドはプログラムのメモリ空間 (コードセグメント、データセット、ヒープなどを含む) と一部のプロセスレベルのリソース (開いているファイルやシグナルなど) を共有します。プロセスは互いには見えません。
スケジューリングと切り替え: スレッドコンテキストの切り替えは、プロセスコンテキストの切り替えよりもはるかに高速です。

JS がシングルスレッドなのはなぜですか?

JavaScript 、登場以来、ブラウザのスクリプト言語として使用され、主にユーザーインタラクションの処理と DOM の操作に使用されています。これにより、シングルスレッドのみが可能になり、そうでない場合は非常に複雑な同期の問題が発生します。

たとえば、 JS がマルチスレッドの場合、1 つのスレッドは DOM 要素を変更しようとし、別のスレッドは DOM 要素を削除しようとします。このとき、ブラウザはどちらをリッスンすればよいかわかりません。そのため、複雑さを避けるために、JavaScript は最初からシングルスレッドで設計されました。

HTML5 では、マルチコア CPU の計算能力を活用するために、JavaScript スクリプトで複数のスレッドを作成できる Web Worker 標準を提案しています。ただし、子スレッドはメインスレッドによって完全に制御され、DOM を操作することはできません。したがって、この新しい標準によって、JavaScript がシングルスレッドであるという性質は変わりません。

2. ブラウザの原則

フロントエンドエンジニアとしてはブラウザに精通している必要がありますが、ブラウザはマルチプロセスです。

ブラウザのコンポーネント:

ユーザーインターフェイス: アドレスバー、進む/戻る/更新/ブックマークなどが含まれます。
ブラウザエンジン: ユーザーインターフェースとレンダリングエンジンの間で指示を転送します
レンダリングエンジン: 要求されたコンテンツを描画するために使用される
ネットワーク: httpリクエストなどのネットワーク呼び出しを完了するために使用され、プラットフォームに依存しないインターフェースを持ち、さまざまなプラットフォームで動作できます。
JavaScript インタープリタ: JavaScriptコードを解析して実行するために使用されます
ユーザーインターフェースバックエンド: コンボボックスやウィンドウなどの基本的なウィジェットを描画するために使用され、下部にオペレーティングシステムのユーザーインターフェースを使用します。
データストレージ: 永続化レイヤーに属します。ブラウザーは、 cookieに似たさまざまなデータをハードディスクに保存します。HTML5 は、軽量で完全なクライアントストレージテクノロジである Web データベーステクノロジを定義します。

⚠️注意: ほとんどのブラウザとは異なり、Chrome ではタブごとに個別のレンダリングエンジンインスタンスがあります。各タブは別々のプロセスです

ブラウザはどのようなプロセスで構成されていますか?

ブラウザプロセス:

ブラウザのメインプロセス（調整と制御を担当）は1つだけです。
ブラウザインターフェースの表示とユーザーとのやり取りを担当します。前進、後退など。
さまざまなページの管理、他のプロセスの作成と破棄を担当します
Rendererプロセスによって取得されたメモリ内のBitmapをユーザーインターフェイスに描画します。
ネットワークリソース、ダウンロードなどの管理。

サードパーティプラグインのプロセス:

サードパーティのプラグインの管理を担当

GPU プロセス:

3D描画とハードウェアアクセラレーションを担当（最大1つ）

レンダリングプロセス:

ページドキュメントの解析、実行、レンダリングを担当します

レンダリングプロセスにはどのようなスレッドが含まれていますか?

GUI レンダリングスレッド:

主に HTML、CSS の解析、DOM ツリーの構築、レイアウト、描画などを担当します。
このスレッドはJavaScriptエンジンスレッドと相互に排他的です。JavaScript エンジンスレッドが実行されると、GUI レンダリングスレッドは中断されます。タスクキューがアイドル状態のときは、メインスレッドが GUI レンダリングを実行します。

JavaScript エンジンスレッド:

主にJavaScriptスクリプトの処理とコードの実行（V8エンジンなど）を担当します。
ブラウザでは、JS プログラムを同時に実行できる JS エンジンスレッドは 1 つだけです。つまり、JS はシングルスレッドです。
JSエンジンスレッドとGUIレンダリングスレッドは相互に排他的であるため、JSエンジンはページレンダリングをブロックします。

タイミングトリガースレッド:

タイマー関数（ setTimeout，setInterval ）の実行を担当します。
ブラウザタイミングカウンターはJSエンジンではカウントされません（JSはシングルスレッドなので、ブロック状態になるとカウンターの精度に影響します）
タイミングを計り、トリガーするために別のスレッドが使用されます (タイミングが完了すると、イベントトリガースレッドのイベントキューに追加され、実行前に JS エンジンがアイドル状態になるのを待機します)。このスレッドはタイミングトリガースレッドであり、タイマースレッドとも呼ばれます。
W3C は HTML 標準で、 setTimeout内の 4 ミリ秒未満の時間間隔は 4 ミリ秒としてカウントされることを規定しています。

イベントトリガースレッド:

準備されたイベントをJSエンジンスレッドに渡して実行する責任があります。
イベントがトリガーされると、スレッドは対応するイベントを処理対象のキューの最後に追加し、JS エンジンが処理するのを待機します。

非同期リクエストスレッド:

XMLHttpRequest接続後、ブラウザはスレッドを開きます。
リクエストステータスの変更を検出すると、対応するコールバック関数がある場合、非同期リクエストスレッドはステータス変更イベントを生成し、対応するコールバック関数をキューに入れて、JS エンジンの実行を待機します。

3. 同期と非同期

JavaScriptはシングルスレッドなので、そのタスクは同期タスクのみにすることはできません。時間のかかるタスクも同期タスクとして実行されると、ページがブロックされます。

したがって、JavaScript タスクは一般的に次の 2 つのカテゴリに分類されます。

同期タスク:

同期タスクとは、メインスレッドで実行するためにキューに入れられたタスクを指します。次のタスクは、前のタスクが完了した後にのみ実行できます。

非同期タスク:

非同期タスクとは、メインスレッドに入らずに「タスクキュー」（イベントキュー）に入るタスクを指します。「タスクキュー」がメインスレッドに非同期タスクが実行可能であることを通知した場合のみ、タスクはメインスレッドに入って実行されます。

一般的な非同期タスク:タイマー、Ajax、イベントバインディング、コールバック関数、 promise 、 async awaitなど。

同期タスクと非同期タスクは、それぞれ異なる実行「場所」に入ります。同期タスクはメインスレッドに入り、非同期タスクはイベントテーブルに入り、関数を登録します。
イベントテーブルで指定された処理が完了すると、この機能はイベントキューに移動されます。
メインスレッドのタスクが完了して空になると、 Event Queueに移動して対応する関数を読み取り、メインスレッドで実行します。
上記のプロセスは継続的に繰り返され、イベントループと呼ばれることもあります。
メインスレッド実行スタックが空であることをどうやって知るのか、という疑問が湧いてきます。 js エンジンには、メインスレッドの実行スタックが空かどうかを継続的にチェックするmonitoring processがあります。空になると、 Event Queueに移動して、呼び出しを待機している関数があるかどうかを確認します。

マクロタスクとマイクロタスク:

広範な同期タスクと非同期タスクに加えて、JavaScript にはより洗練されたタスク定義もあります。

マクロタスク:グローバルコード、setTimeout、setInterval を含む
マイクロタスク: new Promise().then(callback) process.nextTick()

タスクの種類によって、タスクキューに入るタスクも異なります。

イベントループの順序によって、js コードの実行順序が決まります。全体のコード（マクロタスク）を入力すると、最初のループが始まります。次に、すべてのマイクロタスクを実行します。次に、マクロタスクから再度開始し、完了するタスクキューの 1 つを見つけて、すべてのマイクロタスクを実行します。

4. 実行スタックとタスクキュー

実行スタック:

JavaScript コードは実行コンテキストで実行されます。JavaScript には 3 つの実行コンテキストがあります。

グローバル実行コンテキスト
関数実行コンテキスト、JS関数が呼び出されると関数実行コンテキストが作成されます
eval 実行コンテキスト、eval 関数によって生成されるコンテキスト (あまり使用されない)

一般的に、JS コードには複数のコンテキストがありますが、これらのコンテキストの実行順序はどうなっているでしょうか?

スタックは後入れ先出しのデータ構造であることは誰もが知っています。JavaScript の実行スタックはそのようなスタック構造です。JS JavaScriptがコードを実行すると、グローバルコンテキストが生成され、実行スタックにプッシュされます。関数呼び出しが発生するたびに、関数実行コンテキストが生成され、実行スタックにプッシュされます。エンジンはスタックの上から関数の実行を開始し、実行後に実行コンテキストをポップします。

関数add(){
  コンソール.log(1)
  関数foo()
  コンソール.log(3)
}

関数foo(){
  コンソール.log(2)
}
追加（）

上記のコードの実行スタックを見てみましょう。

タスクキュー:

先ほど、 JavaScriptのすべてのタスクは同期タスクと非同期タスクに分かれていると述べました。同期タスクは、その名前が示すように、すぐに実行されるタスクです。通常、同期タスクは実行のために直接メインスレッドに入ります。非同期タスクはタスクキューに入り、メインスレッド内のタスクが完了するまで待機してから実行されます。

タスクキューは、関連する非同期タスクが実行スタックに入ることができることを示すイベントのキューです。メインスレッドはタスクキューを読み取り、そこに含まれるイベントを読み取ります。

キューは先入れ先出しのデータ構造です。

前述のように、非同期タスクはマクロタスクとマイクロタスクに分けることができるため、タスクキューもマクロタスクキューとマイクロタスクキューに分けることができます。

Macrotask Queue : setTimeout 、 setInterval 、ユーザー操作、UI レンダリングなどの比較的大きなタスクを実行します。
Microtask Queue : より小さなタスクを実行します。一般的に使用されるのはPromiseとProcess.nextTickです。

5. イベントループ

同期タスクは実行のためにメインスレッドに直接配置され、非同期タスク (クリックイベント、タイマー、Ajax など) はバックグラウンドで実行され、I/O イベントが完了するか動作イベントがトリガーされるのを待機します。
システムはバックグラウンドで非同期タスクを実行します。非同期タスクイベント (または動作イベント) がトリガーされると、タスクはタスクキューに追加され、各タスクは処理のためのコールバック関数に対応します。
ここで、非同期タスクはマクロタスクとマイクロタスクに分けられます。マクロタスクはマクロタスクキューに入り、マイクロタスクはマイクロタスクキューに入ります。
実行タスクキュー内のタスクは実行スタック内で完了します。メインスレッド内のタスクがすべて実行されると、マイクロタスクキューが読み込まれます。マイクロタスクがある場合は、すべて実行されてからマクロタスクキューが読み込まれます。
上記のプロセスは継続的に繰り返されます。これはEvent-Loop ) と呼ばれることが多いものです。

検証例:

それを検証するために質問を見てみましょう

(非同期() => {
    コンソール.log(1) 
  
    タイムアウトを設定する(() => {
    コンソールログ('setTimeout1')
    }, 0);
  
    関数foo(){
        新しい Promise((res,rej) => { を返す
            コンソール.log(2)
            解像度(3)
        })
    }
  
    新しいPromise((resolve,reject)=>{
    コンソール.log(4)
    解決する（） 
    コンソール.log(5)
    }).then(()=> {
    コンソールログ('6')
    })
  
    const res = foo() を待機します。
    コンソールログ(res);
    コンソールログ('7')
  
    setTimeout(_ => console.log('setTimeout2'))
})()

印刷順序は、1、4、5、2、6、3、7、setTimeout1、setTimeout2 です。

分析:

コードは上から下へ実行されます。まず、 console.log(1)に遭遇し、直接 1 を出力します。次に、マクロタスクに属するタイマーに遭遇し、それをマクロタスクキューに入れます。
再び promise に遭遇すると、 new Promiseは同期タスクなので、4 を直接出力します。後続のthen関数である resolve に遭遇すると、それをマイクロタスクキューに入れて 5 を出力します。
次に、await foo を実行します。foo 関数にはpromiseがあります。 new promise同期タスクに属しているため、2 が直接出力されます。await が返すのはpromiseコールバックです。await の後のタスクは、マイクロタスクキューに入れられます。
最後に、タイマーが検出され、マクロタスクキューに入れられます。
実行スタックタスクが実行された後、マイクロタスクキューに移動してマイクロタスクの実行を取得します。最初に最初のマイクロタスクを実行し、6を出力し、次に2番目のマイクロタスクを実行し、3、7を出力します。
マイクロタスクが実行された後、マクロタスクキューに移動してマクロタスクの実行を取得し、 setTimeout1とsetTimeout2を出力します。

6. タイマー

JavaScriptのタスクキュー内の非同期タスクには、特定のコードが実行されるまでの時間を指定するタイマーイベントも含まれます。タイマー機能は、主にsetTimeout()とnterval() 2 つの関数によって実行されます。これらの内部実行メカニズムはまったく同じです。主な違いは、 setTimeoutは 1 回限りの実行プロセスであるのに対し、 setInterval繰り返し実行されるプロセスである点です。

setTimeout関数は 2 つのパラメータを受け入れます。1 つ目は実行されるコールバック関数、2 つ目は実行を延期する時間 (ミリ秒) です。

遅延時間を 0 に設定すると、すぐに実行されますか?

タイムアウトを設定します(()=>{
    コンソール.log(1)
},0)

コンソール.log(2)

しかし、そうではありません。上記の印刷結果では、最初に 2 が印刷され、次に 1 が印刷されます。混乱していると感じますか?

上記のイベントループのルールを使用すると、非常にわかりやすくなります。グローバルコードが実行され、タイマーsetTimeoutに遭遇すると、マクロタスクキューに入れられ、次に同期コードが下方向に実行され、2 が印刷されます。スタックタスクが実行された後、マイクロタスクキューに移動します。マイクロタスクがない場合は、マクロタスクキューをもう一度確認します。マクロタスクがあり、print 1 が実行されます。

setTimeout(fn,0) の意味は、タスクがメインスレッドの最も早い利用可能なアイドル時間に実行されること、つまりできるだけ早く実行されることを指定することです。「タスクキュー」の最後にイベントを追加するため、同期タスクと「タスクキュー」内の既存のイベントが処理されるまで実行されません。

HTML5 標準では、setTimeout() の 2 番目のパラメータの最小値 (最短間隔) は 4 ミリ秒未満であってはならないと規定されています。この値より小さい場合は、自動的に増加します。以前のバージョンのブラウザでは、最小間隔は 10 ミリ秒に設定されていました。さらに、DOM の変更 (特にページの再レンダリングを伴うもの) は通常、すぐに実行されるのではなく、16 ミリ秒ごとに実行されます。現時点では、 requestAnimationFrame()方が setTimeout() よりも優れています。

setTimeout()イベントを「タスクキュー」に挿入するだけであることに注意してください。メインスレッドは、現在のコード (実行スタック) が実行されるまで、指定されたコールバック関数を実行しません。現在のコードに時間がかかる場合は、長時間待機する必要がある場合があり、 setTimeout()で指定された時間にコールバック関数が実行されることを保証する方法はありません。

JavaScript 実行メカニズムの詳細な紹介に関するこの記事はこれで終わりです。JavaScript 実行メカニズムに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: