輸入網址到網頁顯示的整個流程

最近在看一些大廠的筆經面經時，經常看到這個問題，索性在今天也把自己學習的知識整理一下。

第一步：首先你得在瀏覽器中輸入網址，比如輸入www.baidu.com。其中www為主機，baidu為域名，com為型別。但是有網址不能直接找到對應的響應主機，必須把網址，即域名轉化為ip地址。

第二步：進行DNS（Domain Name System，域名系統）查詢，它的作用是將域名轉化為具體的ip地址。

先談一下DNS的結構：

（1）根域名伺服器，全球只有13個不同ip地址的伺服器，注意不是伺服器只有13臺，只是他們所代表的地址只有13個，也就是存在映象伺服器，一個地址可以對應多個映象伺服器。

（2）根域名伺服器之下的頂級域名伺服器，如com、net、cn、gov等。

（3）頂級域名伺服器之下的權威伺服器，比如baidu、facebook等。

（4）權威伺服器之下的資源記錄，比如www、ftp、mail等。

查詢的過程如下：

（1）首先會在瀏覽器快取中去查詢，之前每瀏覽一個網站，瀏覽器都會在快取中存有域名與ip地址的對映關係。不過快取失效的時間不由瀏覽器決定，而由作業系統決定。

（2）瀏覽器快取中查詢不到後，之後會在系統快取中查詢，由瀏覽器發起一個系統呼叫，查詢系統快取中的資料。

（3）系統快取中也查詢不到後，將會去路由器快取中查詢。

（4）路由器快取中也找不到的話，將會從本地DNS伺服器的快取中查詢，本地伺服器即使用者自己配置的DNS伺服器。

（5）如果本地的DNS伺服器也找不到的話，本地DNS將會發送請求至根域名伺服器，根域名伺服器中沒有相關快取資料的時候，就會返回com頂級域名伺服器的地址。然後本地DNS伺服器再發送請求至com頂級域名伺服器，com頂級域名伺服器中查詢不到的話，就會返回baidu權威伺服器的地址，然後本地DNS伺服器再發送請求至baidu權威伺服器，baidu權威伺服器就會返回www主機地址。（這是一種迭代的過程，還有一種遞迴的過程。即local至根域名，根域名不直接返回com地址，而是傳送請求至com，com傳送請求至baidu，baidu傳送請求至www，www再返回給baidu，baidu返回給com，com再返回給local）至此，整個DNS查詢步驟結束，現在瀏覽器拿到了域名對應的ip地址。

第三步：瀏覽器傳送請求至伺服器，假設我們現在輸入的地址是www.baidu.com，那麼瀏覽器預設將網址改成這樣的形式，即http://www.baidu.com。

傳送格式如下：

發現返回了307狀態碼，也就是臨時重定向，需要我們重定向到location表明的地址，即https://www.baidu.com。仔細觀察，僅僅多了個s，也就是說http與https之間是有差別的，關於兩個的區別，請移步我的另外一篇文章淺析HTTP與HTTPS的區別

307與301、302本質上差不多，但是有細微的差別，簡單來說是為了增強301與302的規範性。其他差別這裡不做深究，可以參考HTTP狀態碼302、303和307的故事

第四步：瀏覽器向重定向後的地址傳送請求

傳送的請求格式如下：

可以看得出：

（1）Request Method表明請求方式是get。

（2）User-Agent，使用者代理，表明所用瀏覽器的一些資訊，包括核心，版本等。

（3）Connection:keep-alive表明需要伺服器為之後的請求保持tcp連線

（4）Cookie中儲存了一些與使用者狀態相關的數值，可以與session連用來跟蹤會話，那麼有關cookie與session的內容，可以參考我的另外一篇文章【計算機網路】Cookie與Session的區別

第五步：伺服器處理http請求

伺服器可以根據Cookie中的資料，通過遍歷記憶體中的Session集合，從而判斷使用者的登入狀態。如果使用者未登入，則展示一些諸如首頁的基本宣傳資料。如果使用者已經登入，通過解析get請求頭、post請求體中的引數，查詢資料庫，返回使用者相關資料，填充到檢視中。並將此次處理完的內容通過相應的壓縮演算法，壓縮成某個塊。

第六步：伺服器返回http響應

伺服器返回的響應格式如下：

其中有些鍵值対表明：

（1）Content-Encoding的值是gzip，表明響應體使用了gzip方式壓縮了，瀏覽器也需要使用gzip演算法進行解壓縮，解壓縮響應體後，產生如下的內容

（2）Content-Type的值是text/html，表明伺服器需要瀏覽器將次內容以html文字的形式顯示出來，而不是以檔案形式去下載它

第七步：瀏覽器請求樣式以及圖片檔案，用以渲染介面並顯示給使用者

瀏覽器解壓縮響應體後，在介面顯示的同時，下載css、png、gif等一些靜態檔案，這些靜態檔案可以被瀏覽器快取，防止多次請求。很多公司將自己的靜態檔案託管在CDN上（Content Delivery Network，即內容分發網路），從CDN上載入大量靜態檔案，加快查詢速度，減少原本網站的併發壓力。

訪問百度的靜態檔案有：（出去前兩個與最長的那個）

第八步：瀏覽器通過Ajax（Asynchronous Javascript And XML 非同步 JavaScript 和 XML）

在傳統的web應用，使用者每發一次請求，使用者的動作就會被阻塞，即在伺服器返回響應之前，使用者不可以進行其他的操作，只能等待響應。然後伺服器會響應一個完整的html頁面，瀏覽器再次進行渲染。哪怕是一個很小的一個請求，都會阻塞使用者動作，以及重新整理整個頁面，極大地浪費了使用者的時間和網路的頻寬，也增加了伺服器的壓力。

Ajax出現之後，通過此技術發起的http請求，將不會阻塞使用者的動作，伺服器響應之後，頁面會進行一個區域性的重新整理，也就是不會重新整理整個頁面，極大提高了頁面載入與伺服器處理的效率。當然Ajax也要自身的缺點，暴露了瀏覽器和伺服器通訊的具體邏輯，容易造成漏洞攻擊。此外，Ajax沒有後退機制，在一定程度上，使用者的體驗感降低。

百度介面顯示出來後，百度又利用了ajax去請求我之前的搜尋關鍵詞，然後利用js填充到搜尋框的下拉列表中，返回的資料如下：

總結：以上就是關於輸入一個網址到介面顯示的整個流程的具體介紹了，希望能幫助到更多的同學們，也希望你們能指出其中存在的錯誤，一同進步。