フロントエンドJavaScriptの動作原理

1. JavaScript エンジンとは何ですか?

JavaScriptエンジンは、JavaScript の実行時にソース コードをマシン コードにコンパイルすることを主な機能とするコンピュータ プログラムです。

各主要 Web ブラウザには独自のJavaScriptエンジンがあり、通常はwebブラウザ ベンダーによって開発されます。

• Google Chrome V8。

• Mozilla Firefox Spider Monkey。

• Safari Javascript Core Webkit。

• Edge (Internet Explorer)

以前のJavaScriptエンジンは主に Web ブラウザで使用されていましたが、 nodejsの登場によりこの制限は解消されました。

2. V8エンジン

V8 には、 parser 、インタープリター ( Ignition )、最適化コンパイラー ( TurboFan ) が含まれています。

パーサー:抽象構文ツリーを生成するために使用されます。

インタープリター (Ignition):ソース コードをバイトコードに変換します。

最適化コンパイラ ( TurboFan ):インライン キャッシュなどのいくつかの最適化コンパイルを実行します。

以下は、V8 エンジンの一般的なワークフローです。

• まず、パーサーは抽象構文木を生成します。
• 次に、インタープリターは構文ツリーに基づいて V8 形式のバイトコードを生成します。
• 次に、最適化コンパイラがバイトコードをマシンコードにコンパイルします。

3. ランタイム環境

ブラウザ実行環境では、ブラウザは HTTP リクエスト、タイマー、イベントなどのWeb APIを提供します。

サーバー実行環境では、nodejs が API を提供します。

以下は、ブラウザで実行されているときのJavaScriptのアーキテクチャです。メモリ ヒープ、メモリ スタック、イベント ループ、コールバック キューが含まれます。

スタック
ヒープ
コールスタック
コールバックキュー
イベントループ

4. ランタイムコールスタック

次のコードは、 JavaScript実行のコール スタックの変更を示しています。

関数 add(x, y) {
    x + y を返します。
}

関数 print(x, y) {
    console.log('x+y=',add(x, y))
}

印刷(1, 3)

5. 非同期タスク

JavaScript最初にprint関数を実行し、次にWeb API setTimeout()を呼び出します。Web Web API setTimeout()のコールバック関数を保存し、3 秒後にコールバック関数をコールバック キューに追加します。イベント ループはコール スタックが空であることを検出すると、キュー内のコールバック関数をコール スタックに移動して実行します。

関数 add(x, y) {
    x + y を返します。
}

関数 print(x, y) {
    setTimeout(関数(){
        console.log('x+y=',add(x, y))
    }, 3000)
}

印刷(1, 3)

6. まとめ

JavaScript主にJavaScriptエンジンとランタイム環境で実行されます。エンジンは js ソース コードをコンピューターが理解できるマシン コードに変換し、ランタイム環境は基盤となるコンピューターと通信するための API とランタイム実装を提供します。

フロントエンド JavaScript の動作原理に関するこの記事はこれで終わりです。JavaScript の動作原理に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。