JavaScriptの動作原理を理解しましょう

JavaScript がどのように実行され、その動作メカニズムを理解するには、まずブラウザのカーネルを理解する必要があります。

ブラウザカーネル

カーネルについて学んだ人は、ブラウザによってカーネルが異なることを知っているでしょう。では、どのようなカーネルが存在し、よく使用されるブラウザではどのようなカーネルが使用されているのでしょうか。

• Gecko: 初期には Netscape および Mozilla Firefox ブラウザで使用されていました。
• Trident: Microsoft によって開発され、IE4 ～ IE11 ブラウザーで使用されていますが、Edge ブラウザーは Blink に切り替えました。
• Webkit: Apple が KHTML をベースに開発し、オープンソースで、Safari で使用され、以前は Google Chrome でも使用されていました。
• Blink: Google によって開発され、現在 Google Chrome、Edge、Opera などで使用されている Webkit のブランチ。

いわゆるブラウザ カーネルは、ブラウザのタイプセッティング エンジン、つまりブラウザ エンジンを指します。エンジンの作業実行プロセスは次のとおりです。

しかし、この実行プロセス中に、HTML を解析するときに JavaScript タグに遭遇した場合はどうすればよいでしょうか?
HTML の解析を停止し、JavaScript コードを読み込んで実行します。

もちろん、ここで停止するのではなく、JavaScript コードを非同期的に読み込んで実行してみてはいかがでしょうか?

したがって、ブラウザは、新しい DOM ツリーを頻繁に生成するのではなく、HTML によって解析された DOM と JavaScript 操作後の DOM を組み合わせて最終的な DOM ツリーを生成しようとします。

では、JavaScript コードを実行するのは誰でしょうか?
答え: JavaScript エンジン

JavaScript エンジン

なぜ JavaScript エンジンが必要なのでしょうか?

• 実際、私たちが書いた JavaScript をブラウザに渡して実行しても、Node に渡して実行しても、最終的には CPU によって実行されます。
• しかし、CPU は、実際にはマシン語である独自の命令セットのみを認識し、CPU によって実行できます。
• したがって、JavaScript コードを実行用の CPU 命令に変換する JavaScript エンジンが必要になります。

一般的な JavaScript エンジンは何ですか?

• SpiderMonkey: Brendan Eich (JavaScript の作者) によって開発された最初の JavaScript エンジン。
• Chakra: Microsoft によって開発され、Internet Explorer で使用されます。
• JavaScriptCore - Apple が開発した WebKit の JavaScript エンジン。
• V8: Google が開発した強力な JavaScript エンジンで、Chrome が他の多くのブラウザよりも優れている点にも貢献しています。(V8 は強力な JavaScript エンジンです)

V8エンジン

• V8 は、C++ で記述された Google のオープンソースの高性能 JavaScript および WebAssembly エンジンで、Chrome や Node.js などで使用されています。
• ECMAScript と WebAssembly を実装し、x64、IA-32、ARM、または MIPS プロセッサを使用する Windows 7 以降、macOS 10.12 以降、Linux システムで実行されます。
• V8 はスタンドアロンで実行することも、任意の C++ アプリケーションに埋め込むこともできます。

V8 エンジンが JavaScript コードを実行する原理:

インタープリターは JavaScript コードを直接理解できないため、Parse モジュールは JavaScript コードを AST (抽象構文木) に変換します。

• 関数が呼び出されない場合、AST に変換されません。
• Parse の V8 公式ドキュメント: https://v8.dev/blog/scanner

IgnitionはASTをバイトコードに変換するインタープリタです

• 同時に、TurboFan の最適化に必要な情報 (実際の計算に必要な関数パラメータの型情報など) も収集します。
• 関数が 1 回だけ呼び出されると、Ignition はバイトコードを解釈して実行します。
• Ignition の V8 公式ドキュメント: https://v8.dev/blog/ignition-interpreter

TurboFan は、バイトコードを CPU が直接実行できるマシン コードにコンパイルするコンパイラです。

• 関数が複数回呼び出されると、ホット関数としてマークされ、TurboFan によって最適化されたマシン コードに変換され、コードの実行パフォーマンスが向上します。
• ただし、マシン コードは実際には ByteCode に復元されます。これは、関数のその後の実行中に型が変更された場合 (たとえば、sum 関数は最初は数値型を実行しましたが、後で文字列型に変更された場合)、以前に最適化されたマシン コードは操作を正しく処理できず、バイトコードに変換されるためです。
• TurboFan の V8 公式ドキュメント: https://v8.dev/blog/turbofan-jit

上記はJavaScriptコードの実行プロセスです

学び、記録し、お互いを励まし合いましょう！

JavaScript の仕組みについての記事はこれで終わりです。JavaScript の仕組みについてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。