ブラウザがEnterキーを押すとどうなるか

「設立は最初の勉強に基づいており、勉強は勉強に基づいています」

01序文

この記事は、実際にはブラウザのレンダリング原理について述べています。通常のユーザーは、ページを表示できるかどうかを確認するためだけにブラウザを操作しますが、フロントエンドプログラマとして、例外が表示された場合のトラブルシューティング方法に注意する必要があります。

実際、深く勉強すると、中間プロセスが思ったより複雑であることがわかります。これには、IPアドレス解決、DNSサーバークエリ、サーバー応答などの一連のプロセスが含まれます。以下では、ブラウザーの動作を分析します。
ここに画像の説明を挿入

02対応プロセス

私自身の要約から、それは以下のプロセスに分けることができます：

IPアドレス検索
TCP接続を確立する
サーバー処理
返信
ページのレンダリング

IPアドレス検索

ページにwww.baidu.comと入力した場合、BaiduのIPアドレスを取得するにはどうすればよいですか？まず、小さなエピソードを挿入しましょう。実際、BaiduサーバーのIPアドレスは複数あります。検索エンジンの場合、毎日大量の訪問があり、負荷分散処理が必要です。そうしないと、クラッシュしてハングアップします。

IPアドレスクエリは、実際には数ステップで取得されます

まず、ブラウザは自身のDNSキャッシュをクエリします
そうでない場合は、オペレーティングシステムにアクセスして検索し、このマシンのホストにキャッシュがあるかどうかも確認します
そうでない場合、私はルーターに行って見つけます
ない場合は、ローカルドメインネームサーバーにアクセスします。通常はChina Telecomなどのローカルサービスオペレーターにアクセスします
オペレーティングシステムはIPアドレスを取得してキャッシュします
ブラウザは、オペレーティングシステムから返されたIPアドレスを取得します。これもキャッシュされます。

ここに来ると、ブラウザはwww.baidu.comのIPアドレスを取得し、そのアドレスにアクセスして接続します。

TCP接続を確立する

TCP接続を確立するための最も重要なことは、3つのハンドシェイクを実行することです
ここに画像の説明を挿入

データを送信する前に、ネットワークプロトコルのレイヤー、アプリケーションレイヤー、トランスポートレイヤー、ネットワークレイヤー、リンクレイヤーを通じてデータをカプセル化します。サーバーはデータを受信すると、データを解凍し、最終的にHTTPデータを取得します。TCP / IP階層モデルは通常、次のレイヤー（図）に分割され、各レイヤーはそれに対応する異なるプロトコルを持ち、データの転送を保証します。
ここに画像の説明を挿入

では、各層はどのプロトコルに対応していますか？

アプリケーション層：ユーザーにアプリケーションサービスを提供するときの通信アクティビティを決定します。FTP（ファイル転送プロトコル）、DNS（ドメインネームシステム）、HTTP（ハイパーテキスト転送プロトコル）、Telnet（ネットワークリモートアクセスプロトコル）など。

トランスポート層：トランスポート層は、上位のアプリケーション層へのネットワーク接続にある2台のコンピューター間のデータ転送を提供します。TCP（Transmission Control Protocol）とUDP（User Datagram Protocol）の2つのプロトコルを提供します。主に、データのフォーマット、データの確認、およびデータ損失の再送信に使用します。

ネットワーク層：ネットワーク上を流れるデータパケットを処理するために使用されます。データパケットは、ネットワークを介して送信されるデータの最小単位です。相手のコンピュータにアクセスしてデータを転送する方法を規定しています。ネットワーク層は、IPプロトコルを介してデータパケットを相手に送信します。IPアドレスはノードが割り当てられているアドレスを示し、MACアドレスはネットワークカードが属しているアドレスを指します（通常は変更されません）。IP層では、対応するMACアドレスはARP（アドレス解決プロトコル）を通じて取得されます。

リンク層：ネットワークに接続されたハードウェア部分を扱います。これには、制御オペレーティングシステムの物理的な可視部分、ハードウェアデバイスドライバー、ネットワークカード、光ファイバーが含まれます。ハードウェア部分はMACアドレスに依存します。

サーバー処理

データがサーバーに到着すると、解析されます。処理結果はステータスコードを返します。一般的なステータスコードは次のとおりです。

200 OK：クライアント要求は成功しました
400 Bad Request：クライアント要求に、サーバーが理解できない構文エラーがあります
401 Unauthorized：リクエストは不正です。このステータスコードは、WWW-Authenticateヘッダーフィールドで使用する必要があります
403 Forbidden：サーバーはリクエストを受信しましたが、サービスの提供を拒否しています
404 Not Found：リクエストされたリソースは存在しません
500内部サーバーエラー：サーバーで予期しないエラーが発生しました
503サーバーを使用できません：サーバーは現在クライアントのリクエストを処理できず、しばらくすると通常に戻る可能性があります

返信

ブラウザは、サーバーから返されたデータを受信すると、データを前処理し、ステータスコードに応じて異なる処理を実行します。たとえば、403ステータスコードを使用すると、ブラウザは再リクエストせずにキャッシュを使用できます。ステータスコードが200の場合は、新しいリクエストである可能性があり、ブラウザはリソースを解凍してキャッシュする場合があります。最後のステップは、リソースを解析してページをレンダリングすることです。

ページのレンダリング

ブラウザがデータを受信すると、次の手順を実行します。

HTMLファイルを解析してDOMツリーに変換する
CSSファイルを解析してCSSOMツリーに変換する
プロダクションレンダーツリー
GPUへの情報の送信、複合レンダリング

コンピュータの送信は0101データで送信されることがわかっているため、受信したデータもこの形式であるので、解析する必要があります。最初に、バイトデータを文字列（コード）に変換します。次に、文字列の字句解析がトークンに変換され、このプロセスがトークン化されます。次のステップでは、タグをノードに変換し、最後にさまざまな接続に基づいてDOMツリーを構築します。

CSSの構文解析の原理は同じで、2つのツリーの構文解析は並列です。
ここに画像の説明を挿入

最後は、2つのツリーをマージする操作です。レンダリングツリーは、表示する必要のないノードを無視することに注意してください。たとえば、ノードのスタイルは次のように設定されています。

03再描画とリフロー

再描画とリフローは2つのツリーの分析プロセスに影響を与えるので、再描画とリフローとは何ですか？

再描画

テキストの色や背景色の変更など、DOMの一部のスタイルを変更する場合、これらのブラウザーは幾何学的プロパティを再計算して新しいスタイルを直接描画する必要はありません。

逆流

DOMの幾何学的プロパティを変更すると、通常、要素の幅と高さが変更され、ブラウザは位置を再計算してから再描画します。

それでは、どうすればそれを回避できますか？

絶対配置の使用を減らし、代わりに変換を使用する
ディスプレイの使用を減らし、代わりに可視性を使用する
ノードのネストが多すぎないようにするCSSスタイル。マッチングルールは右から左です。

04レンダリングのブロック

JS操作はシングルスレッドであるため、HTMLコードとJSコードを解析すると、競合が発生します。私たちの期待は、最初にページをレンダリングしてから、JSコードを実行することです。したがって、次のことに注意する必要があります。

下部に<script>タグを配置します
ページが「筋」を付けないようにスタイルファイルを上に配置します

DOM解析とCSS解析は2つの並行プロセスであり、CSSの読み込みはDOM解析をブロックしません

レンダリングツリーはDOMツリーとCSSOMツリーに依存しているため、CSSOMツリーの構築が完了するまで、つまり、CSSリソースの読み込みが完了するまで（またはCSSリソースの読み込みが失敗するまで）待たないと、レンダリングを開始できません。したがって、CSSの読み込みはDOMのレンダリングをブロックします。
ここに画像の説明を挿入