述從輸入網址到瀏覽器顯示的過程

• 1.輸入網址URL
• 2.DNS域名解析
• 3.建立TCP連接
• 4.瀏覽器向服務器發送HTTP請求
• 5.服務器處理HTTP請求
• 6.頁面渲染
• 7.斷開TCP連接

1.輸入網址URL

在web瀏覽器窗口地址欄輸入想要訪問的網址URL。

2.DNS域名解析

以www.baidu.com為例，這是一個主機名也叫域名，而在整個互聯網中，路由器是以IP地址作為識別每個計算機的唯一標識，因此我們想要在互聯網中傳輸數據，就必須知道對方的IP地址。而DNS域名解析則幫助我們將主機名轉換成對應的IP地址。

1. 一般來說，瀏覽器會首先查看自身緩存有沒有域名對應的IP地址，若有則DNS解析結束，直接返回該IP地址，若沒有，則查看本地硬盤的 hosts 文件，看看其中有沒有和這個域名對應的IP地址，如果有的話就直接使用 hosts 文件里面的 IP地址。
2. 如果在本地的 hosts 文件沒有能夠找到對應的 IP地址，瀏覽器會發出一個 DNS請求到本地DNS服務器 。本地DNS服務器一般都是你的網絡接入服務器商提供，比如中國電信，中國移動。
3. 查詢你輸入的網址的DNS請求到達本地DNS服務器之后，本地DNS服務器會首先查詢它的緩存記錄，如果緩存中有此條記錄，就可以直接返回結果，此過程是遞歸的方式進行查詢。如果沒有，本地DNS服務器還要向DNS根服務器進行查詢。
4. 根DNS服務器沒有記錄具體的域名和IP地址的對應關系，而是告訴本地DNS服務器，你可以到域服務器上去繼續查詢，并給出域服務器的地址。這種過程是迭代的過程。
5. 本地DNS服務器繼續向域服務器發出請求，在這個例子中，請求的對象是.com域服務器。.com域服務器收到請求之后，也不會直接返回域名和IP地址的對應關系，而是告訴本地DNS服務器，你的域名的解析服務器的地址。
6. 最后，本地DNS服務器向域名的解析服務器發出請求，這時就能收到一個域名和IP地址對應關系，本地DNS服務器不僅要把IP地址返回給用戶電腦，還要把這個對應關系保存在緩存中，以備下次別的用戶查詢時，可以直接返回結果，加快網絡訪問，此過程是遞歸的過程。

3.建立TCP連接

在HTTP工作開始之前，web瀏覽器首先要通過網絡與web服務器建立連接，該連接是通過TCP來完成的。在TCP/IP協議模型中，HTTP屬于應用層協議，TCP屬于傳輸層協議，應用層協議HTTP工作之前首先要在傳輸層建立TCP連接，HTTP建立TCP連接通常使用端口號80。

4.瀏覽器向服務器發送HTTP請求

瀏覽器向 Web 服務器發起一個 HTTP 請求，HTTP 協議是建立在 TCP 協議之上的應用層協議，其本質是在建立起的TCP連接中，按照HTTP協議標準發送一個索要網頁的請求。在這一過程中，會涉及到負載均衡等操作。

拓展：什么是負載均衡？

負載均衡，英文名為 Load Balance，其含義是指將負載（工作任務）進行平衡、分攤到多個操作單元上進行運行，例如 FTP 服務器、Web 服務器、企業核心服務器和其他主要任務服務器等，從而協同完成工作任務。負載均衡建立在現有的網絡之上，它提供了一種透明且廉價有效的方法擴展服務器和網絡設備的帶寬、增加吞吐量、加強網絡處理能力并提高網絡的靈活性和可用性。

負載均衡是分布式系統架構設計中必須考慮的因素之一，例如天貓、京東等大型用戶網站中為了處理海量用戶發起的請求，其往往采用分布式服務器，并通過引入反向代理等方式將用戶請求均勻分發到每個服務器上，而這一過程所實現的就是負載均衡。

5.服務器處理HTTP請求

服務器獲取到客戶端的 HTTP 請求后，會根據 HTTP 請求中的內容來決定如何獲取相應的文件，并將文件發送給瀏覽器，返回HTTP響應。

6.頁面渲染

瀏覽器在接受到服務器的HTTP響應時，開始顯示頁面，首先解析HTML文件構建 DOM 樹，然后解析 CSS 文件構建渲染樹，等到渲染樹構建完成后，瀏覽器開始布局渲染樹并將其繪制到屏幕上。
在瀏覽器顯示HTML時，它會注意到需要獲取其他地址內容的標簽。這時，瀏覽器會發送一個獲取請求來重新獲得這些文件。比如我要獲取外圖片，CSS，JS文件等，類似于下面的鏈接：

圖片：http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif
CSS式樣表：http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css
JavaScript 文件：http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js

這些地址都要經歷一個和HTML讀取類似的過程。所以瀏覽器會在DNS中查找這些域名，發送請求，重定向等等。不像動態頁面，靜態文件會允許瀏覽器對其進行緩存。有的文件可能會不需要與服務器通訊，而從緩存中直接讀取，或者可以放到CDN中。

7.斷開TCP連接

客戶端和服務器通過四次揮手終止 TCP 連接。

<input type="number" placeholder="請輸入充值的RMB金額" name="pay_number" id="pay_number" onkeyup="javascript：senddata(this);"/> 元 <span id="outdiv"></span>
//下方為js代碼，上方為HTML構造
<script type="text/javascript">function senddata(inputobj) {	
var obj;	
obj = document.getElementById("outdiv");	
obj.innerHTML = '您將充值<strong><em><span style="color:#E53333;font-size:16px;">' + inputobj.value * 10 + '</span></em></strong>金幣';
}</script>