原創(chuàng) 知曉 React 2022-01-04 14:20

如果您是Web老手，已經(jīng)非常熟悉Web開發(fā)整個(gè)流程的運(yùn)作原理，可以忽略以下內(nèi)容；如果您是剛開始從事Web的開發(fā)者，那么此文將非常有助于您快速掌握Web的工作原理。

如今，各種開發(fā)框架遍地開花，也演變的越來越強(qiáng)大。在工作中，開發(fā)人員往往為了快速的實(shí)現(xiàn)業(yè)務(wù)功能，而忽略了每個(gè)Web框架背后的運(yùn)作原理，同時(shí)也會(huì)很容易忘記網(wǎng)絡(luò)的基礎(chǔ)知識。

在瀏覽器的地址欄中直接輸入“www.github.com”，瀏覽器具體會(huì)做哪些操作，背后又發(fā)生了哪些不可告人的秘密呢？接下來就讓我們逐一解開謎底。

網(wǎng)絡(luò)名詞定義

掌握所有網(wǎng)絡(luò)是令人生畏的一件事，因?yàn)樯婕暗胶芏鄬I(yè)知識。不幸的是，其中一些術(shù)語對于理解本文的其余部分至關(guān)重要。

如果您想了解萬維網(wǎng)的秘密，以下是必須要掌握的術(shù)語：

客戶端：在計(jì)算機(jī)上運(yùn)行并連接到 Internet 的應(yīng)用程序，例如 Chrome 或 Firefox。它的主要作用是獲取用戶交互并將它們轉(zhuǎn)換為對另一臺稱為 Web 服務(wù)器的計(jì)算機(jī)的請求。盡管我們通常使用瀏覽器訪問網(wǎng)絡(luò)，但您可以將整個(gè)計(jì)算機(jī)視為客戶端-服務(wù)器模型的“客戶端”部分。每臺客戶端計(jì)算機(jī)都有一個(gè)唯一的地址，稱為 IP 地址，其他計(jì)算機(jī)可以使用它來識別它。

服務(wù)器：連接到 Internet 并具有 IP 地址的機(jī)器。服務(wù)器等待來自其他機(jī)器（例如客戶端）的請求并響應(yīng)它們。與您的計(jì)算機(jī)（即客戶端）不同，它也有一個(gè) IP 地址，服務(wù)器安裝并運(yùn)行了特殊的服務(wù)器軟件，它告訴它如何響應(yīng)來自瀏覽器的傳入請求。Web 服務(wù)器的主要功能是存儲(chǔ)、處理網(wǎng)頁并將其傳送給客戶端。服務(wù)器有多種類型，包括 Web 服務(wù)器、數(shù)據(jù)庫服務(wù)器、文件服務(wù)器、應(yīng)用程序服務(wù)器等等。（在這篇文章中，我們談?wù)摰氖?Web 服務(wù)器。）

IP 地址：互聯(lián)網(wǎng)協(xié)議地址。TCP/IP 網(wǎng)絡(luò)上設(shè)備（計(jì)算機(jī)、服務(wù)器、打印機(jī)、路由器等）的數(shù)字標(biāo)識符?；ヂ?lián)網(wǎng)上的每臺計(jì)算機(jī)都有一個(gè) IP 地址，用于識別其他計(jì)算機(jī)并與之通信。IP 地址有四組由小數(shù)點(diǎn)分隔的數(shù)字（例如 244.155.65.2）。這稱為“邏輯地址”。為了在網(wǎng)絡(luò)中定位設(shè)備，TCP/IP 協(xié)議軟件將邏輯 IP 地址轉(zhuǎn)換為物理地址。此物理地址（即 MAC 地址）內(nèi)置于您的硬件中。

ISP：互聯(lián)網(wǎng)服務(wù)提供商。ISP 是客戶端和服務(wù)器之間的中間人。對于典型的房主來說，ISP 通常是一家“有線電視公司”。當(dāng)您的瀏覽器收到您要求訪問 www.github.com 的請求時(shí)，它不知道去哪里查找 www.github.com。因此，ISP 的工作是進(jìn)行 DNS（域名系統(tǒng)）查找，以詢問您嘗試訪問的站點(diǎn)配置為哪個(gè) IP 地址。

DNS：域名系統(tǒng)。一個(gè)分布式數(shù)據(jù)庫，用于在 Internet 上跟蹤計(jì)算機(jī)的域名及其相應(yīng)的 IP 地址?，F(xiàn)在不要擔(dān)心“分布式數(shù)據(jù)庫”的工作原理：只要知道 DNS 存在，這樣用戶就可以輸入www.github.com而不是 IP 地址。

域名：用于標(biāo)識一個(gè)或多個(gè) IP 地址。用戶使用域名（例如www.github.com）訪問互聯(lián)網(wǎng)上的網(wǎng)站。當(dāng)您在瀏覽器中鍵入域名時(shí)，DNS 會(huì)使用它來查找給定網(wǎng)站的相應(yīng) IP 地址。

TCP/IP：傳輸控制協(xié)議/互聯(lián)網(wǎng)協(xié)議。使用最廣泛的通信協(xié)議?！皡f(xié)議”只是一組用于做某事的標(biāo)準(zhǔn)規(guī)則。TCP/IP 用作通過網(wǎng)絡(luò)傳輸數(shù)據(jù)的標(biāo)準(zhǔn)。

端口號：一個(gè) 16 位整數(shù)，用于標(biāo)識服務(wù)器上的特定端口并始終與 IP 地址相關(guān)聯(lián)。它作為一種方法來識別網(wǎng)絡(luò)請求可以轉(zhuǎn)發(fā)到的服務(wù)器上的特定進(jìn)程。

主機(jī)：連接到網(wǎng)絡(luò)的計(jì)算機(jī)——它可以是客戶端、服務(wù)器或任何其他類型的設(shè)備。每個(gè)主機(jī)都有一個(gè)唯一的 IP 地址。對于像 www.google.com 這樣的網(wǎng)站，主機(jī)可以是為該網(wǎng)站的頁面提供服務(wù)的網(wǎng)絡(luò)服務(wù)器。主機(jī)和服務(wù)器之間經(jīng)常會(huì)有一些混淆，但請注意它們是兩種不同的東西。服務(wù)器是一種主機(jī)——它們是一臺特定的機(jī)器。另一方面，主機(jī)可以指提供托管服務(wù)以維護(hù)多個(gè) Web 服務(wù)器的整個(gè)組織。從這個(gè)意義上說，您可以從主機(jī)運(yùn)行服務(wù)器。

HTTP：超文本傳輸協(xié)議。Web 瀏覽器和 Web 服務(wù)器用于通過 Internet 相互通信的協(xié)議。

URL：統(tǒng)一資源定位器。URL 標(biāo)識特定的 Web 資源。一個(gè)簡單的例子是https://github.com/someone。URL 指定協(xié)議（“https”）、主機(jī)名（github.com）和文件名（某人的個(gè)人資料頁面）。用戶可以通過 HTTP 從域名為 github.com 的網(wǎng)絡(luò)主機(jī)上獲取該 URL 標(biāo)識的 Web 資源。

開啟代碼到網(wǎng)頁的旅程

好的，現(xiàn)在我們已經(jīng)有了基本的定義，讓我們通過 Github 搜索來看看我們?nèi)绾螐妮斎氲降刂窓谥械?URL 到正在運(yùn)行的網(wǎng)頁：

1. 你在瀏覽器中輸入一個(gè) URL

1. 瀏覽器解析 URL 中包含的信息。這包括協(xié)議（“https”）、域名（“github.com”）和資源（“/”）。在這種情況下，“.com”后面沒有任何內(nèi)容來指示特定資源，因此瀏覽器知道只檢索主（索引）頁面

1. 瀏覽器與您的 ISP 通信以對托管www.github.com的 Web 服務(wù)器的 IP 地址進(jìn)行 DNS 查找。DNS 服務(wù)將首先聯(lián)系根名稱服務(wù)器，該服務(wù)器會(huì)查看https://www.github.com并回復(fù)“.com”頂級域的名稱服務(wù)器的 IP 地址。此地址將發(fā)送回您的 DNS 服務(wù)。DNS 服務(wù)對“.com”名稱服務(wù)器進(jìn)行另一次外展，并要求它提供https://www.github.com的地址。

1. ISP 收到目標(biāo)服務(wù)器的 IP 地址后，會(huì)將其發(fā)送到您的 Web 瀏覽器

1. 您的瀏覽器從 URL 獲取 IP 地址和給定的端口號（HTTP 協(xié)議默認(rèn)為端口 80，HTTPS 默認(rèn)為端口 443）并打開 TCP 套接字連接。至此，您的網(wǎng)絡(luò)瀏覽器和網(wǎng)絡(luò)服務(wù)器終于連接上了。

2. 您的 Web 瀏覽器向 Web 服務(wù)器發(fā)送 HTTP 請求，以獲取www.github.com的主要 HTML 網(wǎng)頁。

   

3. Web 服務(wù)器接收請求并查找該 HTML 頁面。如果頁面存在，Web 服務(wù)器會(huì)準(zhǔn)備響應(yīng)并將其發(fā)送回您的瀏覽器。如果服務(wù)器找不到請求的頁面，它將發(fā)送 HTTP 404 錯(cuò)誤消息，代表“找不到頁面”。

1. 您的 Web 瀏覽器獲取它接收到的 HTML 頁面，然后通過它進(jìn)行全面的解析，以查找列出的其他資產(chǎn)，例如圖像、CSS 文件、JavaScript 文件等。

   

2. 對于列出的每個(gè)資產(chǎn)，瀏覽器重復(fù)上述整個(gè)過程，為每個(gè)資源向服務(wù)器發(fā)出額外的 HTTP 請求。

3. 瀏覽器加載完 HTML 頁面中列出的所有其他資產(chǎn)后，頁面將最終加載到瀏覽器窗口中并關(guān)閉連接

信息如何傳輸呢？

值得注意的一件事是，當(dāng)您請求信息時(shí)，信息是如何傳輸?shù)摹．?dāng)您發(fā)出請求時(shí)，該信息被分解為許多稱為數(shù)據(jù)包的小塊。每個(gè)數(shù)據(jù)包都標(biāo)有一個(gè) TCP 標(biāo)頭，其中包括源和目標(biāo)端口號，以及一個(gè) IP 標(biāo)頭，其中包括源和目標(biāo) IP 地址以賦予其身份。然后，數(shù)據(jù)包通過以太網(wǎng)、WiFi 或蜂窩網(wǎng)絡(luò)傳輸，并被允許在任何路線上傳播，并進(jìn)行到達(dá)最終目的地所需的盡可能多的跳數(shù)。

（我們實(shí)際上并不關(guān)心數(shù)據(jù)包是如何到達(dá)那里的——重要的是它們安全無恙地到達(dá)目的地?。┮坏?shù)據(jù)包到達(dá)目的地，它們會(huì)再次重新組裝并作為一個(gè)整體交付。

那么所有的數(shù)據(jù)包如何知道如何到達(dá)目的地而不會(huì)丟失呢？

答案是 TCP/IP。

TCP/IP 是一個(gè)由兩部分組成的系統(tǒng)，充當(dāng) Internet 的基本“控制系統(tǒng)”。IP代表互聯(lián)網(wǎng)協(xié)議；它的工作是使用每個(gè)數(shù)據(jù)包上的 IP 標(biāo)頭（即 IP 地址）將數(shù)據(jù)包發(fā)送和路由到其他計(jì)算機(jī)。第二部分，傳輸控制協(xié)議 (TCP)，負(fù)責(zé)將消息或文件分成更小的數(shù)據(jù)包，使用 TCP 標(biāo)頭將數(shù)據(jù)包路由到目標(biāo)計(jì)算機(jī)上的正確應(yīng)用程序，如果數(shù)據(jù)包在途中丟失，則重新發(fā)送數(shù)據(jù)包，以及一旦數(shù)據(jù)包到達(dá)另一端，就以正確的順序重新組裝數(shù)據(jù)包。

DOM樹渲染

但是等等——工作還沒有完成！既然您的瀏覽器擁有構(gòu)成網(wǎng)站的資源（HTML、CSS、JavaScript、圖像等），它必須經(jīng)過幾個(gè)步驟才能將資源作為人類可讀的網(wǎng)頁呈現(xiàn)給您。

您的瀏覽器具有負(fù)責(zé)顯示內(nèi)容的渲染引擎。渲染引擎以小塊的形式接收資源的內(nèi)容。然后是一個(gè) HTML 解析算法，它告訴瀏覽器如何解析資源。

解析后，它會(huì)生成 DOM 元素的樹結(jié)構(gòu)。DOM 代表文檔對象模型，它是如何表示位于 HTML 文檔中的對象的約定。每個(gè)文檔的這些對象（或“節(jié)點(diǎn)”）都可以使用 JavaScript 等腳本語言進(jìn)行操作。

構(gòu)建 DOM 樹后，將解析樣式表以了解如何設(shè)置每個(gè)節(jié)點(diǎn)的樣式。瀏覽器使用這些信息向下遍歷 DOM 節(jié)點(diǎn)并計(jì)算每個(gè)節(jié)點(diǎn)的 CSS 樣式、位置、坐標(biāo)等。

一旦瀏覽器擁有 DOM 節(jié)點(diǎn)和它們的樣式，它就*終于*準(zhǔn)備好相應(yīng)地將頁面繪制到您的屏幕上。結(jié)果：您在 Internet 上看過的所有內(nèi)容。

簡而言之，以上內(nèi)容向您詮釋了Web的整個(gè)工作原理，如果您有不同的見解，可以在評論區(qū)留言~