如果您剛接觸Web開發(fā)，您認為自己知道網(wǎng)絡的工作原理 - 至少在基本層面上。
...但是，當您嘗試解釋一個網(wǎng)站為什么出現(xiàn)空白。 什么是IP地址？ “客戶 - 服務”模型是如何工作的？
最近開發(fā)框架功能很強大。強大到讓我們這些新碼農忽視了網(wǎng)站工作的基本原理。
我確實是這樣， 沒什么不好意思承認的：網(wǎng)絡很復雜，只有當您開式編程時，您才意識到這些基礎知識有多重要。 （如果您想讓你的web app正常工作）
所以我寫了一個關于這些基礎知識的四部分的指南，這些基礎每個人都需要掌握，無論你是編程菜鳥還是只是對編程感興趣。
Part 1:網(wǎng)站工作原理
第2部分：Web應用程序的結構
第3部分：HTTP和REST
第4部分：客戶端 - 服務器交互的代碼示例
一個基本的網(wǎng)頁搜索
讓我們像之前那樣開始，在瀏覽器的地址欄中輸入“www.github.com” ，我們會看到頁面開始加載。
看起來似乎很簡單，幕后卻隱藏著一大堆魔法。 讓我們來深入學習吧。
定義網(wǎng)絡的部分
了解網(wǎng)絡是非常麻煩的，因為有很多術語。不幸的是，有些術語對于理解這篇文章的其余部分至關重要。
如果您想了解萬維網(wǎng)的秘密，以下是最重要的術語：
客戶端：在計算機上運行并連接到互聯(lián)網(wǎng)的應用程序，如Chrome或Firefox。其主要作用是進行用戶交互，并將其轉換為對另一臺稱為Web服務器的計算機的請求。雖然我們通常使用瀏覽器訪問網(wǎng)絡，但您可以將整個計算機視為客戶端 - 服務器模型的“客戶端”。每個客戶端計算機都有一個唯一的地址，稱為IP地址，其他計算機可以用來識別它。
服務器：連接到互聯(lián)網(wǎng)且具有IP地址的機器。服務器等待來自其他機器（例如客戶機）的請求并對其進行響應。不同于您的計算機（即客戶端），服務器也具有IP地址并安裝運行特殊的服務器軟件，確定如何響應來自瀏覽器的請求。 Web服務器的主要功能是將網(wǎng)頁存儲，處理和傳送給客戶端。有許多類型的服務器，包括Web服務器，數(shù)據(jù)庫服務器，文件服務器，應用程序服務器等。 （在這篇文章中，我們在談論Web服務器。）
IP地址：互聯(lián)網(wǎng)協(xié)議地址。 TCP / IP網(wǎng)絡上的設備（計算機，服務器，打印機，路由器等）的數(shù)字標識符。互聯(lián)網(wǎng)上的每臺計算機都有一個IP地址，用于識別和與其他計算機通信。 IP地址有四組數(shù)字，以小數(shù)點分隔（例如244.155.65.2）。這被稱為“邏輯地址”。為了在網(wǎng)絡中定位設備，通過TCP / IP協(xié)議軟件將邏輯IP地址轉換為物理地址。這個物理地址（即MAC地址）內置在您的硬件中。
ISP：互聯(lián)網(wǎng)服務提供商。 ISP是客戶端和服務器之間的中間人。典型的ISP通常是“有線電視公司”。當您的瀏覽器收請求www.github.com, 時，它不會知道在哪里尋找www.github.com, 因此，ISP的工作是進行DNS（域名系統(tǒng)）查找，以詢問查找的網(wǎng)站的IP地址。
DNS：域名系統(tǒng)。跟蹤計算機的域名及其在互聯(lián)網(wǎng)上相應IP地址的分布式數(shù)據(jù)庫。不要擔心“分布式數(shù)據(jù)庫”如何工作：只需要知道輸入www.github.com, 而不是IP地址就行了。
域名：用于標識一個或多個IP地址。用戶使用域名（例如www.github.com, ）訪問互聯(lián)網(wǎng)上的網(wǎng)站。當您在瀏覽器中鍵入域名時，DNS使用它來查找該給定網(wǎng)站的IP地址。
TCP / IP：傳輸控制協(xié)議/互聯(lián)網(wǎng)協(xié)議。最廣泛使用的通信協(xié)議。 “協(xié)議”是一些標準的規(guī)則。TCP / IP被用作通過網(wǎng)絡傳輸數(shù)據(jù)的標準。
端口號：一個16位整數(shù)，用于標識服務器上的特定端口，并始終與IP地址相關聯(lián)。它可以用來識別服務器上可以轉發(fā)網(wǎng)絡請求的特定進程。
主機：連接到網(wǎng)絡的計算機 - 它可以是客戶端，服務器或任何其他類型的設備。每個主機都有唯一的IP地址。對于www.google.com, 等網(wǎng)站，主機可以是為該網(wǎng)站的網(wǎng)頁提供服務的網(wǎng)絡服務器。主機和服務器概念經(jīng)?；旌?，但是它們是兩個不同的東西。服務器是一種主機 - 它們是一個特定的機器。另一方面，提供托管服務來維護多個Web服務器的機器可以稱作主機。在這個意義上，您可以從主機運行服務器。
HTTP：超文本傳輸協(xié)議。 Web瀏覽器和Web服務器用于通過互聯(lián)網(wǎng)進行通信的協(xié)議。
URL：統(tǒng)一資源定位符。 URL識別特定的Web資源。一個簡單的例子是https://github.com/someone. URL指定協(xié)議（“https”），主機名（github.com）和文件名（某人的個人資料頁面）。用戶可以從域名為github.com的網(wǎng)絡主機通過HTTP獲取該URL所標識的Web資源。（很繞口嗎？）
從代碼到網(wǎng)頁的旅程
好的，現(xiàn)在我們有了必要的定義，讓我們嘗試Github的搜索，看看從地址欄輸入一個網(wǎng)址到獲取到網(wǎng)頁經(jīng)歷了什么：
1）您在瀏覽器中輸入URL
2）瀏覽器解析URL中包含的信息。包括協(xié)議（“https”），域名（“github.com”）和資源（“/”）。 在這種情況下，“.com”之后沒有指示特定的資源，所以瀏覽器知道檢索主（索引）頁面
3)瀏覽器與ISP進行通信，對主機的Web服務器的IP地址進行DNS查找www.github.com. DNS服務首先聯(lián)系根服務器, 查詢 https://www.github.com 頂級域服務器的IP地址。 該地址被發(fā)送回您的DNS服務。 DNS服務與“.com”名稱服務器進行另外的溝通，并請求 https://www.github.com. 的地址。
source: https://technet.microsoft.com/en-us/library/bb962069.aspx
4)一旦ISP收到目標服務器的IP地址，它會將其發(fā)送到您的Web瀏覽器
5)您的瀏覽器從URL中獲取IP地址和給定的端口號（HTTP協(xié)議默認為端口80，HTTPS默認為端口443），并打開TCP套接字連接。 此時，您的Web瀏覽器和Web服務器終于連接了。
6) 您的網(wǎng)絡瀏覽器向網(wǎng)頁服務器發(fā)送HTTP請求，請求 www.github.com. 的主頁面
來自客戶端的GET請求
7）Web服務器接收請求并查找該HTML頁面。 如果頁面存在，則Web服務器準備響應并將其發(fā)送回您的瀏覽器。 如果服務器找不到請求的頁面，它將發(fā)送一個HTTP 404錯誤消息，代表“找不到頁面”。
服務端響應
8）您的Web瀏覽器將接收到HTML頁面，然后通過它從上到按下解析尋找列出的其他資源，如圖像，CSS文件，Java文件等。
index.html 頁面
9）對于列出的每個資源，瀏覽器重復上述整個過程，向服務器發(fā)送HTTP請求。
10）瀏覽器完成加載HTML頁面中列出的所有其他資源后，頁面將最終加載到瀏覽器窗口中，并且連接將被關閉
Github
穿越互聯(lián)網(wǎng)深淵
值得注意的一件事是當您提出信息請求時，如何傳輸信息。當您發(fā)出請求時，該信息被分解成許多稱為數(shù)據(jù)包的小塊。每個數(shù)據(jù)包都標有一個包括源和目標端口號的TCP報頭，以及包含源IP地址和目標IP地址作為身份標識的IP報頭。然后，數(shù)據(jù)包通過以太網(wǎng)，WiFi或蜂窩網(wǎng)絡傳輸，并允許在任何路由上經(jīng)過多次跳轉，直到到達目的地。
（我們實際上并不關心數(shù)據(jù)包到達那里 - 重要的是它們到達目的地安全無恙?。┮坏?shù)據(jù)包到達目的地，它們將被重新組合。
那么所有的數(shù)據(jù)包怎么知道如何到達目的地而不會迷路？
答案是TCP / IP。
TCP / IP是一個兩部分系統(tǒng)，作為互聯(lián)網(wǎng)的基本“控制系統(tǒng)”。IP代表互聯(lián)網(wǎng)協(xié)議;其作用是使用每個數(shù)據(jù)包上的IP頭（即IP地址）將數(shù)據(jù)包發(fā)送到其他計算機。傳輸控制協(xié)議（TCP）負責將消息或文件分解成較小的數(shù)據(jù)包，使用TCP頭將數(shù)據(jù)包路由到目的地計算機上的正確應用程序，如果丟包，則重新發(fā)送數(shù)據(jù)包;一旦到達另一端，重新組裝數(shù)據(jù)包。
繪制最后的圖片
等等 - 工作還沒有完成！ 現(xiàn)在，您的瀏覽器具有構成網(wǎng)站（HTML，CSS，Java，圖像等）的資源，必須通過幾個步驟將資源呈現(xiàn)為可讀的網(wǎng)頁。
您的瀏覽器有一個渲染引擎，負責顯示內容。 渲染引擎以小塊形式接收資源的內容。 然后有一個HTML解析算法告訴瀏覽器如何解析資源。
一個DOM樹
構建DOM樹后，將分析樣式表以了解如何對每個節(jié)點進行樣式化。 使用此信息，瀏覽器遍歷DOM節(jié)點并計算每個節(jié)點的CSS樣式，位置，坐標等。
一旦瀏覽器具有DOM節(jié)點及其樣式，那么最終就可以將頁面繪制到屏幕上了。 結果是：你在互聯(lián)網(wǎng)上看過的一切。
網(wǎng)絡很復雜，但你剛剛完成了很多的工作
所以這就是網(wǎng)絡。迷惑嗎？ 我們都是，但是如果你已經(jīng)讀到這里，你已經(jīng)完成了最艱難的部分。 我跳過了一些細節(jié)，以便在這里向大家展示這個大圖; 但是如果你能記起上面列出事件的基本順序，填寫細節(jié)將是小菜一碟。
查看Part 2, 在那里我們將講解一個基本的Web應用程序的結構)
譯者：眾里尋他千百度
譯文：http://www.zcfy.cc/article/4137
原文：https://medium.freecodecamp.org/how-the-web-works-a-primer-for-newcomers-to-web-development-or-anyone-really-b4584e63585c
