ブラウザのアドレスバーにURLを入力してEnterキーを押すとどうなりますか？

你越是认真生活，你的生活就会越美好-フランクロイドライト
「生命の果実」の古典的な引用

詳細

URLを解析する

浏览器アドレスバーを介してキャプチャしたurl地址後、最初に对url地址进行解析。次の図に、URLの解像度を示します。

上記の部分を含む完全なURLは、
协议部分通常httpまたはhttpsです。
域名部分baidu.comやIPアドレスなどのドメイン名にすることができ、ドメイン名も最終的にIPアドレスに解決されます。IPアドレスの役割は、インターネット上のサーバーの場所を判別し、
続いて端口号ポート番号を判別して、サーバーで実行されている特定のプログラムを判別することです。パス部分は、プログラム内のリソースの特定のIDを表し、
查询参数主な機能はデータを送信することです。

URL構成とハッシュ属性

DNS解決

IPアドレスは覚えにくく、ドメイン名も覚えやすいため、一般的には事業者からドメイン名を購入する必要があります。IPアドレスとドメイン名は拘束力があるので、ここではDNS解析、実際には、いわゆるDNS解決を行う必要があります根据域名找到其绑定的 ip地址。

検索シーケンスは次のとおりです

。DNS検索プロセスの解決：

• 浏览器缓存ドメイン名に一度アクセスすると、結果がブラウザにキャッシュされるため、最初に存在するかどうかがチェックされます。
• オペレーティングシステムにも独自のがありますが、そのDNS缓存前に、ドメイン名が存在するかどうかを確認します本地的Hosts文件。
• 路由器中国には独自のものがあり缓存ます。
• IPS DNS缓存クライアントコンピュータに設定されています首选DNS服务器。
• これまでのすべてのケースでキャッシュが見つからない場合は、インターネットに接続してリクエストを転送します互联网的根域。

下の図はDNS的一个查询过程

TCP接続

ターゲットを決定した後服务器的ip地址和端口号、リモートサーバーとの確立を開始しますTCP链接。三次握手プロセスは次のとおりです。

• 客户端：メッセージを送信して、お待ちください...
• 服务端：メッセージを受信して​​クライアントに返信するこのとき、クライアントがメッセージを受信した後、クライアントの観点からメッセージを送信できることがわかります。ただし、サーバーは、メッセージを正常に送信できるかどうかをまだ確認していません。
• 客户端：サーバーからの返信を受信した後、サーバーにメッセージを送信します。サーバーから見ると、メッセージは正常に送信できることがわかります。

絵は次のように描かれています：

TCPスリーウェイハンドシェイクの利点は、送信者が受信者がまだオンラインであることを確認できることです。

httpリクエストを送信する

http协议そのtcp/ip协议上に構築されており、tcpはスムーズな接続を保証し、httpは正常に要求して応答できます。まず、httpリクエストが1つ无状态的请求あり、それはブラウザによってのみ開始でき、サーバーが応答します。

ブラウザから送信されるリクエストメッセージには、次の情報が含まれます

• リクエストパス
• クエリパラメータ
• リクエスト方法
• リクエストヘッダー
• リクエスト本文

サーバーがリクエストを受信します

サーバーは、ブラウザーによって送信されたhttp要求をリッスンします。ブラウザー要求が送信されると、サーバーは要求を受け入れ、対応する情報を解析し、処理するための対応するロジックを選択します（たとえば、対応する静的ページを検索します。ファイルを保存し、データベースを操作し、転送します...）、処理された結果でブラウザに応答します。

ノードサーバーの簡単な例は次のとおりです。

const http = require('http'); // 引入http模块

const server = http.createServer((req, res) => {
    
    
	// req保存了浏览器携带的信息
    // 解析出req的相关信息，比如 路径 请求方法 请求头 请求体等
    // 编写服务端逻辑处理代码
    // 响应
    res.end();
})

server.listen(3000, () => console.log('::3000'));

// 假设该程序巡行在 ip地址为 140.143.201.230的服务器上
// 假设 140.143.201.230 绑定的域名是 www.aabbcc.com
// 那么请求地址 可以为   http://www.aabbcc.com:3000/home

// 当浏览器请求 http://www.aabbcc.com:3000/home之后，会DNS解析到服务器的ip地址为140.143.201.230，那么上述http.createServer接收的回调函数就会执行。

サーバーの応答

サーバーはロジックを実行した後、ブラウザーに応答する必要があります（サーバーからデータを取得する場合でも、サーバーで実行される操作の場合でも、ブラウザーに応答する必要があります）。

応答には通常、次の部分が含まれます

• ステータスコード
• ステータステキスト
• 応答ヘッダー
• レスポンスボディ

サーバーが応答すると、ブラウザ側で確実に受信されます。ブラウザ側が完全に受信するTCPと続行4次挥手し、接続が切断されます。

TCP接続がダウンしています

TCP连接切断を通過する必要がある"四次挥手"ため、一方の当事者が他方の当事者のパッシブリリースをアクティブにリリースする必要があります。一般的なプロセスは次のとおりです。

1. ブラウザは、サーバーに今すぐ切断する必要があることを通知するメッセージを送信します（最初の波）
2. サーバーは切断の要求を受信すると、ブラウザーにメッセージを返し、解放する準備をしていることをブラウザーに通知します（2番目の手の波）
3. この時点で、ブラウザはメッセージを受信した後、サーバーのリリースが完了するのを待っており、サーバーはプロセスをリリースする準備をしています
4. サーバーのリリースが完了したら、リリースしたことをブラウザに通知します。（3回目の手を振る）
5. ブラウザは、サーバーのリリース完了メッセージを受信すると、サーバーにメッセージを送信して、リリースが完了したことをサーバーに通知します。サーバーがメッセージを受信すると、リリース完了メッセージが通知されたことを確認できます（第4波）
   

ブラウザ解析リソース

ブラウザはサーバーからリソースを受信すると、リソースを解析します。

1. まず、応答ヘッダーを確認し、応答ヘッダーの指示に従って、リダイレクト、Cookieの保存、gzipの解凍、リソースのキャッシュなど、さまざまな操作を行います。
2. 次に、MIMEタイプを取得し（応答ヘッダーのContent-Typeの値を確認します）、さまざまなリソースタイプに応じてさまざまな解析方法を使用します

ページをレンダリングする

一般的に、アドレスバーからアドレスを入力した後、ほとんどの場合、応答はhtmlファイルであるため、ページがhtmlページをどのようにレンダリングするかについて説明しましょう。htmlページには、通常、css、js、picturesなどのリソースも埋め込まれています。したがって、これらのリソースが解析されると、ターゲットサーバーに対して再度要求が行われ、URLアドレスの解析から始まるさまざまな手順が実行されます。

ページ全体の読み込みを次の図に示します。

HTMLページの読み込み

最初に知っておくべきことは、ブラウザがそれを上から下に1行ずつ解析することです。

1. デコード：返送されるのは実際にはいくつかのバイナリバイトデータであり、ブラウザは、HTMLコードであるファイルの指定されたエンコーディング（UTF-8など）に従ってそれを文字列に変換する必要があります
2. 事前分析：事前分析では、処理時間を短縮するために事前にリソースをロードします。これにより、imgタグのsrc属性など、リソースを要求するいくつかの属性が識別され、この要求が要求キューに追加されます。
3. 記号化：記号化は字句解析のプロセスです。入力は記号に解析されます。HTML記号には、開始タグ、終了タグ、属性名、および属性値が含まれます。ステートマシンを使用してシンボルの状態を識別します。たとえば、<、>に遭遇すると変化します。
4. ツリーを構築する：シンボル化の前のステップで、パーサーはこれらのタグを取得し、適切な方法でDOMオブジェクトを作成し、これらのシンボルをDOMオブジェクトに挿入します。

ブラウザのフォールトトレランスメカニズム：ブラウザで「無効な構文」のようなエラーが発生したことはありません。これは、ブラウザが間違った構文を修正してから動作し続けるためです。

css解析

ブラウザがCSSをダウンロードすると、CSSパーサーは検出したCSSを処理し、文法仕様に従ってすべてのCSSを解析してトークン化し、ルールテーブルを取得します。
ノードに対応するCSSルールに一致する場合、順序は右から左です。たとえば、div p { font-size :14px }最初にすべてのpタグを検索してから、その親要素がであるかどうかを判別しdivます。

したがって、CSSを作成するときは、できるだけidとclassを使用し、カスケードしすぎないようにしてください。

javaScriptのコンパイルと実行

一般的なプロセスは次のとおりです。

主に3つの段階

1. 字句解析：jsスクリプトが読み込まれた後、最初に文法解析段階に入ります。最初にコードブロックの文法が正しいかどうかを分析します。正しくない場合は、「文法エラー」をスローして実行を停止します。
2. コンパイル前：jsには、グローバル環境、関数環境、evalの3つの動作環境があります。別のオペレーティング環境に入ると、対応する実行コンテキストが作成されます。別のコンテキストに応じて、関数呼び出しスタックが形成されます。スタックの最下部は常にグローバル実行コンテキストであり、スタックの最上部は常に現在の実行コンテキストです。 。
3. 実行：jsはシングルスレッドですが、実際に作業に参加するスレッドは4つあります：JSエンジンスレッド（メイン）、イベントトリガースレッド、タイマートリガースレッド、HTTP非同期リクエストスレッド

総括する

閲覧場所のアドレスバーからアドレスを入力し、Enterキーを押します。これはリクエストの開始と見なすことができるため、必然的に次の手順が実行されます。

1. URLアドレスを解決する
2. DNS解決
3. TCPリンク
4. httpリクエストを送信する
5. サーバーがリクエストを受信します
6. サーバーの応答
7. TCP接続がダウンしています
8. ブラウザ解析リソース

次に、ブラウザはアドレスバーにアドレスを入力するだけでなくリクエストを送信できることを理解する必要があります。たとえば、タグ、img、リンク、スクリプト、フォーム、ajax、フェッチなど、これらのメソッドはすべてhttpリクエストを送信できます。その後、すべて上記のプロセスを経て、最終的にリソースを取得しますが、リソースが異なる場合、ブラウザはそれを異なる方法で処理します。

---

谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起 变得更强

元のリンク
がブラウザのアドレスバーにURLを入力し、Enterキーを押すとどうなりますか？

推奨読書
ハードコア！HTTPの一般的なインタビューの質問の30枚の写真と
CORSを完全に説明する15枚の美しい動画（クロスドメインリソース共有、同一生成元戦略）
Vueソースコード学習（継続的な更新）