您將了解在計(jì)算機(jī)或手機(jī)上的網(wǎng)絡(luò)瀏覽器中查看網(wǎng)頁(yè)時(shí)所發(fā)生情況的簡(jiǎn)化視圖。

客戶端和服務(wù)器

連接到互聯(lián)網(wǎng)的計(jì)算機(jī)稱為客戶端和服務(wù)器。簡(jiǎn)化版

• 客戶端是典型網(wǎng)絡(luò)用戶的互聯(lián)網(wǎng)連接設(shè)備（例如，連接到 Wi-Fi 的計(jì)算機(jī)）以及這些設(shè)備上可用的網(wǎng)絡(luò)訪問(wèn)軟件（通常是 Chrome 等網(wǎng)絡(luò)瀏覽器）。
• 服務(wù)器是存儲(chǔ)網(wǎng)頁(yè)、站點(diǎn)或應(yīng)用程序的計(jì)算機(jī)。當(dāng)客戶端設(shè)備想要訪問(wèn)網(wǎng)頁(yè)時(shí)，網(wǎng)頁(yè)的副本將從服務(wù)器下載到客戶端計(jì)算機(jī)上，以顯示在用戶的網(wǎng)絡(luò)瀏覽器中。

除了客戶端和服務(wù)端之外，我們還需要向以下對(duì)象打招呼：

• 您的互聯(lián)網(wǎng)連接：允許您在網(wǎng)絡(luò)上發(fā)送和接收數(shù)據(jù)。

• TCP/IP：傳輸控制協(xié)議和互聯(lián)網(wǎng)協(xié)議是定義數(shù)據(jù)如何在互聯(lián)網(wǎng)上傳輸?shù)耐ㄐ艆f(xié)議。

• DNS：域名系統(tǒng)就像網(wǎng)站的地址簿。當(dāng)您在瀏覽器中鍵入網(wǎng)址時(shí)，瀏覽器會(huì)在檢索網(wǎng)站之前查看 DNS 以查找網(wǎng)站的 IP 地址。瀏覽器需要找出網(wǎng)站所在的服務(wù)器，以便它可以將 HTTP 消息發(fā)送到正確的位置（見(jiàn)下文）。

• HTTP：超文本傳輸??協(xié)議是一種應(yīng)用程序協(xié)議，定義客戶端和服務(wù)器相互通信的語(yǔ)言。

• 組件文件：網(wǎng)站由許多不同的文件組成，這些文件主要有兩種類型：

  • 代碼文件：網(wǎng)站主要由 HTML、CSS 和 JavaScript 構(gòu)建。
  • 資產(chǎn)：這是構(gòu)成網(wǎng)站的所有其他內(nèi)容的統(tǒng)稱，例如圖像、音樂(lè)、視頻、Word 文檔和 PDF。

當(dāng)您在瀏覽器中輸入網(wǎng)址時(shí)

1. 瀏覽器轉(zhuǎn)到DNS服務(wù)器，找到網(wǎng)站所在服務(wù)器的真實(shí)地址
2. 瀏覽器向服務(wù)器發(fā)送 HTTP 請(qǐng)求消息，要求服務(wù)器向客戶端發(fā)送網(wǎng)站的副本。此消息以及客戶端和服務(wù)器之間發(fā)送的所有其他數(shù)據(jù)均使用 TCP/IP 通過(guò)互聯(lián)網(wǎng)連接發(fā)送。
3. 如果服務(wù)器批準(zhǔn)了客戶端的請(qǐng)求，服務(wù)器會(huì)向客戶端發(fā)送“200 OK”消息，這意味著“當(dāng)然你可以查看該網(wǎng)站！就是這里”，然后開始將網(wǎng)站的文件發(fā)送到瀏覽器作為一系列稱為數(shù)據(jù)包的小塊
4. 瀏覽器將這些小塊組裝成一個(gè)完整的網(wǎng)頁(yè)并顯示給您。

文件解析順序

• HTML 解析：瀏覽器首先解析 HTML 文件，檢測(cè) 外部 CSS 和 <script> 標(biāo)簽JavaScript 標(biāo)簽。</script>

• 獲取 CSS 和 JavaScript：解析 HTML 時(shí)，瀏覽器向服務(wù)器發(fā)送請(qǐng)求以獲取引用的 CSS 和 JavaScript 文件。

• 解析和編譯:

  • HTML 生成 DOM 樹（文檔對(duì)象模型）。
  • CSS 生成 CSSOM 樹（CSS 對(duì)象模型）。
  • JavaScript 被編譯并執(zhí)行。

• 頁(yè)面渲染：瀏覽器結(jié)合 DOM 和 CSSOM 來(lái)設(shè)計(jì)內(nèi)容并執(zhí)行 JavaScript，將頁(yè)面的視覺(jué)表示繪制到屏幕上，允許用戶交互。

什么是 DNS（域名系統(tǒng)）？

真實(shí)的網(wǎng)址并不是您在地址欄中輸入的漂亮、令人難忘的字符串來(lái)查找您最喜愛(ài)的網(wǎng)站。它們是特殊的數(shù)字，如下所示：192.0.2.172。

這稱為 IP 地址，它代表網(wǎng)絡(luò)上的唯一位置。然而，它并不容易記住，不是嗎？這就是發(fā)明域名系統(tǒng)的原因。該系統(tǒng)使用特殊服務(wù)器將您在瀏覽器中輸入的網(wǎng)址（例如“mozilla.org”）與網(wǎng)站的真實(shí)（IP）地址進(jìn)行匹配。

資源：

• MDN 網(wǎng)絡(luò)文檔

以上是5m 初學(xué)者如何使用網(wǎng)絡(luò)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！