JavaScriptは解析またはレンダリングで追加および実行されますか？
私の知る限り、各Webページは2段階のプロセスで作成され、Webサーバー要求によって開始され、Webサーバー応答で終了します。
- Parsing：マークアップ（HTMLなど）はそのまま実行されるか、PHPなどの「サーバー側」または「バックエンド」プログラミング言語を実行して作成されます。
- Rendering：スタイル（CSSなど）が、解析された構造に追加されます。
レンダリングは、解析と同時に、または解析後に実行できます。それは、Webアプリケーションが誰によって構築されたかに依存します。
私の問題
解析またはレンダリングで、JavaScriptが（通常）どこに来るのかわかりません
私はafterレンダリングと仮定しますが、レンダリングが完了する前であっても、その一部はおそらくです。
私の質問
JavaScriptは解析またはレンダリングで追加および実行されますか？
削除される可能性のあるuser:Nielへのコメント：
@ニール私は質問をするときに何も忘れなかった理由を例示するために質問を編集しました。 JavaScriptがWebページのライフサイクルの3つの段階すべてで読み込まれることを知りませんでした。つまり、解析、レンダリング、および対話なので、当初想定した「解析またはレンダリング」だけではありません。 amonの回答を読んでからコメントを読むと、JavaScriptについて具体的に説明した内容を理解するのに役立ちました。
JavaScriptの実行はページの通常のライフサイクルと交互に行われるため、少し複雑です。
まず、ブラウザはHTMLコードを解析してDocument Object Modelにする必要があります。パーサーがスクリプトタグを検出すると、スクリプトはすぐに解析されて実行されます。スクリプトはdocument.write()を介してHTMLコードを変更できます。
たとえば完全なコードがまだ受信されていない場合など、HTMLコードがまだ完全に解析されていない場合でも、ブラウザーはすぐにDOMのレンダリングを試みます。ブラウザは、DOMが変更された場合、またはスタイル情報が利用可能になった場合、たとえば正しいフォントがロードされた場合などに、レンダリングを更新します。
適切な注意を払わない限り、ユーザーエクスペリエンスはかなりぎこちなくなる可能性があります。同期JavaScriptは、その実行がさらに解析をブロックするため、特に問題を引き起こします。これは、並列にロードされた可能性のある他のリソースを発見する可能性があります。したがって、ブロックを防ぐためのテクニックがいくつかあります。
- スクリプトが読み込まれて実行されるまでブラウザがブロックする必要がないように、スクリプトタグにasync属性を使用します。
- 関連するリソースをできるだけ早くリンクおよびプリロードして、並行してダウンロードできるようにする
document.write()を避け、DOMの準備ができたら代わりにDOM操作を実行します- dOMの準備ができるまで重要でないJSコードを延期する
- 理想的には、クリティカルパスからJSコードを削除します。つまり、クライアント側のDOM操作に依存しないでください。つまり、Reactはありません。代わりに、サーバー側のテンプレートを使用します。これは、SPAのような非常に動的なアプリケーションでは実現できない場合があります。
用語に関する注記：「サーバー側レンダリング」とは、CSSを使用してDOMをレンダリングすることではなく、DOMをHTMLにシリアル化することを意味します。つまり、これは、PHPページなど）としてサーバー上で実行される従来のテンプレートエンジンに似ています。クライアントの場合、HTMLの生成方法は関係ありません。静的HTMLの違いを区別することはできません。ファイルと動的にレンダリングされたテンプレート最後に、ブラウザはHTTP経由でHTMLコードを受信するだけで、ブラウザは解析およびレンダリングする必要があります。
私はamonの回答を受け入れて賛成しました。まず、コミュニティメンバーに賛成するよう提案することから始めます。したがって、以下はuser:Neilとuser: whatsisnameによるamonの回答とコメントの両方から抽出したコアアイデアの要約です。
JavaScriptは、Webページのライフサイクルの3つの段階すべてで実行（ロード）できます。
- 解析中
- レンダリング
- インタラクション（たとえば、人間とWebサイトのWebページ）
したがって、私が最初に想定したように、それは必ずしも「解析中」または「レンダリング中」または「両方」にあるとは限りません。
JavaScriptが実行されるかどうか、および実行されるタイミングは、一般にWebアプリケーション（Webサイトなど）のアーキテクチャーにのみ依存し、特にWebノード（WebサイトのWebページなど）のアーキテクチャーに依存します。