web-dev-qa-db-ja.com

ブラウザページのライフサイクルシーケンスはどのように機能しますか？

ブラウザーの動作に関するプレゼンテーションを作成したいのですが、ブラウザーのURLが要求されるたびに発生する正確なライフサイクルシーケンスを知っている人はいますか？

応答がサーバーから受信された後に起こるステップは何ですか：

  1. レンダリング-CSSフィルターアプリケーション、Webkitなど...
  2. Javascript-ロードと実行
  3. CSSアプリケーション
  4. DOMの構築/ DOMはどの時点でどのように記述されますか？
  5. クッキー
  6. その他のネットワーク関連の活動など.

-これが正しい順序であるかどうかは静かではありません...

それはすべてのブラウザで同じですか、異なるブラウザは異なるライフサイクルを持っていますか？

注-以下のCedによる各ステップの詳細を含む、よく書かれた回答。私が実際に探していたのは "Critical Rendering Path"-プロセスの一般的な段階は他の良い人によってよく説明されています答えます。

神に感謝し、みんなお疲れ様でした！

javascripthtmlcssbrowserlifecycle
28
levi

あなたが話しているのはCritical Rendering Pathです。

ポイント1.、3、4は、次のように再開できます。

  1. ドキュメントオブジェクトモデル（DOM）の構築
  2. CSSオブジェクトモデル（CSSOM）の構築
  3. レンダーツリーの構築
  4. レイアウト
  5. ペイント。

舞台裏で起こることの内訳はここにあります。

1。 DOMオブジェクトの構築

最初のステップは、DOMの作成です。実際、ネットワークから受け取るのはバイトであり、ブラウザーはいわゆるDOMツリーを使用します。そのため、これらのバイトをDOMツリーに変換する必要があります。

enter image description here

  1. ページをバイトとして受け取ります。ブラウザはそれをテキストに変換します。
  2. テキストはノードに変換されます。
  3. ノードは「オブジェクト」に変換されます
  4. DOM TREEと呼ばれるツリーの構築。

開発者ツールをチェックして、所要時間を確認できます。

enter image description here

ここでは、4.938msかかったことがわかります。

このプロセスが完了すると、ブラウザーはページの完全なコンテンツを取得しますが、ブラウザーをレンダリングできるようにするには、CSSOMモデルとも呼ばれるCSSオブジェクトモデルを待たなければなりません。レンダリングされたとき。

2。 CSSの処理

Cssの場合、上記と同じです。ブラウザはこれらのファイルをCSSOMに変換する必要があります。

enter image description here

Cssもツリー構造です。実際、親要素にfont-sizeを設定すると、子はそれを継承します。

enter image description here

開発者ツールでは、スタイルの再計算と呼ばれます

enter image description here

CSSはクリティカルレンダリングパスの最も重要な要素の1つです。ブラウザはページ内のすべてのcssファイルを受信して​​処理するまでページレンダリングをブロックするため、CSSはレンダリングブロックです

3。レンダーツリー

CSSOMとDOMを組み合わせて表示します。

enter image description here

4。レイアウト

すべてをピクセル単位で計算する必要があります。そのため、要素の幅が50％であると言うと、背後のブラウザーはピクセル単位で変換します。

enter image description here

レンダーツリーが更新されるたびに、またはビューポートのサイズが変更されるたびに、ブラウザーはレイアウトを再度実行する必要があります。

5.Paint

ステップは、これをすべて画面上のピクセルに変換します。これはペイントステップです。

Javascript

JavaScriptのライフサイクルについては、情報 こちら をご覧ください。

その要点は、あなたが最も気にしているイベントはDOMContentLoadedであるということです。これは、DOMの準備ができたときです。

ブラウザが最初にHTMLをロードし、<script>...</script>テキストでは、DOMの構築を継続できません。今すぐスクリプトを実行する必要があります。したがって、DOM Content Loadedは、このようなスクリプトがすべて実行された後にのみ発生する可能性があります。

また、外部スクリプト（srcを使用）では、スクリプトの読み込みおよび実行中にDOMビルドが一時停止されます。したがって、DOM Content Loadedは外部スクリプトも待機します。

唯一の例外は、非同期および遅延属性を持つ外部スクリプトです。スクリプトを待たずに処理を続行するようブラウザに指示します。したがって、ユーザーはスクリプトの読み込みが完了する前にページを見ることができ、パフォーマンスが向上します。

それに加えて、このすべてのJavaScriptはどこにありますか？

さて、再描画の間に実行されています。ただし、ブロックされています。ブラウザはJavaScriptの実行を待ってからページを再描画します。つまり、ページに適切な応答（多くのfps）を持たせたい場合、JSは比較的安価である必要があります。

クッキー

HTTP要求を受信すると、サーバーは応答と共にSet-Cookieヘッダーを送信できます。通常、Cookieはブラウザによって保存され、その後、Cookie値はCookie HTTPヘッダーのコンテンツと同じサーバーに対して行われるすべてのリクエストとともに送信されます。さらに、特定のドメインおよびパスへの制限と同様に、有効期限の遅延を指定して、Cookieが送信される期間とサイトを制限できます。

ネットワーキングに関しては、これはブラウザーのライフサイクルの範囲を超えています。これはあなたの質問です。これも私はあまり詳しくありませんが、TCP here について読むことができます。あなたが興味を持っているのは handshake =。

ソース：

36
Ced

このトピックに関する多くの説明を見つけることができますが、ブラウザがWebページをレンダリングする方法を理解するための最も簡単な説明は次のとおりです。

  1. 好みのブラウザのアドレスバーにURLを入力します。
  2. ブラウザーはURLを解析してプロトコル、ホスト、ポート、およびパスを見つけ、HTTP要求（おそらくプロトコル）を形成します。
  3. ホストに到達するには、最初に人間が読めるホストをIP番号に変換する必要があり、ホストでDNSルックアップを行うことでこれを行います
  4. 次に、指定されたポート（ほとんどの場合ポート80）で、ユーザーのコンピューターからそのIP番号へのソケットを開く必要があります
  5. 接続が開かれると、HTTP要求がホストに送信されます
  6. ホストは、指定されたポートでリッスンするように構成されたサーバーソフトウェア（ほとんどの場合Apache）に要求を転送します
  7. サーバーはリクエスト（多くの場合パスのみ）を検査し、リクエストの処理に必要なサーバープラグインを起動します（使用するサーバー言語、PHP、Java、.NET、Pythonに対応？）
  8. プラグインはリクエスト全体にアクセスし、HTTPレスポンスの準備を開始します。
  9. 応答を作成するには、データベースにアクセスします（ほとんどの場合）。要求のパス（またはデータ）のパラメーターに基づいて、データベース検索が行われます
  10. データベースからのデータは、プラグインが追加することを決定した他の情報とともに、長いテキスト文字列（おそらくHTML）に結合されます。
  11. プラグインは、そのデータを（HTTPヘッダーの形式で）いくつかのメタデータと組み合わせ、HTTP応答をブラウザーに送り返します。
  12. ブラウザーは応答を受信し、応答内のHTML（95％の確率で破損している）を解析します。
  13. 壊れたHTMLからDOMツリーが構築され、HTMLソースにある新しいリソース（通常は画像、スタイルシート、JavaScriptファイル）ごとにサーバーに新しいリクエストが行われます。手順3に戻り、リソースごとに繰り返します。
  14. スタイルシートが解析され、それぞれのレンダリング情報がDOMツリーの一致するノードに添付されます。
  15. Javascriptが解析および実行され、それに応じてDOMノードが移動され、スタイル情報が更新されます。
  16. ブラウザはDOMツリーと各ノードのスタイル情報に従って画面にページをレンダリングし、画面にページを表示します。

Source

15
Abhishek Pandey

何が起こるかを見たい人には以下を提案したいと思います、それは安い答えですが、ブラウザがURLのコンテンツを構築するためにファイルのカスケードを取得する方法を説明するのに役立つかもしれません（この場合はhtml ）。

  1. Chromeでデモンストレーションするために使用するページを参照します（またはかなり複雑な例についてはこのページを使用します）
  2. コンソールを開きます（Ctrl + Shift + i）
  3. オプションから「ネットワーク」を選択します
  4. F5を押す

設定で遊んでください。 [パフォーマンス]タブで作成されたタイムラインも確認する必要があります

  1. オプションから「パフォーマンス」を選択します
  2. F5を押す

ここでは、パフォーマンスを調整するのが便利な場合があります。そのため、それが実演したい場合は、リアルタイムで（遅い）視聴できます。

重要なことは（HTMLページを例として使用）、CSSのレンダリング/適用/ JavaScriptの実行の順序は、DOMのどこに表示されるかによって異なります。必要なリソースが利用可能であることを条件に、ロード後の任意の時点でスクリプトを実行することが可能です。 CssはHTMLドキュメントの一部（インライン）である場合もあれば、非常にビジーなサーバーから来て適用されるまで10〜20秒かかる場合もあります。これが助けになることを願っています-R

4
Robert Taylor
  1. ほとんどの質問に対する答え 「Googleを検索するとどうなるか」 。
  2. ブラウザは html構文 標準に従ってHTMLをページにレンダリングします。ブラウザは非常に寛容であり、無効なHTMLなどが存在することに注意してください。
  3. Cssは css grammar に従ってページに適用されます。
  4. すべてのブラウザは、 ECMAスクリプト標準 に従ってjsを実装する必要があります。

その他の役立つリソース：

  1. Firefox 3Dティルトプラグイン Webページの視覚化と、さまざまなレイヤーでのコンテンツのレンダリング方法を支援します。 Layers in the 3D plugin

  2. Chromeの[パフォーマンス]タブ ページの読み込み中に何が起こるか、およびdomツリーがどのように構築されるかを適切に視覚化します。レンダリングプロセスのボトルネックを特定するのに役立ちます。

  3. Chrome：// net-internals /を開くと、キャッシュされたHTMLコンテンツ、キャッシュされた画像、DNSキャッシュ、ポートを開くなど、ブラウザの多くのバックエンド機能を見ることができます。

2
TheChetan

otherアクティビティに言及しているため、ブラウザのURLがリクエストされたときにユーザーによるを意味するのではないかと心配しています。

ユーザーコンテンツ、マークアップ、画像を含むことができる最初のドキュメントを取得した後：

  • リンクされた埋め込みリソース（CSS、画像）は、追加のHTTP要求を介して要求されます。
  • JSは、追加の （a）同期リクエスト をトリガーして、アセットやデータなどを取得または保存できます。（ [〜＃〜] xml [〜＃〜] 、 [〜＃〜] json [〜＃〜] 、...）
  • 追加の sockets を開いて、あらゆる種類の（バイナリ）データをやり取りできます。
  • ローカルストレージ（Cookie、 indexedDB 、ブラウザキャッシュ、..）を使用して、後続のリクエストでデータを再利用できます
  • 多くAPIs を通じて、ページはクライアントのハードウェア（カメラ、GPS、マイク、スピーカー、ジョイスティック、ファイルシステムなど）を使用できます。
  • すべての種類のクライアント側プラグインを呼び出すことができます：PDFリーダー、Flash/Silverlight、Citrix接続、電子メールクライアント
  • このページは、同じページの他のインスタンスと双方向で通信できます

認証、SSL、 [〜＃〜] cors [〜＃〜] などのような多くのフローチャートがあります。Cedの答えは非常に詳細（+1！）ですが、それは単なるヒントです氷山の。おそらく、あなたは [〜＃〜] kiss [〜＃〜] プレゼンテーションの視聴者のために、あなたが選択する必要があります。

1
Code4R7