キャリッジリターンのURLを入力して、ブラウザの後に何が起こったのか？（超詳細版）

序文

　　この問題は、決まり文句となっているが、多くの場合、インタビューのタイトルのフィナーレとして表示され、多くのオンラインの記事がありますが、最近のアイドル、退屈して、記事が自分自身を指摘しない、私は以前より徹底的に理解を感じます。

　　このノートでは、私が一覧表示されます私がまとめた記事の数十を見たので、比較的少ないフル、私はフロントエンドをしていたので、それはその部分をレンダリングするブラウザページ、その他の部分を分析することで、より焦点になる2日間です興味のあるキーワードは、検査を所有することができ、

注意：この資料の手順が基づいて、要求は、単純なHTTPリクエストではなく、HTTPS、HTTP2、最も単純なDNS、プロキシなしで、これは非現実的であるものの、サーバーは、ベースで問題ありません。

一般的なプロセス

URL解析
DNSルックアップ
TCPコネクション
リクエストを処理しています
受け入れ応答
レンダリングページ

、URLの解析

　　アドレス解決：

　　　　まず、あなたの入力は、キーワードまたは有効なURLで検索すると、自動完了、文字エンコーディング、あなたが入力した内容に基づいて他の操作であるかを決定。

　　HSTS

　　　　セキュリティ上のリスクに、ページへのアクセスにHTTPSを使用するようにHSTS力クライアントを使用しています。参照してください：あなたはHSTS知らない^[1]。

　　その他の操作

　　　　そのようなセキュリティチェック、アクセス制限などのブラウザはまた、いくつかの追加の操作、（国内のブラウザの制限は996.icu前）。

　　キャッシュをチェック

二、DNSクエリ

　　基本的な手順

　　1.ブラウザのキャッシュ

　　　　最初のキャッシュにチェックするブラウザは、システムライブラリ関数は、クエリと呼ばれていません。

　　2.オペレーティングシステムのキャッシュ

　　　　オペレーティングシステムは、独自のDNSキャッシュを持っていますが、その前に、ドメイン名を確認するためにローカルHostsファイルがあるかどうか、DNSサーバーにクエリを送信しません。

　　3.ルータのキャッシュ

　　　　ルータはまた、独自のキャッシュを持っています。

　　4. ISPのDNSキャッシュ

　　　　ISPのDNSは、ほとんどの場合、そこにキャッシュされるクライアントコンピュータの設定、上の優先DNSサーバです。

　　ルートネームサーバへの問い合わせ

　　　　すべての上記の手順の場合、キャッシュされていない、ローカルDNSサーバは、図全体のプロセスの良い解釈以下、インターネット上のルートドメインに要求を転送します。

ポイントに注意を払う必要があります

再帰的：調査の途中ダウンすべての方法は、リターン情報（ローカルDNSサーバにブラウザプロセス）の前に、最終的な結果を返しません。
反復方法は、ルートネームサーバへの問い合わせへの道ローカルDNSサーバです。
DNSハイジャックとは何ですか
最適化遠位DNSプリフェッチ

三、TCPコネクション

　　TCP / IPは、データが送信される4に分割され、各データパッケージがなければ：

1.アプリケーション層：HTTPリクエスト

　　前のステップでは、我々は、サーバーのIPアドレスを持っている、ブラウザは、HTTPメッセージを構築するなど、開始します。

- 要求ヘッダー（ヘッダーを求める）ように要求する方法であって、宛先アドレス、追従するプロトコル、及び
- リクエストボディ（追加パラメータ）

　　これは注意するポイント：

- ブラウザはGET、POSTメソッドを送信し、GETメソッドを使用してページを開くことができます

2.トランスポート層：TCPパケットの送信

　　トランスポート層は、データ（セグメント単位で）分割される転送を容易にするために、サーバに到達するためにTCP接続を開始し、それが便利である場合マーカ番号、正確にサーバーによって受け入れられたメッセージ情報を復元することができます。

　　接続を確立する前に、我々は、TCP 3ウェイハンドシェイクを行います。

「
TCP / IPスリーウェイハンドシェイクについて、インターネットが鮮やかに説明されているスクリプトや写真をたくさん持っています。

知識ポイント：

SYNフラッド攻撃

」

3.ネットワーク層：IPプロトコルアドレスの問い合わせマック

　　データ・セグメント・パッケージとソースと宛先IPアドレスを追加して、伝送経路を見つけるための責任があります。

　　目標アドレスと同じネットワーク上の現在のアドレスかどうかを決定し、MACアドレスから直接送信され、または次のホップアドレスを見つけるためにルーティングテーブルを使用して、ARPプロトコルの使用は、そのMACアドレスを照会されます。

「
注意：OSI参照モデルではARPプロトコルのリンク層に位置しておりますが、TCP / IPで、ネットワーク層は、それが位置しています。
」

4.リンク層：イーサネット・プロトコル

　　イーサネット・プロトコル

　　　　ユニットとしての「フレーム」にイーサネット・プロトコル・データ・パケットによると、各フレームは2つの部分に分割されます。

- - ヘッダー：パケットの送信者、受信者、データの種類
  - ：パケットの詳細

　　MACアドレス

　　　　ネットワークに接続されているすべてのデバイスが「カード」のインターフェイスを持っている必要がありますため、イーサネットが提供する、データパケットが別のカードに一枚のカードから転送され、アドレスカードは、MACアドレスです。すべてのMacアドレスは一から一の容量を持つ、ユニークです。

　　放送

　　　　データを送信する方法は、直接ARPプロトコルを介してネットワークのすべてのマシンに送信されたデータに、受信者アドレスが自身のMACヘッダ情報は、受け入れ一貫そうでなければ廃棄さとを比較し、オリジナルです。

　　注意：受信者は、ユニキャストを答えました。

「
知識ポイント：

ARP攻撃

」

　　サーバーは要求を受け入れ

　　　　受付処理は、上記の手順に逆転され、画像を参照してください。

第四に、サーバーは要求を処理し

　　一般的なプロセス

　　HTTPD

　　　　最も一般的なのは、Windows上の共通HTTPD ApacheやNginxはLinux上、およびIISを持っています。

　　　　これは、要求を取得リッスンし、その要求を処理するために子プロセスを開きます。

　　リクエストを処理しています

　　　　、接続が処理されるTCPパケットを受信した後、HTTPプロトコル（要求メソッド、ドメイン名、パス、など）、およびいくつかの検証を解析します。

- - 仮想ホストの設定ことを確認します
  - この方法ホスティングを受け入れるかどうかを確認します
  - ユーザは、（IPアドレス、ステータス情報などに基づいて）認証方式を使用することができ

　　リダイレクト

　　　　サーバは、HTTPリダイレクトを設定されている場合、戻り 301応答に基づいてブラウザに永久リダイレクト応答は、それがHTTPリクエストを（上記の手順を再実行する）再送。

「
詳しくは：記事を参照してください。^[2]
」

　　URL書き換え

　　　　要求されたファイルが本当であれば、そのような画像など、HTML、CSS、JSファイルとして、URL書き換えルールを見て、それがファイルに直接返されます。

　　　　そうしないと、サーバーは、RESTスタイルのURLを書き換えるための要求に関する規則に従うものとします。

　　　　そして、動的スクリプト言語に基づいて、要求を処理するために、動的文書インタプリタの種類を決定するために呼び出します。

　　　　例示のMVCフレームワークPHP言語では、それが最初の経路に合わせて下にURLによれば、次いで、ルートはそれほど要求を処理するために定義された方法により、環境のパラメータを初期化します。

第五に、ブラウザが応答を受け入れます

　　ブラウザがサーバーのリソースからの応答を受信した後、リソースが分析されます。

　　まず、ステータスコードに応じて、（例えば、前述のリダイレクトなど）さまざまなことをやって、レスポンスヘッダを確認してください。

　　応答は、リソース（例えば、GZIPのような）圧縮されている場合、また、解凍する必要があります。

　　その後、応答リソースがキャッシングを行います。

　　次に、内のリソースの応答に応じたMIME ^[3] （例えば、HTML、画像などの異なる分析方法を有する）応答内容を解析する入力。

第六に、ページのレンダリング

　　ブラウザカーネル

　　別のブラウザカーネルは、レンダリングプロセスはまったく同じではありませんが、一般的なプロセスは同じです。

基本的な流れ

6.1。HTMLの構文解析

　　　　あなたは最初のブラウザの解像度は、上から下へ行ずつ解析されている知っている必要があります。

　　　　解決プロセスは、4つのステップに分けることができます。

　　①デコーディング（符号化）

　　　　送信バックブラウザがHTMLコードで指定されたファイル（例えば、UTF-8）に従って、文字列エンコーディングに変換する必要があり、実際にはいくつかのバイナリデータバイトです。

　　②事前解析された（事前解析）

　　　　事前解決行う処理時間を短縮するために、事前にリソースをロードすることで、それはのような、要求されたリソースのいくつかの特性を認識しimg、タグsrcの属性、および要求は、要求をキューに追加されます。

　　③象徴（トークン化）

　　　　シンボルは、シンボルへの入力を解析する字句解析のプロセスである、開始タグ、終了タグを含むHTMLシンボルは、属性名と属性値。

　　　　これは、ステートマシンの識別記号を通過、遭遇したような<、>状態が変化します。

　　④ビルドツリー（ツリー構築）

「
注：シンボリックツリーが構築され、並列に動作され、それは限り解決はラベルを開始するように、それはDOMノードを作成すると言うことです。
」

　　前のステップで象徴、パーサは適切な方法を作成するために、これらのマーカーを得ること、およびDOMオブジェクトに挿入これらのシンボルDOM主題を。

< HTML > 
< ヘッド> 
    < タイトル>の解析、Webページ</ タイトル> 
</ ヘッド> 
< 身体> 
    < divの> 
        < H1を> Webページを解析する</ H1 > 
        < P >これは、例えばWebページです。</ P > 
    </ DIV > 
</ ボディ> 
</ HTML >

　　ブラウザのフォールトトレラント進

　　　　ブラウザは文法のエラーを修正し、作業を続行するので、あなたは、ブラウザに「無効な構文」エラーのようなものを見たことがありません。

　　イベント

　　　　全体の解決プロセスが完了すると、ブラウザが渡しますDOMContentLoaded通知イベントにDOM解析されました。

　　6.2。CSSの構文解析

　　　　CSSをダウンロードするには、ブラウザたら、CSSパーサは、それが遭遇する任意のCSSを処理する、に従って構文仕様^[4]すべてのCSSを解析し、標識、我々は定期的にテーブルを取得します。

　　CSSルールの試合

　　　　マッチング・ノードは、CSSルールに対応する場合、例えば、右から左へである：div p { font-size :14px }これは、まず検索しますpそれは、親要素か否かが判定されるタグdiv。

　　　　だから我々は、スタック上でない、可能な限りidとクラスで、CSSを書くとき。

　　6.3。レンダリングツリー

　　　　実際には、これはDOMツリーとCSSルールツリーのマージ処理です。

「
注意：このよう設定するなど、レンダリングの必要はありませんそれらのノードを無視するツリーをレンダリングdisplay:noneノードを。
」

　　計算

　　　　可能な値のいずれかを可能にするように計算されたサイズは、3個に低減される：auto割合、PXを、等remへの変換px。

　　カスケード

　　　　ブラウザが実際に対応する要素に適用する必要があるスタイルを決定する方法を必要とするので、それを使用して呼び出されたspecificity式を、式が渡されます：

1. タグ名、クラス、ID
2. インラインスタイルかどうか
3. !important

　　そして、最高の方重み値、に来ます。

　　ブロックレンダリング

　　　　直面したときscriptの時間ラベル、DOMの建物は、スクリプトの実行が完了するまで中断して、DOMツリーを構築していきます。

　　　　しかし、JS依存CSSスタイルならば、それがダウンロードされ、CSSルールが構築されるまでスクリプトの実行を遅らせますブラウザを構築されていません。

　　私たちが知っているすべて：

- CSSブロック実行のJS
- JSは、DOM解析の後ろにブロックすることができます

　　このような状況を回避するために、以下の原則はず。

- 先のJavaScriptリソースのCSSリソース
- 下部のJS HTML、つまり、 </body>前

　　また、あなたはブロッキングモードを変更したい場合は、あなたが遅延し、非同期を使用することができ、以下を参照してください。この記事を^[5]

　　6.4。レイアウト図面

　　　　などのすべてのノードの種、レンダリング幾何学的特性を決定することは：などの場所、サイズ、および最後にボックスモデルを入力し、それが正確に画面内の各要素の正確な位置と大きさを捕捉することができます。

　　　　その後、ツリートラバーサルをレンダリングし、画面にその内容を表示するには、レンダラpaint（）メソッドを呼び出します。

　　6.5。合わせた層をレンダリング

　　　　上記のすべての画像の合併、最終的な出力画像を描画します。

　　6.6逆流と再描画

　　リフロー（リフロー）

　　　　ブラウザは、一部がレイアウトに影響を与える変更を検出見つかったら、からなり、バックして再レンダリング行く必要がありhtml、再帰下降開始ラベルの位置や大きさを再計算します。

　　　　基本的なリフローは、マウスをスワイプすると、ウィンドウのサイズを変更しているため、ページが変更され、避けられません。

　　再描画（再描画）

　　　　背景色、テキストの色を変更するなど、位置変化の要素が周囲の要素に影響を与えないとき、再描画が発生します。

　　　　各再描画した後、ブラウザは層が画面にマージして出力する必要がレンダリング。

　　　　逆流コストが再描画さよりもはるかに高いので、我々は逆流を回避しようとしてください。

　　例えば：

- display:none 逆流をトリガし、 visibility:hidden のみ再描画をトリガーします。

　　6.7。JavaScriptのコンパイラの実装

　　一般的なプロセス

　　これは3つの段階に分けることができます：

　　1.字句解析

　　　　JSスクリプトがロードされた後、それは最初の構文解析フェーズに入ります、それは最初のコードブロックの構文を解析しますし、「構文エラー」とストップの実行を投げ、正しい正しくありません。

　　　いくつかのステップ：

- 単語、例えばvar a = 2,,にvar、a、=、2そのような字句単位。
- 抽象構文木（AST）を変換するための解析、字句単位。
- コード生成、マシン命令に抽象構文木を変換します。

　　2.プリコンパイルされました

　　　　JS 3つの動作環境があります。

- 地球環境
- ファンクション・環境
- evalの

　　　　それぞれが異なった動作環境は、コンテキストに応じて、対応する実行コンテキストを作成し、関数呼び出しスタック、スタック底の形成は、常にグローバルな実行コンテキストスタックとなり、常に現在の実行コンテキストで入ります。

　　実行コンテキストを作成します

　　実行コンテキストを作成するプロセスは、主に次の3つのことを行うには：

変数オブジェクトの作成

パラメータ、関数、変数

スコープチェーンを確立

現在の実行環境は、変数にアクセスできるかどうかを確認してください

これは、決定を指します

　　3.実行

　　　　JSのスレッド

　　JSはシングルスレッドですが、が、実際には合計4つの作品内のスレッド：

「
わずか3援助の、唯一のJSエンジンのスレッドは、実際の実行であります
」

JSエンジンのスレッド：JSカーネルが実行JSスクリプトのメインスレッドを解決するための責任があるとしても、このようなV8エンジンとして、知られています
イベントは、スレッドをトリガー：主に、このようなイベントがトリガされるなど、マウス、キーボード、などのイベントを、制御するために使用するブラウザのカーネルスレッド、所属、イベントハンドラ関数は、JSエンジンのスレッドの実行を待って、イベントキューを促進するために
タイマーがスレッドトリガー：メイン制御をsetIntervalし、setTimeoutタイミングのために、タイミングが終了すると、タイマハンドラは、JSエンジンのスレッドを待って、イベントキューを促進置きます。
非同期HTTPリクエストのスレッド：XMLHttpRequestを介して接続するときは、JSエンジンのスレッドを待って、状態のコールバック関数、イベントキューを促進するためのハンドラの状態を設定した場合、ブラウザは、状態変更のreadyStateを監視するために、新しいスレッドを開きます実行。

　　注：ブラウザが同じドメイン名に制限されている同時接続数、通常6。

　　マクロタスク

　　　　分かれて：

- 同期タスク：唯一の前のタスクの完了後にオーダー実行、タスクの後に実行します
- 非同期タスク：直接トリガ条件が満たされた場合にのみ実行されませんが、関連するスレッドの非同期タスクは、メインスレッドがそのようなように非同期のAjax、DOMイベント、のsetTimeoutとして、実行が完了した開始時にJSエンジン上で実行されるタスクを待って、キュー内のジョブを促進します。

　　マイクロタスク

　　　　マイクロタスク、ES6およびノードの環境下での主なAPI：、。Promiseprocess.nextTick

　　　　非同期タスクの前にマクロの作業の後にマイクロタスクの同期タスクの実装、。

　　コード例

console.log（ '1'）; //マクロタスクの同期

のsetTimeout（関数（）{ 
    にconsole.log（ '2'）; //マクロタスク非同期
}）

新しい新しいプロミス（関数（解決）{ 
    にconsole.log（」3。 '）; //マクロタスク同期
    解決（）; 
}）を（関数（）{ 
    にconsole.log（4' '）//マイクロタスク。
}）

はconsole.log（5'「）//同期マクロタスク。

　　上記符号列を出力する：1,3,5,4,2

参考資料

[1]あなたがHSTSを知らない： http://t.cn/AiR8pTqx

[2]http://t.cn/AiR8pnEC：この記事を参照してください。

[3]MIME：http://t.cn/AiR8prtm

[4]構文仕様：http://t.cn/AiR80GdO

[5]この記事： http://t.cn/AiR80c1k

[6]何が起こる--WHEN-がzh_CN：http://t.cn/AiR80xb5http://t.cn/AiR80xb5http://t.cn/AiR80xb5

[7]DOMへのタグ：のhttp：//t.cn/AiR80djX

[8]ブラウザキャッシュメカニズムの完全な理解：http://t.cn/AiR8Ovob

[9]のブラウザで動作します：最新のWebブラウザの舞台裏：http://t.cn/AiR8Oz06

[10]素人ブラウザのレンダリングの原則：http://t.cn/AiR8O4fO



オリジナル住所ます。https：//4ark.me/post/b6c7c0a2.html

ああ、私は~~貼り付けます