JavaScript エンジン-jsチュートリアル-php.cn

JavaScript Engine

JSエンジン:

JSコードを実行するプログラム。元。 Google の V8。
V8 が Chrome、Node.js を強化
他のブラウザには独自の JS エンジンがあります。

JS エンジンには 2 つの部分があります。

コールスタック: 実行コンテキストを使用してコードが実行される場所。
ヒープ: オブジェクトの保存に使用される非構造化メモリプール。

すべての c/r プログラムはマシンコードに変換する必要があります。 2 つのプロセスを介して実行されます:

1. コンパイル: コード全体が一度にマシンコードに変換され、コンピューターで実行できるバイナリファイルに書き込まれます。

ソースコード -(コンパイル済み)->バイナリコード[ポータブルファイル] -(実行)->プログラム実行
実行はコンパイルのかなり後に行われる可能性があります。

2. インタプリタ: インタプリタはソースコードを 1 行ずつ実行します。

ソースコード -(1行ずつ実行)->プログラム実行

ここのコードはまだマシンコードに変換する必要があります。
コンパイル済みの l/gs に比べてかなり遅いです。

3. JIT、つまりジャストインタイムコンパイル:

最新の JS エンジンは、コンパイルと解釈を組み合わせて高速化しています。
コード全体が一度にマシンコードに変換され、すぐに実行されます。ソースコード -(コンパイル済み)->マシンコード -(実行)->プログラム実行
実行する中間ポータブルファイルがありません。
コンパイル直後に実行が行われます。
したがって、この手法により、JS は解釈された l/gs よりもはるかに高速になりました。

JS でのコンパイルプロセス:

ステップ 1. 解析:

私たちのコードは解析されます。つまり、JS エンジンによって AST または抽象構文ツリーに読み込まれます。
l/g にとって意味のある const、let、function などのキーワードに基づいてコードをツリーに分割することで機能します。
次に、コードを構造化された方法でツリーに保存します。
構文エラーも確認してください。
AST は DOM ツリーとは何の関係もありません。 AST は、JS エンジン内のコードを表現したものにすぎません。

ステップ 2、3[結合]: コンパイル + 実行

AST はコンパイルされ、その直後に JIT を使用して実行されます。
実行は呼び出しスタックで行われます。
最新の JS には賢い最適化戦略があります。つまり、できるだけ早く実行を開始できるように、最初に最適化されていないバージョンのマシンコードをすばやく作成します。
このコードは、既に実行中の pgm 実行中にバックグラウンドで再度再コンパイルされます。
複数回の反復で実行され、各最適化の後、コードの実行を停止することなく、最適化されていないコードが新しく最適化されたコードと交換されます。これにより、V8 が非常に高速になります。
この解析、コンパイル、実行はすべて、JS Engine 内の特別なスレッドで行われます。このスレッドには、コールスタックを使用してコードを実行しているメインスレッドから完全に分離されたコードを使用してアクセスすることはできません。
JS は単に l/g と解釈されるだけではありません。 JIT コンパイルがあり、解釈された l/gs よりもはるかに高速になります。

JS ランタイム = JS エンジン + Web API + C/B キュー

JS ランタイム: JS を使用するために必要なものがすべて含まれるコンテナー。
JS ランタイムの中心は JS エンジンです。
JS エンジンがなければランタイムがないため、JS はまったく存在しません。
JS エンジンだけでは十分ではありません。DOM、フェッチ、タイマーなどの Web API へのアクセスが必要です。
Web API: ランタイムによってエンジンに提供される機能ですが、JS エンジンの一部ではありません。元。ブラウザのウィンドウオブジェクト、ノードのグローバルオブジェクト。
コールバックキューは、実行準備ができているすべての関数を含むデータ構造です。元。クリック、タイマー、データなど
DOM イベントハンドラー fns はコールバック fns とも呼ばれます。
コールスタックが空の場合、コールバック fn は C/B キューからコールスタックにシフトされて実行されます。
継続的なチェックとシフトはイベントループによって実行されます。
イベントループは、JS がノンブロッキングの同時実行モデルを持つことを可能にするものです。
ノードに関しては、ブラウザから提供される Web API はありません。 C++ バインディングとスレッドプールと呼ばれるものがあります。

JS コードがコールスタックでどのように実行されるか

JS には単一の実行スレッドがあるため、一度に実行できることは 1 つだけです。したがって、JS ではマルチアスキングはできません。
API は環境によって提供されますが、言語の一部ではありません。元。タイマー、フェッチ、DOM、位置情報などの Web API
コールバックキュー: 発生したイベントに関連付けられたコールバック関数を実行する準備ができています。
コールスタックが空になるたびに、イベントループはコールバックをコールバックからキューに転送し、実行のためにコールスタックに渡します。
イベントループは、JS での非同期動作を可能にする重要な部分です。
同時実行モデル: l/g が同時に発生する複数の処理をどのように処理するか。
JS ランタイムの重要な部分:
コールスタック
Web API
コールバックキュー
イベントループ
DOM に関連するものはすべて、JS ではなく Web API の一部です。
画像の読み込みは非同期で行われます。同期していたらブロックされていたでしょう。つまり、メインスレッドではなく Web API 環境で行われていたでしょう。
すべてのイベントリスナー、.then() などの作業は、コールスタックではなく、WEB API 環境で発生します。
コールバック関数はコールバックキューに配置され、コールスタックで実行されるのを待ちます。
コールバックキューは、コールスタックが完了する必要がある todo リストのようなものです。
上記の期間は実行までの最小遅延であり、実行時間ではありません。
コールバックキューには、DOM イベント、クリック、キー押下などからのコールバックも含まれます。DOM イベントは非同期動作ではありませんが、実行にはコールバックキューを使用します。
イベントループは、コールバックキューが空になるまでチェックし続けます。コールスタックに配置された各コールバックは、イベントループティックとして呼び出されます。
イベントループは JS ランタイム全体を調整します。
非同期コードはエンジン内で実行されないため、JS 自体には時間の感覚がありません。非同期動作を管理するランタイムと、実行するコールバックを決定するイベントループです。
エンジンまたは呼び出しスタックは、単に与えられたコードを実行します。
画像がロードされるとき、イベントリスナーはロードイベントが発生するまで Web API 環境で待機し続けます。起動されると、それのみがコールバック fn としてコールバックキューに送られ、コールスタック上でその順番が実行されるのを待ちます。

マイクロタスクキュー:

Promise からのコールバックはコールバックキューに送られず、マイクロタスクキューに送られます。
このキューはコールバックキューよりも高い優先度を持ちます。
イベントループは最初にこのキューをチェックし、最初にそのタスクをすべて実行してから、実行のためにコールバックキューに移動します。
Promise のコールバックはマイクロタスクと呼ばれ、そのためマイクロタスクキューと呼ばれます。他にもマイクロタスクがありますが、現時点ではここでは関係ありません。イベントループは、各コールバックがいつ実行されるかを決定します。コールバックキューと比較してマイクロタスクに高い優先度を与えます
マイクロタスクは、他のすべての通常のコールバックキューの前にインラインでカットできます。
Promise.resolve() : すぐに解決される Promise を作成し、その成功値が引数として内部に渡されます。 then() コールバックは、解決された値を引数として呼び出します。

console.log("Direct simple console BEGIN");
setTimeout(() => console.log("Text from Timer"),0);
Promise.resolve("Text from Promise").then(res => console.log(res));
console.log("Direct simple console END");

Order of Output:
Direct simple console BEGIN
Direct simple console END
Text from Promise
undefined
Text from Timer

ログイン後にコピー

マイクロタスクキューに多数のマイクロタスクがある場合、または時間のかかるマイクロタスクがある場合、マイクロタスクキューがコールバックキューを枯渇させる可能性もあります。

console.log("Direct simple console BEGIN");
setTimeout(() => console.log("Text from Timer"),0);
Promise.resolve("Text from Promise1").then(res => console.log(res));
Promise.resolve("Text from Promise2").then(res => {
  for(let i=0; i<5000; i++)
  console.log(res);
});
console.log("Direct simple console END");

ログイン後にコピー

以上がJavaScript エンジンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。