web-dev-qa-db-ja.com

ブラウザでのページレンダリングプロセスについて説明してください。

まず第一に、私はこの質問で取り上げられているリクエスト/レスポンスプロセス全体には興味がありません

ブラウザでレンダリングされたページを取得するためにブラウザのアドレスバーにURLを入力することから完了するプロセスは何ですか？

サーバーからhtml応答を受け取ったら、ブラウザー内で何が起こっているのか知りたいのですが。この質問をする目的は、クライアント側のスクリプトの内部の詳細を理解することです。また、Webブラウザの構成要素を抽象的な概念で説明できると便利です。 CSSエンジン、JavaScriptエンジンなどと呼ぶことができます。目的は、私が行っているWeb開発を正確に視覚化することです。

残念ながら、この問題に対処するWebリソースは見つかりませんでした。これらの概念を説明するリソースがそこにある場合はご容赦ください。この質問で答えるのが難しすぎる場合は、リソース（本など）を参照してください。

javascriptcssbrowserrenderingclient-side
37
pphanireddy

以下の手順を実行すると、リクエストのライフサイクルとレスポンスのレンダリング方法が明確になります。

  1. お好みのブラウザのアドレスバーにURLを入力します。

  2. ブラウザはURLを解析して、プロトコル、ホスト、ポート、パスを見つけます。

  3. HTTPリクエストを形成します（おそらくプロトコルでした）

  4. ホストに到達するには、まず人間が読めるホストをIP番号に変換する必要があります。これは、ホストでDNSルックアップを実行することによって行われます。

  5. 次に、指定したポート（ほとんどの場合、ポート80）で、ユーザーのコンピューターからそのIP番号へのソケットを開く必要があります。

  6. 接続が開かれると、HTTP要求がホストに送信されます。ホストは、指定されたポートでリッスンするように構成されたサーバーソフトウェア（ほとんどの場合Apache）に要求を転送します。

  7. サーバーはリクエストを検査し（ほとんどの場合パスのみ）、リクエストの処理に必要なサーバープラグインを起動します（使用するサーバー言語、PHP、Java、.NET、Pythonに対応していますか？）

  8. プラグインは完全なリクエストにアクセスし、HTTP応答の準備を開始します。

  9. 応答を作成するために、データベースに（ほとんどの場合）アクセスします。リクエストのパス（またはデータ）のパラメータに基づいて、データベース検索が行われます

  10. データベースからのデータは、プラグインが追加することを決定した他の情報とともに、長いテキスト文字列（おそらくHTML）に結合されます。

  11. プラグインはそのデータをいくつかのメタデータ（HTTPヘッダーの形式）と組み合わせ、HTTP応答をブラウザーに送信します。

  12. ブラウザは応答を受け取り、応答内のHTML（95％の確率で壊れている）を解析します

  13. DOMツリーは壊れたHTMLから構築されます

  14. 新しい要求は、HTMLソース（通常、画像、スタイルシート、JavaScriptファイル）で見つかった新しいリソースごとにサーバーに対して行われます。

  15. 手順3に戻り、リソースごとに繰り返します。

  16. スタイルシートが解析され、それぞれのレンダリング情報がDOMツリーの対応するノードに添付されます

  17. JavaScriptが解析および実行され、DOMノードが移動され、それに応じてスタイル情報が更新されます

  18. ブラウザはDOMツリーと各ノードのスタイル情報に従って画面にページをレンダリングします

  19. 画面にページが表示されます

  20. プロセス全体が遅すぎたといらいらします。

17
Subhash Chandra

これについては、MozillaのDavid Baronによる優れた講演で詳しく説明されています。これは Faster HTML and CSS：Layout Engine Internals for Web Developers というタイトルのビデオであり、DOMツリーを画面にレンダリングする5つのステップを案内します。

  1. DOMを構築する
  2. スタイルを計算する
  3. レンダリングツリーを構築する
  4. レイアウトの計算
  5. ペイント
4
Chris Calo

ページのレンダリングプロセスについて詳しく説明します。 OPが質問で尋ねたように、私は要求/応答プロセスに焦点を合わせていないことに注意してください。

サーバーがリソース（HTML、CSS、JS、画像など）をブラウザーに提供すると、以下のプロセスが実行されます。

解析-HTML、CSS、JS
Rendering-DOMツリーの構築→Render Tree→Render Treeのレイアウト→Render Treeのペイント

  1. レンダリングエンジンは、要求されたドキュメントのコンテンツをネットワーク層から取得し始めます。これは通常8kBのチャンクで行われます。
  2. DOMツリーは、壊れた応答から構築されます。
  3. 新しい要求は、HTMLソース（通常、画像、スタイルシート、JavaScriptファイル）で見つかった新しいリソースごとにサーバーに対して行われます。
  4. この段階で、ブラウザはドキュメントをインタラクティブとしてマークし、「据え置き」モードのスクリプトの解析を開始します。スクリプトはドキュメントの解析後に実行する必要があります。ドキュメントの状態は「完了」に設定され、「ロード」イベントが発生します。
  5. 各CSSファイルは、StyleSheetオブジェクトに解析されます。各オブジェクトには、セレクターを含むCSSルールと、CSS文法に対応するオブジェクトが含まれます。構築されたツリーはCSSCOMと呼ばれます。
  6. DOMとCSSOMの上に、レンダリングされるオブジェクトのセットであるレンダリングツリーが作成されます。各レンダリングオブジェクトには、対応するDOMオブジェクト（またはテキストブロック）と計算されたスタイルが含まれます。つまり、レンダーツリーはDOMの視覚的表現を表します。
  7. Render Treeの構築後、「レイアウト」プロセスが実行されます。これは、各ノードが画面に表示される正確な座標を指定することを意味します。
  8. 次の段階はペイントです。RenderTreeをたどり、各ノードはUIバックエンドレイヤーを使用してペイントされます。
  9. 再描画：ページ上の要素の位置に影響を与えない要素のスタイル（背景色、境界線の色、可視性など）を変更すると、ブラウザは新しいスタイルを適用して要素を再描画します（つまり、「再描画」を意味します）または「リスタイル」が起こっている）。
  10. リフロー：変更がドキュメントのコンテンツや構造、または要素の位置に影響を与えると、リフロー（または再レイアウト）が発生します。

Webブラウザの内部構造は何ですか？browser structure
上記のポイントで説明されているページレンダリングプロセスを理解するには、Webブラウザの構造も理解する必要があります。

ユーザーインターフェース：ユーザーインターフェースには、アドレスバー、戻る/進むボタン、ブックマークメニューなどが含まれます。要求されたページを表示するウィンドウを除く、ブラウザのすべての部分が表示されます。
ブラウザエンジン：ブラウザエンジンは、UIとレンダリングエンジン間のアクションをマーシャリングします。
レンダリングエンジン：レンダリングエンジンは、要求されたコンテンツの表示を担当します。たとえば、要求されたコンテンツがHTMLの場合、レンダリングエンジンはHTMLとCSSを解析し、解析されたコンテンツを画面に表示します。
Networking：ネットワーキングは、プラットフォームに依存しないインターフェースの背後にある異なるプラットフォームの異なる実装を使用して、HTTPリクエストなどのネットワークコールを処理します。
I backend： UIバックエンドは、コンボボックスやウィンドウなどの基本的なウィジェットを描画するために使用されます。このバックエンドは、プラットフォーム固有ではない一般的なインターフェースを公開します。その下では、オペレーティングシステムのユーザーインターフェイスメソッドが使用されます。
JavaScript engine： JavaScriptエンジンは、JavaScriptコードの解析と実行に使用されます。
データストレージ：データストレージは永続化レイヤーです。ブラウザは、Cookieなどのあらゆる種類のデータをローカルに保存する必要がある場合があります。ブラウザは、localStorage、IndexedDB、WebSQL、FileSystemなどのストレージメカニズムもサポートしています。

注：
レンダリングプロセス中、グラフィカルコンピューティングレイヤーは、汎用CPUまたはグラフィカルプロセッサGPUも使用できます。グラフィカルレンダリング計算にGPUを使用すると、グラフィカルソフトウェアレイヤーがタスクを複数の部分に分割するため、レンダリングプロセスに必要な浮動小数点計算にGPUの大規模な並列処理を利用できます。

役立つリンク：
1。 https://github.com/alex/what-happens-when
2。 https://codeburst.io/how-browsers-work-6350a4234634

2
Shwetabh Shekhar