「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > ブラウザに URL を入力するとどうなりますか?

ブラウザに URL を入力するとどうなりますか?

2024 年 11 月 5 日に公開
ブラウズ:470

ブラウザに URL を入力して Enter キーを押したときに、舞台裏で何が起こっているのか考えたことはありますか?このプロセスは想像よりも複雑で、いくつかのステップがシームレスに連携して、要求した Web ページを配信します。この記事では、URL の入力から完全に読み込まれた Web ページの表示までの過程を探り、それをすべて可能にするテクノロジーとプロトコルに光を当てます。

What Happens When You Type a URL Into a Browser?

ステップ 1: URL を入力して IP アドレスに変換する

ブラウザに URL (例: www.example.com) を入力すると、旅が始まります。ブラウザの最初のタスクは、この人間が読める URL を IP アドレス (Web サイトをホストしているサーバーの数値アドレス) に変換することです。私たちはドメイン名を使用しますが、コンピューターは 192.0.2.1.

のような数値アドレスを使用して通信するため、この変換は非常に重要です。

IP アドレスを見つけるために、ブラウザはプロセスを高速化するためにいくつかのキャッシュをチェックします:

  • ブラウザ キャッシュ: 繰り返しの検索を避けるために、以前の IP アドレスを保存します。
  • オペレーティング システム (OS) キャッシュ: ブラウザのキャッシュに見つからない場合は、OS キャッシュをチェックします。
  • ルーターまたはローカル キャッシュ: ブラウザはルーターのキャッシュまたはローカル ネットワーク キャッシュをチェックする場合があります。
  • ISP キャッシュ: 最後に、インターネット サービス プロバイダー (ISP) は IP アドレスのキャッシュを保持します。

これらのキャッシュに IP アドレスが含まれていない場合、ブラウザは DNS (ドメイン ネーム システム) ルックアップを実行します。

ステップ 2: DNS ルックアップと IP アドレスの解決

IP アドレスがどのキャッシュにも見つからない場合、ブラウザは DNS ルックアップを開始します。 DNS をインターネットの電話帳と考えてください。DNS は、いくつかの手順を経てドメイン名を IP アドレスに変換します。

  1. 再帰的 DNS ルックアップ: DNS リゾルバーは、要求された IP アドレスが見つかるまで、さまざまな DNS サーバーに対して再帰的クエリを実行します。
  2. ルート DNS サーバー: リゾルバーは最初にルート DNS サーバーにクエリを実行し、ルート DNS サーバーはそれを TLD (トップ レベル ドメイン) DNS サーバー (.com や .org など) に転送します。
  3. 権威 DNS サーバー: TLD サーバーは、正しい IP アドレスを提供するドメイン (例: example.com) の権威 DNS サーバーを指します。

この情報を使用して、ブラウザは Web サーバーとの接続を確立できます。

ステップ 3: TCP 接続と HTTPS ハンドシェイクを確立する

ブラウザは IP アドレスを取得すると、HTTP (または HTTPS) リクエストを送信して Web サーバーとの通信を開始します。ただし、データを交換する前に、TCP 3 ウェイ ハンドシェイク:

と呼ばれるプロセスを通じて TCP (伝送制御プロトコル) 接続を確立する必要があります。
  1. SYN: クライアントは SYN (同期) メッセージを送信して接続を要求します。
  2. SYN-ACK: サーバーは SYN-ACK (同期確認) メッセージで応答します。
  3. ACK: 最後に、クライアントは ACK (肯定応答) メッセージを送り返し、接続を確立します。

HTTPS 経由で Web サイトにアクセスしている場合は、追加の手順である SSL/TLS ハンドシェイクが発生し、ブラウザとサーバー間で交換されるデータが確実に暗号化されます。

  1. サーバーは公開キーをブラウザに送信します。
  2. ブラウザは、この公開キーを使用してセッション キーを暗号化し、それを送り返します。
  3. サーバーは秘密キーを使用してこのセッション キーを復号します。
  4. 双方が安全な通信を進めるためにこのセッション キーを使用します。

ステップ 4: HTTP リクエストの送信

安全な接続が確立されると、ブラウザは HTTP リクエストを送信してサーバー上の特定のリソースにアクセスします。このリクエストには、ブラウザの種類やアクセスしようとしているページなどの詳細が含まれます。 HTTP リクエストは次のようになります:


GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
Accept: text/html


サーバーはこのリクエストを処理し、リクエストされたリソースを送り返す準備をします。

ステップ 5: サーバーがリクエストを処理し、応答を送信する

リクエストの処理後、サーバーは、HTML、CSS、JavaScript、ページのレンダリングに必要な画像などのリソースを含む HTTP レスポンスを生成します。理想的には、この応答にはステータス コード 200 OK が含まれ、すべてがスムーズに完了したことを示します。

応答の例は次のとおりです:


HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 3485




Example Page


Welcome to Example.com!






ステップ 6: ページのレンダリング

ブラウザはこの応答を受信すると、HTML および CSS ファイルを解析し、これらのファイルに含まれる JavaScript コードを実行することによってページのレンダリングを開始します。このプロセスには、Web ページ上の要素がどのように構造化されているかを表すドキュメント オブジェクト モデル (DOM) の作成が含まれます。

レンダリング エンジンは、この DOM 構造とそれに適用される CSS スタイルに基づいて、画面上のピクセルを描画します。

結論

ブラウザに URL を入力すると何が起こるかを理解すると、最新の Web テクノロジーがいかに複雑でありながら効率的であるかがわかります。ドメイン名から IP アドレスへの変換から、安全な接続の確立、ページのシームレスなレンダリングまで、各ステップはコンテンツを迅速かつ安全に配信するために重要な役割を果たします。

次回オンラインで閲覧するときは、お気に入りの Web サイトでスムーズなナビゲーションを楽しめるように、これらすべての舞台裏のプロセスが連携して動作していることをじっくりと理解してください。

さらに読む

Web テクノロジーがどのように機能するかについて知識を深めることに興味がある方、またはより技術的な洞察を探している方向け:

  • DNS の仕組み
  • TCP/IP について
  • HTTPS 接続

これらのリソースを探索することで、デジタル世界がどのように運営されているかについてさらに詳しく知ることができます!

リリースステートメント この記事は次の場所に転載されています: https://dev.to/vyan/what-happens-when-you-type-a-url-into-a-browser-2mh2?1 侵害がある場合は、study_golang@163 までご連絡ください。 .comを削除してください
最新のチュートリアル もっと>
  • ウェブサイトのHTMLコード
    ウェブサイトのHTMLコード
    航空関連のウェブサイトを構築しようとしています。 AI を使用してコードを生成し、Web サイト全体を生成できるかどうかを確認したかっただけです。 HTML Web サイトはブログと互換性がありますか? それとも JavaScript を使用する必要がありますか?これがデモとして使用したコードです。...
    プログラミング 2024 年 11 月 5 日に公開
  • プログラマーのように考える: Java の基礎を学ぶ
    プログラマーのように考える: Java の基礎を学ぶ
    この記事では、Java プログラミングの基本的な概念と構造を紹介します。変数とデータ型の紹介から始まり、演算子と式、および制御フロー プロセスについて説明します。次に、メソッドとクラスについて説明し、次に入出力操作を紹介します。最後に、この記事では、給与計算の実際の例を通じて、これらの概念の適用を示...
    プログラミング 2024 年 11 月 5 日に公開
  • PHP GD は 2 つの画像の類似性を比較できますか?
    PHP GD は 2 つの画像の類似性を比較できますか?
    PHP GD は 2 つの画像の類似性を判断できますか?検討中の質問は、次の方法を使用して 2 つの画像が同一であるかどうかを確認できるかどうかを尋ねます。 PHP GD の違いを比較します。これには、2 つの画像の差を取得し、画像全体が白 (または均一な色) で構成されているかどうかを判断する必要...
    プログラミング 2024 年 11 月 5 日に公開
  • これらのキーを使用して上級レベルのテストを作成します (JavaScript でのテスト要求)
    これらのキーを使用して上級レベルのテストを作成します (JavaScript でのテスト要求)
    この記事では、すべての上級開発者が知っておくべき 12 のテストのベスト プラクティスを学びます。 Kent Beck の記事「Test Desiderata」は Ruby で書かれているため、実際の JavaScript の例が表示されます。 これらのプロパティは、より良いテストを作成できるように...
    プログラミング 2024 年 11 月 5 日に公開
  • matlab/octave アルゴリズムを C に移植することによる AEC への最適なソリューション
    matlab/octave アルゴリズムを C に移植することによる AEC への最適なソリューション
    終わり!自分自身に少し感動しました。 当社の製品にはエコーキャンセル機能が必要であり、考えられる技術的解決策が 3 つ特定されました。 1) MCU を使用してオーディオ信号のオーディオ出力とオーディオ入力を検出し、オプションの 2 つのチャネル切り替えの間のオーディオ出力とオーディオ入力の強度に応...
    プログラミング 2024 年 11 月 5 日に公開
  • Web ページを段階的に構築する: HTML の構造と要素を調べる
    Web ページを段階的に構築する: HTML の構造と要素を調べる
    ?今日は、私のソフトウェア開発の旅において重要なステップとなります。 ?私は最初のコード行を書き、HTML の本質を掘り下げました。対象となる要素とタグ。昨日は、Web サイトを構造化するためのボックス化テクニックを検討しました。そして今日は、ヘッダー、フッター、コンテンツ領域などのセクションを作成...
    プログラミング 2024 年 11 月 5 日に公開
  • プロジェクトのアイデアはユニークである必要はありません: その理由は次のとおりです
    プロジェクトのアイデアはユニークである必要はありません: その理由は次のとおりです
    イノベーションの世界では、プロジェクトのアイデアが価値があるためには革新的であるか、完全にユニークである必要があるという誤解がよくあります。しかし、それは真実とは程遠いです。私たちが今日使用している成功した製品の多くは、主要な機能セットを競合他社と共有しています。彼らを区別するのは必ずしもアイデアで...
    プログラミング 2024 年 11 月 5 日に公開
  • HackTheBox - ライトアップ編集部 [退職]
    HackTheBox - ライトアップ編集部 [退職]
    Neste writeup iremos explorar uma máquina easy linux chamada Editorial. Esta máquina explora as seguintes vulnerabilidades e técnicas de exploração: S...
    プログラミング 2024 年 11 月 5 日に公開
  • コーディング スキルをレベルアップするための強力な JavaScript テクニック
    コーディング スキルをレベルアップするための強力な JavaScript テクニック
    JavaScript is constantly evolving, and mastering the language is key to writing cleaner and more efficient code. ?✨ Whether you’re just getting starte...
    プログラミング 2024 年 11 月 5 日に公開
  • ReactJS で再利用可能な Button コンポーネントを作成する方法
    ReactJS で再利用可能な Button コンポーネントを作成する方法
    ボタンは、React アプリケーションの間違いなく重要な UI コンポーネントであり、ボタンはフォームの送信や新しいページを開くなどのシナリオで使用される可能性があります。 React.js で再利用可能なボタン コンポーネントを構築し、アプリケーションのさまざまなセクションで利用できます。その結果...
    プログラミング 2024 年 11 月 5 日に公開
  • Apache HttpClient 4 でプリエンプティブ Basic 認証を実現するにはどうすればよいですか?
    Apache HttpClient 4 でプリエンプティブ Basic 認証を実現するにはどうすればよいですか?
    Apache HttpClient 4 によるプリエンプティブ基本認証の簡素化Apache HttpClient 4 は以前のバージョンのプリエンプティブ認証方式を置き換えましたが、代替手段を提供します。同じ機能を実現するため。プリエンプティブ基本認証への直接的なアプローチを求める開発者のために、こ...
    プログラミング 2024 年 11 月 5 日に公開
  • 例外処理
    例外処理
    例外は実行時に発生するエラーです。 Java の例外処理サブシステムを使用すると、構造化され制御された方法でエラーを処理できます。 Java は、例外処理に対する使いやすく柔軟なサポートを提供します。 主な利点は、以前は手動で行う必要があったエラー処理コードが自動化されたことです。 古い言語では、...
    プログラミング 2024 年 11 月 5 日に公開
  • 「dangerouslySetInnerHTML」を使わずに React で生の HTML を安全にレンダリングする方法は?
    「dangerouslySetInnerHTML」を使わずに React で生の HTML を安全にレンダリングする方法は?
    より安全な方法を使用して React で生の HTML をレンダリングするReact では、危険な SetInnerHTML の使用を回避し、より安全な方法を使用して生の HTML をレンダリングできるようになりました。 。ここには 4 つのオプションがあります:1. Unicode エンコーディン...
    プログラミング 2024 年 11 月 5 日に公開
  • PHPは死んだのか?いいえ、繁盛しています
    PHPは死んだのか?いいえ、繁盛しています
    PHP は常に批判されながらも繁栄し続けているプログラミング言語です。 使用率: W3Techs によると、2024 年 8 月の時点で、世界中の Web サイトの 75.9% が依然として PHP を使用しており、Web サイトの 43% は WordPress で構築されています。開発言語として...
    プログラミング 2024 年 11 月 5 日に公開
  • PgQueuer: PostgreSQL を強力なジョブ キューに変換する
    PgQueuer: PostgreSQL を強力なジョブ キューに変換する
    PgQueuer の紹介: PostgreSQL を使用した効率的なジョブ キューイング Dev.コミュニティへようこそ! 開発者が PostgreSQL データベースを操作する際のジョブ キューの処理方法を大幅に合理化できると信じているプロジェクトを共有できることを嬉しく思います...
    プログラミング 2024 年 11 月 5 日に公開

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3