（譯）Web是如何工作的：給Web開發新手的初級讀物
阿新 • • 發佈：2017-11-20
又是 不知道 16px really 工程 mil 消息 image rar 原文地址：https://medium.freecodecamp.org/how-the-web-works-a-primer-for-newcomers-to-web-development-or-anyone-really-b4584e63585c
如果你剛開始學習Web開發，你可能會認為你知道網絡是如何工作的——至少基本上是這樣的。
……但是當你嘗試去解釋一個簡單網站是如何工作的時，頭腦卻是一片空白。IP地址又意味著什麽？“客戶端——服務器端”具體又是如何運作的？
事實上，在有功能強大的開發框架的今天，對於一些新手很容易就忽略掉對Web的基礎認識。
我知道，我曾經就是這樣的，這沒有什麽不好意思承認的。Web是復雜的，只有當你開始後端工程師的生涯時，你才會意識到這些基礎的重要性。（如果你想寫出一個能夠正常運行的Web程序。） ![技術分享圖片]()
2、瀏覽器解析這個URL所包含的信息。這個URL包含了使用的協議（“https”），主機名(github.com)以及資源（“/”）。在這個例子中，“.com”後面沒有任何東西去指向一個特指的資源，所以瀏覽器就知道只檢索主頁。
![技術分享圖片]()
3、瀏覽器與ISP通信，通過DNS查找主機名為www.github.com的Web服務器所對應的IP地址。DNS服務將先聯系根域名服務器，該服務器將查找https://www.github.com，並取得“.com”頂級域名的域名服務器對應的IP地址，然後將這個IP地址返回給你的DNS服務。DNS服務對“.com”做擴展查詢https://www.github.com對應的IP地址。
![技術分享圖片]()
來源: https://technet.microsoft.com/en-us/library/bb962069.aspx
4、一旦ISP接受到目標服務器對應的IP地址，它就會把這個IP地址發送給你的瀏覽器。
![技術分享圖片]()
5、你的瀏覽器將拿這個IP地址和URL中的端口號（HTTP協議默認端口號是80，HTTPS默認端口號是443），打開一個TCP套接字連接。這時，你的瀏覽器和服務器就建立了連接。
6、你的瀏覽器發送一個HTTP請求至Web服務器，去獲取www.github.com的主頁。
![技術分享圖片]()
7、Web服務器接收請求，並查找HTML頁面。如果該頁面存在，該Web服務器準備響應並把它發回給你的瀏覽器。如果服務器找不到你請求的頁面，它將發送一個404錯誤消息，404表示“頁面未找到”
![技術分享圖片]()
8、你的瀏覽器把它接收到的HTML頁面從頭到尾掃描一遍，並去尋找其它相關的資源，如圖片、CSS文件、JavaScript腳本文件等等。
![技術分享圖片]()
9、在網頁中涉及的其它資源，服務器會重復上面的步驟去發起HTTP請求每個相應的資源。
10、一旦瀏覽器加載完HTML涉及到的所有資源，頁面最終會加載在瀏覽器窗體裏，並關閉與服務器的連接。
![技術分享圖片]()
構建了DOM樹之後，將對樣式表進行解析，以了解如何對每個節點進行樣式化。使用上面的信息，瀏覽器從上至下遍歷DOM節點，並計算每個節點的CSS樣式、位置、坐標等等。
一旦瀏覽器取得了DOM節點和它們的樣式，它最終根據你的屏幕準備繪制頁面。最終頁面就是你之前在網絡上看到的頁面一樣。
Web是復雜的，但是你已經了解了其中難懂的一部分
以上就是Web的一個概括，迷失了嗎？我們都有迷失，但是你已經讀到了這，你已經了解了難懂的一部分。我在這裏顯然跳過了一些細節，以一種有趣的方式向你展示它的全圖，但是如果你的思路能跟上上面概述的基本順序，那細節上的填補將是小菜一碟。
在下一部分，我們將處理基本web應用程序的結構。
一個基礎的網頁搜索
讓我們從我們都做過的事情開始講解：你在瀏覽器的地址欄裏敲入“www.github.com”後，頁面將會加載在瀏覽器裏。 這個操作看起來很簡單，它後面其實發生了許多神奇的事情，我們現在就來一探究竟。Web組成部分的定義
了解Web是比較難的，因為它包含了很多術語。 不幸的是，部分術語決定了你能否理解接下來的文章。從代碼到網頁的旅程
現在我們對這旅程中主要名詞有了一定的了解，讓我們通過github搜索來看下，我們是如何通過在地址欄裏輸入一個URL到達對應的網頁的： 1、在你的瀏覽器裏輸入URL跨越互聯網的深淵
一件值得註意的是，當你發起一個請求時，你請求獲取的信息是如何傳送的。當你發起一個請求，這些信息是拆分成許多小塊的，我們稱之為包，每一個包包含TCP頭部，這個頭部裏包含了源主機和目的主機的端口號，以及IP頭部包含源主機和目的主機的IP地址。然後這個包通過以太網、WiFi和蜂窩網絡傳輸，並允許在任何路徑上進行傳輸，並在到達最終目的地時獲取盡可能多的跳轉。 （事實上我們並不關心包是如何到達目的地的，我們關心的是這些包能夠安全地傳送到目的主機），一旦這些包到達目的主機，它們將再次組合起來，當成一個整體進行傳送。 那麽所有這些包是怎麽知道它們應如何到達目的主機，而不丟失任何包的呢？ 答案就是TCP/IP。 TCP/IP是兩部分組成的，它的功能是作為因特網的基本“控制系統”。IP表示因特網互聯協議，它的主要任務是通過每個包的IP頭部（例如IP地址）去發送和尋找路徑傳送到其它電腦。第二部分是傳輸控制協議（TCP），它的任務是拆分信息或者是把文件拆成小包，通過TCP頭部把包路由至目的電腦相應的應用上，如果包發生丟失時，就重新發送，一旦當他們都到達另一端時，就按正確的順序組裝起來。描繪最終的圖形
等等，任務還未完成。現在你的瀏覽器已經取得了網站首頁的全部資料（HTML、CSS、JavaScript、圖片等等），它還得經過幾步把這些資源以人可讀的網頁的方式呈現。 你的瀏覽器有一個渲染引擎，它就是負責展示內容的。這個渲染引擎以小塊的方式接受所有資源的內容，然後通過HTML解析算法告訴瀏覽器如何解析這些資源。 一旦解析完成，它會生成一個由DOM元素組成的結構樹，DOM代表文檔對象模型，它是在HTML文檔中如何呈現所有對象位置的一種約定。每個文檔中的對象或者說節點，可以使用腳本語言，如JavaScript，去操作它們。
構建了DOM樹之後，將對樣式表進行解析，以了解如何對每個節點進行樣式化。使用上面的信息，瀏覽器從上至下遍歷DOM節點，並計算每個節點的CSS樣式、位置、坐標等等。
一旦瀏覽器取得了DOM節點和它們的樣式，它最終根據你的屏幕準備繪制頁面。最終頁面就是你之前在網絡上看到的頁面一樣。
Web是復雜的，但是你已經了解了其中難懂的一部分
以上就是Web的一個概括，迷失了嗎？我們都有迷失，但是你已經讀到了這，你已經了解了難懂的一部分。我在這裏顯然跳過了一些細節，以一種有趣的方式向你展示它的全圖，但是如果你的思路能跟上上面概述的基本順序，那細節上的填補將是小菜一碟。
在下一部分，我們將處理基本web應用程序的結構。（譯）Web是如何工作的：給Web開發新手的初級讀物