인터넷은 어떻게 작동하나요? 1부

有沒有想過點擊連結時會發生什麼事？ ？ 《互聯網如何運作》將帶您深入數位世界的幕後，將複雜的技術分解為簡單的見解。從資料包到伺服器等，探索為您的線上體驗提供動力的魔力！ （在 AI 的幫助下寫的 Hook，因為我不會：D）

當您造訪 google.com 時會發生什麼？

按下“g”鍵

讓我解釋一下實體鍵盤操作和作業系統中斷。當您按下“g”鍵時，瀏覽器會註冊該事件，觸發自動完成功能。根據您的瀏覽器演算法以及您處於常規模式還是私人/隱身模式，URL 欄下方的下拉式選單中會顯示各種建議。

這些建議通常會根據您的搜尋記錄、書籤、cookie 和流行的網路搜尋等因素進行優先排序和排序。當您繼續輸入“google.com”時，許多進程會在背景運行，並建議會隨著每次按鍵而完善。在您完成輸入之前，瀏覽器甚至可能會預測「google.com」。

瀏覽自動完成序列

「輸入」鍵觸底

為了建立一個起點，讓我們考慮一下鍵盤上的 Enter 鍵到達其行程範圍底部時的情況。此時，專用於 Enter 鍵的電路閉合（機械地或電容式地），允許小電流流入鍵盤的邏輯電路。此電路掃描每個按鍵開關的狀態，濾除開關快速閉合（去抖）產生的電噪聲，並將操作轉換為鍵碼（在本例中為整數 13）。然後鍵盤控制器對該鍵碼進行編碼以進行傳輸到電腦。如今，這幾乎總是透過通用序列匯流排 (USB) 或藍牙連接完成，儘管舊系統使用 PS/2 或 ADB。

如果是 USB 鍵盤：

• 鍵盤由透過電腦 USB 主控制器的接腳 1 提供的 5V 電源供電。
• 按鍵產生的鍵碼儲存在稱為「端點」的內部暫存器中。
• USB 主機控制器大約每 10 毫秒（鍵盤設定的最小間隔）輪詢該“端點”，檢索儲存的鍵碼。
• 金鑰代碼被傳送到 USB 串列介面引擎 (SIE)，並根據 USB 協定將其轉換為一個或多個 USB 封包。
• 這些資料包透過 D 線和 D- 線（中間的兩個引腳）以最大 1.5 Mb/s 的速率傳輸，因為鍵盤被歸類為「低速裝置」（根據 USB 2.0 標準）。
• 電腦的主機 USB 控制器解碼此串列訊號，而人機介面裝置 (HID) 驅動程式則解釋按鍵。最後，按鍵事件被傳遞到作業系統的硬體抽象層。 序列圖

如果是虛擬鍵盤（例如在觸控螢幕裝置上）：

• 當使用者觸摸電容式觸控螢幕時，少量電流會傳送到他們的手指。這種相互作用會擾亂螢幕導電層的靜電場，從而在接觸點產生電壓降。
• 螢幕控制器偵測到這一點並觸發中斷，報告觸控的座標。
• 然後，作業系統會向目前活動的應用程式發出警報，告知其圖形介面內發生了按下事件，通常是在虛擬鍵盤按鈕上。
• 虛擬鍵盤應用程式引發軟體中斷，通知作業系統「按鍵按下」事件。
• 聚焦的應用程式接收此通知並相應地處理按鍵。 描述相同內容的序列圖

中斷觸發 [不適用於 USB 鍵盤]

對於非 USB 鍵盤，例如使用傳統連接（例如 PS/2）的鍵盤，鍵盤透過其中斷請求線 (IRQ) 發出中斷訊號。此 IRQ 由系統的中斷控制器對應到中斷向量（整數）。 CPU 查閱中斷描述符表 (IDT)，該表將每個中斷向量連結到由作業系統核心提供的對應函數（稱為中斷處理程序）。

인터럽트가 트리거되면 CPU는 인터럽트 벡터를 사용하여 IDT를 색인화하고 적절한 인터럽트 핸들러를 실행합니다. 이 프로세스를 통해 CPU가 커널 모드로 전환되어 운영 체제가 키 누르기 이벤트를 관리할 수 있습니다.

WM_KEYDOWN 메시지가 앱으로 전송됩니다(Windows의 경우).

Enter 키를 누르면 HID(휴먼 인터페이스 장치) 전송이 키 다운 이벤트를 KBDHID.sys 드라이버에 전달하여 HID 사용 데이터를 스캔 코드로 변환합니다. 이 경우 스캔 코드는 VK_RETURN(0x0D)이며 Enter 키를 나타냅니다. 그런 다음 KBDHID.sys 드라이버는 모든 키보드 입력을 안전하게 관리하는 KBDCLASS.sys 드라이버(키보드 클래스 드라이버)와 통신합니다. 계속하기 전에 신호는 시스템에 설치된 타사 키보드 필터를 통과할 수 있지만 이는 커널 모드에서도 발생합니다.

다음으로 Win32K.sys가 작동하여 GetForegroundWindow() API를 호출하여 현재 활성화된 창이 무엇인지 확인합니다. 이 함수는 브라우저의 주소 표시줄과 같은 활성 애플리케이션의 창 핸들(hWnd)을 검색합니다. 이 시점에서 Windows "메시지 펌프"는 SendMessage(hWnd, WM_KEYDOWN, VK_RETURN, lParam)를 호출합니다. lParam 매개변수에는 다음을 포함하여 키 누르기에 대한 추가 정보를 제공하는 비트마스크가 포함되어 있습니다.

• 반복 횟수(이 경우 0),
• 스캔 코드(OEM별로 다를 수 있지만 일반적으로 VK_RETURN의 표준),
• 확장 키 플래그(Alt, Shift 또는 Ctrl과 같은 보조 키도 눌렸는지 여부를 나타냄).

SendMessage API는 특정 창 핸들에 대한 메시지를 대기열에 넣습니다. 나중에 창(hWnd)에 할당된 시스템의 기본 메시지 처리 기능(WindowProc라고도 함)이 대기열에 있는 메시지를 검색하고 처리합니다.

이 경우 활성 창은 편집 컨트롤이며 WindowProc 함수에는 WM_KEYDOWN 이벤트에 응답하는 메시지 핸들러가 있습니다. 핸들러는 SendMessage가 전달한 세 번째 매개변수(wParam)를 확인하고 그 값이 VK_RETURN임을 인식하여 사용자가 Enter 키를 눌렀다고 판단합니다. 그러면 애플리케이션에 대한 적절한 응답이 시작됩니다.

KeyDown NSEvent가 앱으로 전송됩니다(OS X의 경우).

OS X에서 키를 누르면 인터럽트 신호가 I/O 키트 키보드 드라이버(커널 확장 또는 "kext")에서 이벤트를 트리거합니다. 이 드라이버는 하드웨어 신호를 키 코드로 변환합니다. 그런 다음 키 코드는 그래픽 사용자 인터페이스를 관리하는 WindowServer로 전달됩니다.

WindowServer는 이벤트에 배치되는 Mach 포트를 통해 키 누르기 이벤트를 적절한 애플리케이션(예: 활성 애플리케이션 또는 청취 애플리케이션)에 전달합니다. 대기줄. 적절한 권한이 있는 애플리케이션은 mach_ipc_dispatch 함수를 호출하여 이 이벤트 큐에 액세스할 수 있습니다.

대부분의 애플리케이션은 사용자 입력 처리를 담당하는 NSApplication 메인 이벤트 루프를 통해 이 프로세스를 처리합니다. 이벤트가 키 누르기인 경우 NSEventTypeKeyDown 유형의 NSEvent로 표시됩니다. 그런 다음 애플리케이션은 이 이벤트를 읽고 그에 따라 응답하여 수신된 키 코드를 기반으로 키 누르기 작업과 관련된 모든 코드를 트리거합니다.

Xorg 서버는 키코드를 수신합니다(GNU/Linux에서)

X 서버를 사용하는 그래픽 환경에서 키를 누르면 X 서버는 evdev(이벤트 장치) 드라이버를 사용하여 키 누르기 이벤트를 캡처합니다. 그런 다음 실제 키보드의 키코드는 X 서버별 키맵과 규칙을 사용하여 스캔코드로 다시 매핑됩니다.

매핑이 완료되면 X 서버는 결과 스캔코드를 창 관리자(예: DWM, Metacity, i3 등)로 전달합니다. 그러면 창 관리자는 현재 초점이 맞춰진 창에 ​​문자나 키 이벤트를 보냅니다. 초점이 맞춰진 창의 그래픽 API는 이 이벤트를 처리하고 누른 키에 따라 올바른 글꼴을 사용하여 해당 필드에 해당 기호를 표시합니다.

이 흐름을 통해 활성 애플리케이션의 인터페이스에서 문자가 올바르게 렌더링되어 하드웨어에서 그래픽 출력까지 키 누름 상호 작용이 완료됩니다.

URL 구문 분석

브라우저는 URL(Uniform Resource Locator)을 구문 분석할 때 다음 구성 요소를 추출합니다.

• 프로토콜: "http" 브라우저는 이것이 하이퍼 텍스트 전송 프로토콜을 사용하여 서버와 통신한다는 것을 이해합니다.
• 리소스: "/" 이는 / 경로가 일반적으로 서버의 루트 또는 홈 페이지를 참조하므로 브라우저가 웹사이트의 기본(인덱스) 페이지를 검색해야 함을 나타냅니다.

이러한 각 구성 요소는 브라우저가 웹에서 원하는 리소스를 해석하고 가져오는 데 도움이 됩니다.

URL ですか、それとも検索語ですか?

プロトコル (「http」など) または有効なドメイン名が指定されていない場合、ブラウザはアドレス バー内のテキストを潜在的な検索語として解釈します。ブラウザは、URL として解決しようとする代わりに、テキストをデフォルトの Web 検索エンジンに転送します。

ほとんどの場合、ブラウザは検索クエリに特別な識別子を追加し、リクエストがブラウザの URL バーからのものであることを示します。これにより、検索エンジンはこれらの検索を適切に処理して優先順位を付け、コンテキストに基づいて結果の関連性を向上させることができます。

このプロセスは、ブラウザーが Web サイトに直接移動するか、入力されたテキストに基づいて検索結果を提供するかを判断するのに役立ちます。

ホスト名の非 ASCII Unicode 文字を変換する

• ブラウザはホスト名で ASCII 範囲外の文字、特に a ～ z、A ～ Z、0 ～ 9、-、または .. のセットに含まれない文字を調べます。
• この場合、ホスト名は google.com であり、ASCII 文字のみが含まれているため、変換は必要ありません。ただし、ホスト名に非 ASCII 文字が含まれている場合、ブラウザは Punycode エンコードを適用してホスト名を有効な ASCII 表現に変換します。このプロセスにより、ホスト名のすべての文字がネットワーク プロトコルで正しく処理されることが保証されます。

HSTS リストを確認する

ブラウザはまず、プリロードされた HSTS (HTTP Strict Transport Security) リストをチェックします。このリストには、HTTPS 経由でのみアクセスすることを明示的に要求した Web サイトが含まれています。

リクエストされた Web サイトがこのリストにある場合、ブラウザは HTTP ではなく HTTPS を使用してリクエストを自動的に送信します。 Web サイトが HSTS リストにない場合、最初のリクエストは HTTP 経由で送信されます。

Web サイトは、プリロードされたリストに含まれていなくても HSTS を実装できることに注意することが重要です。このような場合、ユーザーが行った最初の HTTP リクエストは、以降のリクエストを HTTPS 経由でのみ送信するようブラウザに指示する応答を返します。ただし、この最初の HTTP リクエストはユーザーをダウングレード攻撃にさらす可能性があり、攻撃者がリクエストを傍受し、強制的に暗号化されないままにする可能性があります。この脆弱性のため、最新の Web ブラウザーには HSTS リストが含まれており、そもそも安全でない接続が確立されるのを防ぐことでユーザーのセキュリティを強化しています。

DNS ルックアップ

ブラウザは、ドメインがすでにキャッシュに存在するかどうかを確認することで、DNS ルックアップ プロセスを開始します。 (Google Chrome で DNS キャッシュを表示するには、chrome://net-internals/#dns に移動します。)

ドメインがキャッシュ内に見つからない場合、ブラウザは gethostbyname ライブラリ関数 (特定の関数はオペレーティング システムによって異なる場合があります) を呼び出して、ホスト名解決を実行します。

1. ローカルホストファイルチェック:

   • gethostbyname 関数は、まず、オペレーティング システムによって場所が異なるローカル ホスト ファイルを参照してホスト名を解決できるかどうかを確認します。このファイルは、ホスト名を IP アドレスにマッピングする単純なテキスト ファイルであり、DNS に問い合わせることなく迅速に解決できます。

2. DNS サーバーリクエスト:

   • ホスト名がキャッシュされておらず、hosts ファイルで見つからない場合、ブラウザはネットワーク スタックに設定されている DNS サーバーにリクエストを送信します。このサーバーは通常、ローカル ルーターまたは ISP のキャッシュ DNS サーバーで、今後のリクエストを高速化するために以前に解決された名前を保存します。

3. DNS サーバーの ARP プロセス:

   • DNS サーバーが同じサブネット上にある場合、ネットワーク ライブラリは ARP (アドレス解決プロトコル) プロセスに従って DNS サーバーの IP アドレスを解決し、リクエストがローカル ネットワーク内で正しく送信されるようにします。
   • DNS サーバーが別のサブネット上にある場合、ネットワーク ライブラリは代わりに、デフォルト ゲートウェイ IP の ARP プロセスに従い、リクエストを適切なサブネットにルーティングする仲介者として機能します。

この体系的なアプローチにより、ブラウザはドメイン名を効率的に IP アドレスに解決し、目的の Web サイトへの接続を確立できるようになります。最初にキャッシュを確認し、ローカル ホスト ファイルを使用して、最後に DNS サーバーにクエリを実行することで、ブラウザはホスト名解決にかかる時間を最小限に抑えます。

シーケンス図

ARP 프로세스

ARP(주소 확인 프로토콜) 브로드캐스트를 전송하려면 네트워크 스택 라이브러리에 두 가지 핵심 정보가 필요합니다. 즉, 조회해야 하는 대상 IP 주소와 전송에 사용될 인터페이스의 MAC 주소입니다. ARP 방송에서 나옵니다.

ARP 캐시 확인:

먼저 ARP 캐시에서 대상 IP 주소에 해당하는 항목이 있는지 확인합니다. 항목이 있으면 라이브러리 함수는 다음 형식으로 결과를 반환합니다.
대상 IP = MAC.

항목이 ARP 캐시에 없는 경우:

대상 IP 주소에 대한 항목이 없는 경우 다음 단계를 수행합니다.

• 대상 IP 주소가 로컬 경로 테이블에 나열된 서브넷에 있는지 확인하기 위해 경로 테이블을 참조합니다.
  • 찾으면 라이브러리는 해당 서브넷과 연결된 인터페이스를 사용합니다.
  • 그렇지 않은 경우 라이브러리는 기본적으로 기본 게이트웨이에 연결되는 인터페이스를 사용합니다.
• 그러면 선택한 네트워크 인터페이스의 MAC 주소가 검색됩니다.

  ARP 요청 보내기:

네트워크 라이브러리는 다음 형식으로 계층 2(OSI 모델의 데이터 링크 계층) ARP 요청을 구성하고 보냅니다. ARP 요청:

• 발신자 MAC: 인터페이스:mac:주소:여기
• 발신자 IP: 인터페이스.ip.goes.여기
• 대상 MAC: FF:FF:FF:FF:FF:FF(브로드캐스트)
• 대상 IP: target.ip.goes.here

컴퓨터와 라우터 간의 하드웨어 설정에 따라 ARP 요청 동작이 달라집니다.

직접 연결:

컴퓨터가 라우터에 직접 연결된 경우 라우터는 ARP 응답으로 응답합니다(아래 참조).

바퀴통:

컴퓨터가 허브에 연결된 경우 허브는 다른 모든 포트에서 ARP 요청을 브로드캐스트합니다. 라우터가 동일한 "회선"에 연결된 경우 ARP 응답으로 응답합니다(아래 참조).

스위치:

컴퓨터가 스위치에 연결된 경우 스위치는 로컬 CAM/MAC 테이블을 확인하여 쿼리 중인 MAC 주소가 있는 포트를 식별합니다. 스위치에 MAC 주소에 대한 항목이 없으면 ARP 요청을 다른 모든 포트로 다시 브로드캐스트합니다. 스위치의 MAC/CAM 테이블에 항목이 있으면 해당 MAC 주소가 있는 포트에만 ARP 요청을 보냅니다.

• 라우터가 동일한 "회선"에 있으면 ARP 응답으로 응답합니다(아래 참조).

ARP 응답:

ARP 응답의 형식은 다음과 같습니다.

발신자 MAC: 대상:mac:주소:여기

발신자 IP: target.ip.goes.here

대상 MAC: 인터페이스:mac:주소:여기

대상 IP: 인터페이스.ip.goes.여기

이제 네트워크 라이브러리가 DNS 서버 또는 기본 게이트웨이의 IP 주소를 얻었으므로 DNS 프로세스를 재개할 수 있습니다.

1. DNS 클라이언트는 1023 이상의 소스 포트를 활용하여 DNS 서버의 UDP 포트 53에 대한 소켓 연결을 설정합니다.
2. 응답 크기가 UDP 제한을 초과하는 경우 더 큰 응답을 수용하기 위해 대신 TCP가 사용됩니다.
3. 로컬 또는 ISP DNS 서버에 요청한 정보가 없는 경우 재귀 검색을 시작하여 SOA(권한 시작)에 도달할 때까지 DNS 서버 계층 구조를 쿼리하여 응답이 반환됩니다.

소켓 열기

브라우저가 대상 서버의 IP 주소를 수신하면 이를 URL에 지정된 포트 번호와 결합합니다(HTTP의 기본값은 포트 80, HTTPS의 기본값은 443). 그런 다음 브라우저는 AF_INET 또는 AF_INET6 및 SOCK_STREAM을 사용하여 TCP 소켓 스트림을 요청하는 소켓이라는 시스템 라이브러리 함수를 호출합니다.

전송 계층 처리:

• 이 요청은 먼저 TCP 세그먼트가 생성되는 전송 계층에서 처리됩니다. 대상 포트가 헤더에 추가되고 소스 포트는 커널의 동적 포트 범위(Linux의 ip_local_port_range에 의해 지정됨) 내에서 선택됩니다.

네트워크 계층 처리:

• 이 세그먼트는 네트워크 계층으로 전송되어 추가 IP 헤더로 래핑됩니다. 대상 서버와 현재 컴퓨터의 IP 주소가 모두 삽입되어 패킷을 구성합니다.

링크 레이어 처리:

• 다음에 패킷은 프레임 헤더가 추가된 링크 레이어에 도착합니다. 이 헤더에는 기기 NIC(네트워크 인터페이스 카드)의 MAC 주소와 게이트웨이(로컬 라우터)의 MAC 주소가 포함됩니다. 커널이 게이트웨이의 MAC 주소를 모르는 경우 이를 찾기 위해 ARP 쿼리를 브로드캐스트해야 합니다.

이 시점에서 다음 방법 중 하나를 통해 패킷을 전송할 준비가 되었습니다.

• 이더넷
• 와이파이
• 셀룰러 데이터 네트워크

대부분의 가정 또는 소규모 기업 인터넷 연결의 경우 패킷은 컴퓨터에서 로컬 네트워크를 거쳐 모뎀(변조기/복조기)을 통해 전달됩니다. 이 모뎀은 디지털 1과 0을 전화, 케이블 또는 무선 전화 연결을 통한 전송에 적합한 아날로그 신호로 변환합니다. 연결의 반대편에서는 다른 모뎀이 다음 네트워크 노드에서 처리할 수 있도록 아날로그 신호를 다시 디지털 데이터로 변환합니다. 여기서 발신 주소와 수신 주소가 추가로 분석됩니다.

반대로, 대규모 기업과 일부 새로운 주거용 연결에서는 파이버 또는 직접 이더넷 연결을 사용하므로 데이터가 디지털 상태로 유지되고 처리를 위해 다음 네트워크 노드로 직접 전달됩니다.

결국 패킷은 로컬 서브넷을 관리하는 라우터에 도달하게 됩니다. 거기에서 계속해서 자율 시스템(AS)의 경계 라우터로 이동하고 다른 AS를 통과한 다음 최종적으로 대상 서버에 도착합니다. 경로에 있는 각 라우터는 IP 헤더에서 대상 주소를 추출하여 적절한 다음 홉으로 라우팅합니다. IP 헤더의 TTL(Time to Live) 필드는 이를 처리하는 각 라우터에 대해 1씩 감소됩니다. TTL 필드가 0에 도달하거나 현재 라우터의 대기열에 공간이 없는 경우(네트워크 정체로 인해 발생할 수 있음) 패킷이 삭제됩니다.
이 보내기 및 받기 프로세스는 TCP 연결 흐름에 따라 여러 번 발생합니다.

1. 클라이언트는 ISN(초기 시퀀스 번호)을 선택하고 SYN 비트가 설정된 서버에 패킷을 보내 ISN을 설정하고 있음을 나타냅니다.
2. 서버는 SYN을 수신하고 동의할 경우 다음을 수행합니다.
   • 자체 초기 시퀀스 번호를 선택합니다.
   • ISN을 선택하고 있음을 나타내도록 SYN 비트를 설정합니다.

3. (클라이언트 ISN 1)을 ACK 필드에 복사하고 ACK 플래그를 추가하여 첫 번째 패킷 수신을 승인했음을 나타냅니다.

4. 클라이언트는 다음과 같은 패킷을 보내 연결을 확인합니다.

   • 자체 시퀀스 번호가 늘어납니다.
   • 수신자 확인 번호가 늘어납니다.
   • ACK 필드를 설정합니다.

5. 데이터 전송: 데이터는 다음과 같이 전송됩니다.

   • 한쪽에서 N 데이터 바이트를 전송하면 해당 숫자만큼 시퀀스 번호(SEQ)가 증가합니다.
   • 상대방에서 해당 패킷(또는 일련의 패킷) 수신을 확인하면 상대방으로부터 마지막으로 수신한 시퀀스와 동일한 확인(ACK) 값을 사용하여 ACK 패킷을 보냅니다.

6. 연결 닫기: 연결을 닫으려면:

   • 폐쇄를 개시하는 측에서 FIN 패킷을 보냅니다.
   • 상대방은 FIN 패킷을 확인하고 자신의 FIN을 보냅니다.
   • 초기측에서는 ACK로 상대방의 FIN을 인정합니다.

소켓 열기: 시퀀스 다이어그램

TLS Handshake

• The client computer sends a ClientHello message to the server, which includes its Transport Layer Security (TLS) version, a list of available cipher algorithms, and compression methods.
• In response, the server replies with a ServerHello message that specifies the TLS version, the selected cipher, the selected compression methods, and the server's public certificate signed by a Certificate Authority (CA). This certificate contains a public key that will be used by the client to encrypt the remainder of the handshake until a symmetric key can be agreed upon.
• The client verifies the server's digital certificate against its list of trusted CAs. If trust can be established based on the CA, the client generates a string of pseudo-random bytes and encrypts this string using the server's public key. These random bytes will be used to determine the symmetric key.
• The server decrypts the random bytes using its private key and utilizes these bytes to generate its own copy of the symmetric master key.
• The client sends a Finished message to the server, encrypting a hash of the transmission that has occurred up to this point with the symmetric key.
• The server generates its own hash and then decrypts the hash sent by the client to verify that it matches. If the hashes match, the server sends its own Finished message back to the client, which is also encrypted with the symmetric key.
• From this point forward, the TLS session transmits application (HTTP) data encrypted with the agreed-upon symmetric key.

This handshake process establishes a secure connection between the client and server, ensuring that data transmitted over the connection is protected from eavesdropping and tampering.

If a Packet is Dropped

Sometimes, due to network congestion or flaky hardware connections, TLS packets may be dropped before reaching their final destination. In such cases, the sender must decide how to react. The algorithm governing this response is known as TCP congestion control. The specific implementation can vary depending on the sender, with the most common algorithms being Cubic on newer operating systems and New Reno on many others.

• The client chooses a congestion window based on the maximum segment size (MSS) of the connection.
• For each packet acknowledged, the congestion window doubles in size until it reaches the 'slow-start threshold.' In some implementations, this threshold is adaptive and can change based on network conditions.
• Once the slow-start threshold is reached, the window increases additively for each packet acknowledged. If a packet is dropped, the window reduces exponentially until another packet is acknowledged.

This congestion control mechanism helps optimize network performance and stability, ensuring that data can be transmitted efficiently while minimizing the impact of packet loss.

HTTP Protocol

If the web browser used was developed by Google, instead of sending a standard HTTP request to retrieve a page, it may attempt to negotiate an "upgrade" from HTTP to the SPDY protocol with the server.

If the client is using the HTTP protocol and does not support SPDY, it sends a request to the server in the following format:

GET / HTTP/1.1
Host: google.com
Connection: close
[other headers]

Here, [other headers] refers to a series of colon-separated key-value pairs formatted according to the HTTP specification and separated by single newlines. This assumes that the web browser is free of bugs that violate the HTTP specification and that it is using HTTP/1.1. If it were using a different version, such as HTTP/1.0 or HTTP/0.9, it might not include the Host header in the request.

HTTP/1.1 defines the "close" connection option for the sender to signal that the connection will be closed after the response is completed. For example:

Connection: close

HTTP/1.1 applications that do not support persistent connections MUST include the "close" connection option in every message.

After sending the request and headers, the web browser sends a single blank newline to the server to indicate that the content of the request is complete.

The server then responds with a response code that denotes the status of the request, structured as follows:

200 OK
[response headers]

This is followed by a single newline and then the payload containing the HTML content of www.google.com. The server may either close the connection or, if requested by the headers sent by the client, keep the connection open for reuse in further requests.

If the HTTP headers sent by the web browser contained sufficient information for the web server to determine whether the version of the file cached by the web browser has been unmodified since the last retrieval (for example, if the web browser included an ETagheader), the server may instead respond with:

304 Not Modified
[response headers]

This response will have no payload, and the web browser will retrieve the HTML from its cache.

After parsing the HTML, the web browser (and server) repeats this process for every resource (image, CSS, favicon.ico, etc.) referenced in the HTML page. In these cases, instead of GET / HTTP/1.1, the request will be structured as:

GET /$(URL relative to www.google.com) HTTP/1.1

If the HTML references a resource on a different domain than www.google.com, the web browser returns to the steps involved in resolving the other domain, following all steps up to this point for that domain. The Host header in the request will be set to the appropriate server name instead of google.com.

HTTP Server Request Handling

The HTTPD (HTTP Daemon) server is responsible for handling requests and responses on the server side. The most common HTTPD servers include Apache and Nginx for Linux, as well as IIS for Windows.

1. Receiving the Request: The HTTPD server receives the incoming request from the client.
2. Breaking Down the Request: The server analyzes the request and extracts the following parameters:
   • HTTP Request Method: This could be one of several methods, including GET, HEAD, POST, PUT, PATCH, DELETE, CONNECT, OPTIONS, or TRACE. In the case of a URL entered directly into the address bar, the method will typically be GET.
   • Domain: In this case, the domain is google.com.
   • Requested Path/Page: Here, the requested path is /, indicating that no specific page was requested; thus, / is treated as the default path.
3. Verifying the Virtual Host: The server checks whether a Virtual Host is configured for google.com.
4. Method Verification: The server verifies that google.com can accept GET requests.
5. Client Permission Check: The server checks if the client is allowed to use this method based on criteria such as IP address, authentication, etc.
6. Request Rewriting: If the server has a rewrite module installed (such as mod_rewrite for Apache or URL Rewrite for IIS), it attempts to match the request against any configured rules. If a matching rule is found, the server rewrites the request according to that rule.
7. Content Retrieval: The server retrieves the content that corresponds to the request. In this case, it will typically default to the index file since the request path is /. While there are cases that can override this behavior, using the index file is the most common method.
8. File Parsing and Processing: The server parses the index file according to the designated handler. If Google is using PHP, for example, the server will utilize PHP to interpret the index file and stream the output back to the client.

By following these steps, the HTTPD server efficiently processes incoming requests and returns the appropriate responses to the client.

Browser

The primary functionality of a browser is to present the web resources you choose by requesting them from a server and displaying them in the browser window. The resource is typically an HTML document but may also include PDFs, images, or other types of content. The location of the resource is specified by the user using a URI (Uniform Resource Identifier).

The way a browser interprets and displays HTML files is defined by the HTML and CSS specifications, which are maintained by the W3C (World Wide Web Consortium), the standards organization for the web.

Browser user interfaces share many common features, including:

• An address bar for entering a URI
• Back and forward buttons for navigation
• Bookmarking options for saving favorite pages
• Refresh and stop buttons for refreshing or halting the loading of current documents
• A home button that takes you to your home page

Browser High-Level Structure

The components of a browser can be broken down as follows:

• 使用者介面：這包括網址列、後退/前進按鈕、書籤選單以及瀏覽器顯示的任何其他部分（顯示請求頁面的視窗除外）。
• 瀏覽器引擎：瀏覽器引擎充當使用者介面和渲染引擎之間的橋樑，管理操作和互動。
• 渲染引擎： 負責顯示要求的內容，渲染引擎解析 HTML 和 CSS，將解析後的內容轉換為螢幕上的視覺表示。
• 網路：該元件處理網路調用，例如 HTTP 請求，並利用為各種平台定制的不同實現，同時提供獨立於平台的介面。
• UI 後端： UI 後端負責繪製基本的小部件，如組合框和視窗。它公開了一個不特定於任何平台並依賴作業系統的使用者介面方法的通用介面。
• JavaScript 引擎： 引擎解析並執行 JavaScript 程式碼，允許網頁內的動態內容和互動性。
• 資料儲存：這充當持久層，使瀏覽器能夠在本地保存各種類型的數據，例如cookie。瀏覽器也支援 localStorage、IndexedDB、WebSQL 和 FileSystem 等儲存機制。

每個元件協同工作以創建無縫的瀏覽體驗，使用戶能夠有效地存取網路資源並與之互動。

HTML解析

渲染引擎開始從網路層檢索所請求文件的內容，通常以 8 kB 區塊的形式檢索。 HTML 解析器的主要職責是將 HTML 標記轉換為稱為解析樹的結構化表示。

輸出樹，稱為“解析樹”，由 DOM（文檔物件模型）元素和屬性節點的層次結構組成。 DOM 用作 HTML 文件的物件表示，為 HTML 元素提供與外部腳本（例如 JavaScript）互動的介面。這棵樹的根是「Document」對象，在任何腳本操作之前，DOM 與原始標記保持幾乎一一對應。

解析演算法

由於多種因素，使用傳統的自上而下或自下而上的解析器無法有效地解析 HTML：

• 語言的寬容本質： HTML 的設計對語法錯誤較寬容，即使標記結構不完美，瀏覽器也可以顯示內容。
• 瀏覽器容錯能力：瀏覽器旨在處理無效 HTML 的常見情況，確保使用者獲得功能體驗。
• 解析過程的重入：在其他程式語言中，解析過程中來源保持不變。然而，在 HTML 中，動態元素（例如包含 document.write() 呼叫的 <script> 標籤）可以在解析期間修改輸入，這需要不同的方法。 由於這些挑戰，瀏覽器採用了專為 HTML 客製化的自訂解析器。解析演算法在 HTML5 規範中有詳細描述，由兩個主要階段組成：標記化和樹建構。 </script>

解析完成時的操作

解析完成後，瀏覽器將繼續取得連結到頁面的外部資源，例如 CSS 樣式表、圖片和 JavaScript 檔案。此時，瀏覽器將文件標記為互動式，並開始解析處於「延遲」模式的腳本，這表示這些腳本將在文件完全解析後執行。然後文檔狀態設定為“完成”，並觸發“載入”事件。

重要的是，瀏覽器不會為 HTML 頁面產生「無效語法」錯誤。相反，它們會自動更正任何無效內容並繼續處理文檔，確保使用者可以在最小幹擾的情況下查看網頁。

CSS解釋

CSS解釋的過程涉及幾個關鍵步驟：

• **解析CSS文件：**瀏覽器解析外部CSS文件，
• 建立 StyleSheet 物件： 每個解析的 CSS 檔案都會轉換為 StyleSheet 物件。每個StyleSheet物件都封裝了CSS規則，包括選擇器和對應的CSS聲明。這種結構化表示允許有效存取和操作樣式。
• 解析技術： CSS 解析器可以利用自上而下或自下而上的解析技術，這取決於所使用的特定解析器產生器。這些技術決定了解析器如何讀取和處理CSS規則，影響解析過程的效率和準確性。

透過這種解釋，瀏覽器可以全面了解如何將樣式應用於 DOM 中的 HTML 元素，從而促進網頁呈現出預期的視覺呈現效果。

頁面渲染

網頁的渲染過程涉及幾個結構化步驟：

• フレーム ツリーの作成: レンダリング エンジンは、DOM ノードを走査し、各ノードの計算された CSS スタイルを計算することによって、「フレーム ツリー」または「レンダー ツリー」を構築します。このツリーはページの視覚的な構造を表します。
• 優先幅の計算: フレーム ツリー内の各ノードの優先幅はボトムアップ方式で計算されます。これには、子ノードの推奨幅と、ノードの水平方向のマージン、境界線、およびパディングを合計することが含まれます。
• 実際の幅の計算: 各ノードの実際の幅は、ニーズに基づいて子ノードに利用可能な幅を分配することにより、トップダウンのアプローチで決定されます。
• 高さの計算: 各ノードの高さは、テキストの折り返しを適用し、子ノードの高さをノードのマージン、境界線、およびパディングとともに合計することによってボトムアップで計算されます。
• ノード座標の決定: 各ノードの座標は、前の手順で収集した幅と高さの情報を使用して計算されます。
• 複雑な要素の処理: フローティング要素、絶対的または相対的に配置された要素、またはその他の複雑な機能を使用する要素に対しては、より複雑な計算が実行されます。詳細については、CSS2 の CSS 仕様と現在の CSS の作業を参照してください。
• レイヤーの作成: レイヤーは、再ラスタライズを必要とせずにページのどの部分を一緒にアニメーション化できるかを記述するために作成されます。各フレーム/レンダー オブジェクトは特定のレイヤーに割り当てられます。
• テクスチャの割り当て: レンダリング パフォーマンスを最適化するために、テクスチャはページの各レイヤーに割り当てられます。
• 描画コマンドの実行: 各レイヤーのフレーム/レンダー オブジェクトが走査され、それぞれのレイヤーに対して描画コマンドが実行されます。このレンダリングは CPU で処理することも、D2D (Direct2D) や SkiaGL などのテクノロジーを使用して GPU で直接描画することもできます。
• *計算値の再利用: * レンダリング プロセスでは、Web ページの前回のレンダリングで計算された値を利用できるため、計算作業が少なく、より効率的な増分変更が可能になります。
• レイヤーの合成: 最終的なページ レイヤーは合成プロセスに送信され、そこでブラウザーの Chrome、iframe、アドオン パネルなどの他の表示コンテンツと結合されます。
• レンダリング コマンドの最終処理: 最終的なレイヤー位置が計算され、Direct3D や OpenGL などのグラフィックス API を介して複合コマンドが発行されます。 GPU コマンド バッファは非同期レンダリングのために GPU にフラッシュされ、完成したフレームは表示のためにウィンドウ サーバーに送信されます。

GPUレンダリング

• レンダリング プロセス中、グラフィック コンピューティング タスクは汎用 CPU または専用グラフィック プロセッサ GPU を利用できます。
• グラフィック レンダリングの計算に GPU を利用する場合、グラフィック ソフトウェア レイヤーはワークロードを複数の小さなタスクに分割します。このアプローチにより、GPU の大規模並列処理を最大限に活用することができ、レンダリング プロセスで必要な浮動小数点計算に特に効果的です。
• GPU は多数の操作を同時に処理することに優れており、複雑なビジュアル コンテンツを効率的かつ迅速にレンダリングするのに適しています。この並列処理機能により、特に高解像度のグラフィックス、アニメーション、リアルタイム レンダリングを含むアプリケーションのパフォーマンスが大幅に向上します。
• その結果、GPU を使用すると、レンダリング プロセスが高速化されるだけでなく、最新の Web アプリケーションやグラフィックスを多用するソフトウェアにおいて、より洗練された視覚効果とよりスムーズなユーザー エクスペリエンスが可能になります。

この画像も GPU によってレンダリングされます

レンダリング後の実行とユーザーによる実行

レンダリング プロセスが完了すると、ブラウザは、タイミング メカニズム (Google Doodle アニメーションなど) やユーザー インタラクション (検索ボックスにクエリを入力して候補を受け取るなど) などのさまざまなイベントによってトリガーされる JavaScript コードを実行します。

• 플러그인: 일반적으로 Google 홈페이지에서는 이 시점에서 실행되지 않지만 Flash나 Java와 같은 플러그인도 실행할 수 있습니다.
• 네트워크 요청: JavaScript 스크립트는 추가 네트워크 요청을 시작하여 필요에 따라 추가 리소스나 데이터를 가져올 수 있습니다.
• DOM 수정: 이 스크립트에는 기존 페이지나 레이아웃을 수정하는 기능이 있어 페이지 렌더링 및 페인팅이 한 번 더 필요할 수 있습니다. 이러한 동적 기능을 통해 사용자 작업이나 기타 조건에 따라 콘텐츠가 실시간으로 변경될 수 있는 대화형 경험이 가능해 웹 애플리케이션의 전반적인 기능과 응답성이 향상됩니다. JavaScript 실행과 렌더링 엔진 간의 상호 작용은 풍부하고 매력적인 웹 경험을 생성하는 데 매우 중요하며, 이를 통해 개발자는 사용자 입력과 변화하는 컨텍스트에 직관적으로 반응하는 애플리케이션을 구축할 수 있습니다.

위 내용은 인터넷은 어떻게 작동하나요? 1부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!