首頁 > web前端 > js教程 > 互聯網如何運作?第 1 部分

互聯網如何運作?第 1 部分

Linda Hamilton
發布: 2024-10-05 22:18:02
原創
271 人瀏覽過

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

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

按下“g”鍵

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

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

How does the internet work? Part 1
瀏覽自動完成序列

「輸入」鍵觸底

為了建立一個起點,讓我們考慮鍵盤上的 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) 驅動程式則解釋按鍵。最後,按鍵事件被傳遞到作業系統的硬體抽象層。 How does the internet work? Part 1 序列圖

如果是虛擬鍵盤(例如在觸控螢幕裝置上)

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

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

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

當中斷被觸發時,CPU使用中斷向量索引到IDT並執行適當的中斷處理程序。此過程會導致 CPU 轉換到核心模式,從而允許作業系統管理按鍵事件。

WM_KEYDOWN 訊息會傳送到應用程式(在 Windows 上)

按下 Enter 鍵時,人機介面裝置 (HID) 傳輸會將按鍵按下事件傳遞給 KBDHID.sys 驅動程序,該驅動程式將 HID 使用資料轉換為掃描碼。本例中,掃描碼為VK_RETURN(0x0D),代表回車鍵。然後,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 Kit 鍵盤驅動程式(核心擴充或「kext」)中的事件。此驅動程式將硬體訊號轉換為按鍵代碼。然後關鍵程式碼被傳遞到WindowServer,它管理圖形使用者介面。

WindowServer 透過 Mach 連接埠 發送按鍵事件到適當的應用程式(例如活動或偵聽的應用程式),並在其中將其放入事件中佇列。具有適當權限的應用程式可以透過呼叫 mach_ipc_dispatch 函數來存取此事件佇列。

大多數應用程式透過 NSApplication 主事件循環來處理此過程,該循環負責處理使用者輸入。當事件是按鍵時,它表示為 NSEventTypeKeyDown 類型的 NSEvent。然後,應用程式讀取此事件並做出相應回應,根據收到的按鍵代碼觸發與按鍵操作相關的任何代碼。

Xorg 伺服器偵聽鍵碼(在 GNU/Linux 上)

當使用 X 伺服器在圖形環境中按下按鍵時,X 伺服器會使用 evdev(事件裝置)驅動程式來擷取按鍵事件。然後,使用 X 伺服器特定的鍵盤映射和規則將實體鍵盤中的鍵碼重新映射到 掃描碼

映射完成後,X 伺服器將產生的 掃描碼轉送到視窗管理器(例如 DWM、Metacity、i3 等)。視窗管理器又將字元或按鍵事件傳送到目前對焦的視窗。聚焦視窗的圖形 API 處理此事件,並根據按下的鍵使用正確的字體在適當的欄位中顯示相應的符號。

此流程確保角色在活動應用程式的介面中正確呈現,完成從硬體到圖形輸出的按鍵互動。

解析網址

當瀏覽器解析URL(統一資源定位器)時,它會提取以下元件:

  • 協定:“http” 瀏覽器知道這使用超文本傳輸協定與伺服器進行通訊。
  • 資源:“/” 這表示瀏覽器應該檢索網站的主(索引)頁面,因為 / 路徑通常指伺服器的根頁面或主頁。

每個元件都幫助瀏覽器解釋並從網路取得所需的資源。

How does the internet work? Part 1

它是 URL 還是搜尋字詞?

當未提供協議(例如「http」)或有效網域名稱時,瀏覽器會將網址列中的文字解釋為潛在的搜尋字詞。瀏覽器不會嘗試將其解析為 URL,而是將文字轉發到其預設的網路搜尋引擎。

在大多數情況下,瀏覽器會在搜尋查詢後附加一個特殊標識符,表示該請求源自瀏覽器的 URL 欄。這使得搜尋引擎能夠相應地處理這些搜尋並確定其優先級,從而根據上下文提高結果的相關性。

此流程可協助瀏覽器決定是否應該嘗試直接導航至網站或根據輸入的文字提供搜尋結果。

轉換主機名稱中的非 ASCII Unicode 字元

  • 瀏覽器檢查主機名稱中是否有任何超出 ASCII 範圍的字符,特別是那些不在 a-z、A-Z、0-9、- 或 .. 集合中的字符
  • 在本例中,主機名稱是 google.com,僅包含 ASCII 字符,因此無需轉換。但是,如果主機名稱中存在非 ASCII 字符,瀏覽器將套用 Punycode 編碼將主機名稱轉換為有效的 ASCII 表示形式。此程序可確保主機名稱中的所有字元都能被網路協定正確處理。

檢查 HSTS 列表

瀏覽器首先檢查其預先載入的HSTS(HTTP 嚴格傳輸安全)列表,其中包含明確請求僅透過HTTPS存取的網站。

如果在此清單中找到要求的網站,瀏覽器會自動使用 HTTPS 而不是 HTTP 發送請求。如果網站不在 HSTS 清單中,則初始請求將透過 HTTP.

發送

要注意的是,網站仍然可以實作 HSTS,而不包含在預先載入清單中。在這種情況下,使用者發出的第一個 HTTP 請求將傳回一個回應,指示瀏覽器僅透過 HTTPS 發送後續請求。但是,此初始 HTTP 請求可能會使使用者遭受降級攻擊,攻擊者可能會攔截該請求並強制其保持未加密狀態。此漏洞就是為什麼現代 Web 瀏覽器包含 HSTS 清單的原因,透過首先防止建立不安全的連線來增強使用者的安全性。

DNS查詢

瀏覽器透過檢查網域是否已存在於其快取中來開始 DNS 查找過程。 (要查看 Google Chrome 中的 DNS 緩存,請導航至 chrome://net-internals/#dns。)

如果快取中沒有找到域名,則瀏覽器呼叫gethostbyname庫函數(具體函數可能因作業系統不同而不同)進行主機名稱解析。

  1. 本地主機檔案檢查:

    • gethostbyname 函數首先檢查是否可以透過引用本機主機檔案來解析主機名,該檔案的位置因作業系統而異。該文件是一個簡單的文字文件,它將主機名稱映射到 IP 位址,並且可以提供快速解析,而無需查詢 DNS。
  2. DNS 伺服器請求:

    • 如果主機名稱未快取且無法在主機檔案中找到,則瀏覽器會向網路堆疊中設定的 DNS 伺服器傳送請求。該伺服器通常是本機路由器或 ISP 的快取 DNS 伺服器,它儲存先前解析的名稱以加快將來的請求。
  3. DNS 伺服器的 ARP 流程:

    • 如果 DNS 伺服器位於相同子網路中,網路庫將遵循 ARP(位址解析協定)程序來解析 DNS 伺服器的 IP 位址,確保請求在本機網路內正確定向。
    • 如果 DNS 伺服器位於不同的子網路中,網路庫會遵循預設閘道 IP 的 ARP 流程,該流程可作為中介將請求路由到適當的子網路。

這種系統方法可確保瀏覽器有效地將網域名稱解析為 IP 位址,從而能夠建立與所需網站的連線。透過先檢查緩存,使用本地主機文件,最後查詢 DNS 伺服器,瀏覽器最大限度地減少了主機名稱解析所花費的時間。

How does the internet work? Part 1

序列圖

ARP行程

為了發送 ARP(位址解析協定)廣播,網路堆疊庫需要兩個關鍵資訊:需要尋找的目標 IP 位址和將用於發送的介面的 MAC 位址發出 ARP 廣播。

檢查ARP快取:

先檢查 ARP 快取中是否有與目標 IP 位址對應的條目。如果條目存在,則函式庫函數以下列格式傳回結果:
目標 IP = MAC.

如果該條目不在 ARP 快取中:

如果沒有目標IP位址的條目,則執行以下步驟:

  • 查詢路由表以確定目標 IP 位址是否位於本機路由表中列出的任何子網路上。
    • 如果找到,程式庫將使用與該子網路關聯的介面。
    • 如果沒有,程式庫預設使用連接到預設閘道的介面。
  • 然後擷取所選網路介面的 MAC 位址。

    發送 ARP 請求:

網路庫建構並傳送第 2 層(OSI 模型的資料鏈結層)ARP 請求,格式如下: ARP 請求:

  • 寄件者 MAC: 介面:mac:位址:此處
  • 寄件者IP:interface.ip.goes.here
  • 目標 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:interface.ip.goes.here

現在網路庫已經取得了 DNS 伺服器或預設閘道的 IP 位址,它可以恢復其 DNS 流程:

  1. DNS 用戶端使用高於 1023 的來源連接埠與 DNS 伺服器上的 UDP 連接埠 53 建立套接字連線。
  2. 如果回應大小超過 UDP 限制,將使用 TCP 來容納更大的回應。
  3. 如果本地或 ISP DNS 伺服器沒有請求的信息,它將啟動遞歸搜索,查詢 DNS 伺服器的層次結構,直到到達 SOA(授權起始),此時返回答案。

打開套接字

瀏覽器收到目標伺服器的 IP 位址後,會將其與 URL 中指定的連接埠號碼結合(其中 HTTP 預設為連接埠 80,HTTPS 預設為連接埠 443)。然後瀏覽器呼叫名為socket的系統函式庫函數,使用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) 欄位會減一。如果 TTL 欄位達到零或目前路由器佇列中沒有空間(這可能是由於網路擁塞而發生),則封包將被丟棄。
此傳送和接收程序依照 TCP 連線流程發生多次:

  1. 客戶端選擇一個初始序號(ISN)並向伺服器發送資料包,其中設定了 SYN 位元以指示它正在設定 ISN。
  2. 伺服器接收SYN,如果同意,則執行下列操作:
    • 選擇自己的初始序號。
    • 設定 SYN 位元以指示它正在選擇其 ISN。
  3. 將(客戶端 ISN 1)複製到其 ACK 欄位並新增 ACK 標誌以指示它正在確認收到第一個資料包。

  4. 客戶端透過傳送以下資料包來確認連線:

    • 增加自己的序號。
    • 增加接收者確認數量。
    • 設定 ACK 欄位。
  5. 資料傳輸:資料傳輸如下:

    • 當一側發送 N 個資料位元組時,它會將其序號 (SEQ) 增加該數字。
    • 當另一方確認收到該封包(或一串封包)時,它會傳送一個 ACK 封包,其確認 (ACK) 值等於上次從另一方收到的序列。
  6. 關閉連線:關閉連線:

    • 發起關閉的一方發送FIN資料包。
    • 對方確認FIN資料包並發送自己的FIN。
    • 發起者透過 ACK 確認對方的 FIN。

How does the internet work? Part 1

開啟套接字:序列圖

TLS 握手

  • 客戶端電腦向伺服器發送 ClientHello 訊息,其中包括其傳輸層安全性 (TLS) 版本、可用密碼演算法清單和壓縮方法。
  • 作為回應,伺服器回覆 ServerHello 訊息,該訊息指定 TLS 版本、所選密碼、所選壓縮方法以及由憑證授權單位 (CA) 簽署的伺服器公共憑證。該憑證包含一個公鑰,客戶端將使用該公鑰來加密握手的其餘部分,直到對稱金鑰達成協議。
  • 客戶端根據其受信任的 CA 清單驗證伺服器的數位憑證。如果可以基於 CA 建立信任,則用戶端會產生一串偽隨機字節,並使用伺服器的公鑰對該字串進行加密。這些隨機位元組將用於確定對稱密鑰。
  • 伺服器使用其私鑰解密隨機位元組,並利用這些位元組產生自己的對稱主金鑰副本。
  • 客戶端向伺服器發送 Finished 訊息,並使用對稱金鑰對迄今為止發生的傳輸的雜湊值進行加密。
  • 伺服器產生自己的雜湊值,然後解密客戶端發送的雜湊值以驗證其是否匹配。如果雜湊值匹配,伺服器會將自己的 Finished 訊息傳回客戶端,該訊息也使用對稱金鑰加密。
  • 從現在開始,TLS 會話將傳輸使用商定的對稱金鑰加密的應用程式 (HTTP) 資料。

此握手程序在客戶端和伺服器之間建立安全連接,確保透過連接傳輸的資料不會被竊聽和篡改。

如果資料包遺失

有時,由於網路擁塞或不穩定的硬體連接,TLS 封包可能會在到達最終目的地之前被丟棄。在這種情況下,發送者必須決定如何反應。管理此回應的演算法稱為 TCP 擁塞控制。具體實作可能因發送者而異,最常見的演算法是較新作業系統上的 Cubic 和許多其他作業系統上的 New Reno。

  • 客戶端依照連線的最大段大小(MSS)選擇擁塞視窗。
  • 對於每個確認的資料包,擁塞視窗的大小都會加倍,直到達到「慢啟動閾值」。在某些實作中,此閾值是自適應的,可以根據網路條件進行變更。
  • 一旦達到慢啟動閾值,對於每個確認的資料包,視窗都會增加。如果一個資料包被丟棄,視窗會呈指數減小,直到另一個資料包被確認。

這種擁塞控制機制有助於優化網路效能和穩定性,確保資料能夠高效傳輸,同時最大限度地減少丟包的影響。

HTTP協定

如果使用的網頁瀏覽器是由 Google 開發的,它可能會嘗試與伺服器協商從 HTTP 到 SPDY 協定的“升級”,而不是發送標準 HTTP 請求來檢索頁面。

如果客戶端使用的是HTTP協定且不支援SPDY,則會依照下列格式向伺服器傳送請求:


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


登入後複製

這裡,[其他標頭]指的是一系列以冒號分隔的鍵值對,這些鍵值對按照 HTTP 規範格式化,並以單一換行符分隔。這假設 Web 瀏覽器不存在違反 HTTP 規範的錯誤,而且它正在使用 HTTP/1.1。如果它使用不同的版本,例如 HTTP/1.0HTTP/0.9,它可能不會在請求中包含 Host 標頭。

HTTP/1.1 為發送方定義了「關閉」連線選項,以表示回應完成後將關閉連線。例如:


Connection: close



登入後複製

不支援持久連線的 HTTP/1.1 應用程式必須在每個訊息中包含「關閉」連線選項。

發送請求和標頭後,Web 瀏覽器會向伺服器發送空白換行符,表示請求內容已完成。

伺服器隨後使用表示請求狀態的回應代碼進行回應,其結構如下:


200 OK
[response headers]


登入後複製

後面跟著一個換行符,然後是包含 www.google.com 的 HTML 內容的有效負載。伺服器可以關閉連接,或者,如果客戶端發送的標頭請求,則保持連接開啟以便在進一步的請求中重複使用。

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規則,影響解析過程的效率和準確性。 How does the internet work? Part 1

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

頁面渲染

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

  • 建立幀樹:渲染引擎透過遍歷 DOM 節點並計算每個節點的 CSS 樣式來建構「幀樹」或「渲染樹」。這棵樹代表了頁面的視覺結構。
  • 計算首選寬度:框架樹中每個節點的首選寬度以自下而上的方式計算。這涉及子節點的首選寬度以及節點的水平邊距、邊框和填充的總和。
  • 計算實際寬度:每個節點的實際寬度是透過根據需要在其子節點之間分配可用寬度,以自上而下的方法確定的。
  • 計算高度:透過應用文字換行並將子節點的高度以及節點的邊距、邊框和填充求和,自下而上計算每個節點的高度。
  • 確定節點座標:使用前面步驟中收集的寬度和高度資訊計算每個節點的座標。
  • 處理複雜元素:對於浮動、絕對或相對定位或採用其他複雜功能的元素執行更複雜的計算。有關更多詳細信息,請參閱 CSS2 的 CSS 規範和當前的 CSS 工作。
  • 建立圖層: 建立圖層是為了描述頁面的哪些部分可以一起動畫化,而無需重新光柵化。每個幀/渲染物件都分配給特定的圖層。
  • 分配紋理:為頁面的每一層分配紋理,以優化渲染效能。
  • 執行繪圖指令:遍歷各層的frame/render對象,並針對各自的層執行繪圖指令。這種渲染可以由 CPU 處理,也可以使用 D2D (Direct2D) 或 SkiaGL 等技術直接在 GPU 上繪製。
  • *重用計算值:*渲染過程可以利用先前渲染網頁的計算值,從而實現更有效率的增量更改,並且需要更少的計算工作。
  • 合成圖層:最終頁面圖層被送到合成過程,在那裡它們與其他可見內容結合,例如瀏覽器鑲邊、iframe 和插件面板。
  • 最終渲染指令:計算最終圖層位置,並透過 Direct3D 或 OpenGL 等圖形 API 發出複合指令。 GPU指令緩衝區刷新到GPU進行非同步渲染,並將完成的訊框傳送到視窗伺服器進行顯示。 How does the internet work? Part 1

GPU渲染

  • 在渲染過程中,圖形運算任務可以利用通用CPU或專用圖形處理器GPU。
  • 當利用 GPU 進行圖形渲染計算時,圖形軟體層將工作負載劃分為多個較小的任務。這種方法使他們能夠充分利用 GPU 的大規模並行性,這對於渲染過程中所需的浮點運算特別有效。
  • GPU 擅長同時處理大量操作,使其非常適合高效、快速地渲染複雜的視覺內容。這種平行處理能力顯著增強了效能,尤其是在涉及高解析度圖形、動畫和即時渲染的應用程式中。
  • 因此,使用 GPU 不僅可以加快渲染過程,還可以在現代 Web 應用程式和圖形密集型軟體中實現更複雜的視覺效果和更流暢的使用者體驗。

How does the internet work? Part 1

該影像也是由 GPU 渲染的

渲染後和使用者引發的執行

渲染過程完成後,瀏覽器執行由各種事件觸發的 JavaScript 程式碼,例如計時機制(如 Google Doodle 動畫)或使用者互動(例如,在搜尋框中輸入查詢並接收建議)。

  • 外掛程式:此外,Flash 或 Java 等外掛程式也可能會執行,儘管它們此時通常不會在 Google 主頁上運行。
  • 網路請求: JavaScript 腳本可以啟動進一步的網路請求,根據需要取得其他資源或資料。
  • DOM 修改: 這些腳本能夠修改現有頁面或其佈局,這可能導致另一輪頁面渲染和繪製。這種動態功能可實現互動式體驗,其中內容可以根據使用者操作或其他條件即時更改,從而增強 Web 應用程式的整體功能和回應能力。 JavaScript 執行和渲染引擎之間的互動對於創建豐富、引人入勝的 Web 體驗至關重要,使開發人員能夠建立能夠直觀地響應用戶輸入和不斷變化的上下文的應用程式。

以上是互聯網如何運作?第 1 部分的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板