輸入url或伺服器地址

① 從瀏覽器地址欄輸入URL到頁面顯示發生了什麼

大家好，從輸入url到頁面顯示發生了什麼是在前端面試中經常被問到的問題，今天，我將一步一步向大家介紹這個過程以及對其中的一些步驟的原理和設計到的重要網路協議展開講解。我大致將其分為下六大步驟：URL解析DNS查詢TCP連接處理請求接受響應渲染頁面?

URL解析顧名思義就是地址解析，它的作用是解析用戶輸入的地址，將它轉換成ip地址。大致步驟如下：1.用戶在地址欄輸入url。2.瀏覽器檢查緩存，查看緩存中是否存在請求的資源並且判斷它是否新鮮。

若資源未緩存，發起新請求

若已緩存，檢驗是否足夠新鮮（這里的新鮮指的是距離它上一次訪問的時間長短），足夠新鮮直接提供給客服端，否則發起新請求。

檢驗新鮮通常由兩個HTTP頭部欄位進行控制，分別是Expires和Cache-Control，Expires是由http1.0提供的，它的值是一個絕對時間表示緩存新鮮日期，在這個日期內都可使用。Cache-Control是由http1.1提供的，它的值為max-age=x秒，x即為有效時長。3.瀏覽器解析URL獲取協議，主機，埠，path等。4.瀏覽器封裝一個HTTP（GET）請求報文。5.瀏覽器獲取主機ip地址,過程如下：

找瀏覽器緩存，若沒有，繼續找。

本機緩存

hosts文件

路由器緩存

DNS緩存，若仍然未找到，進入第二個步驟，DNS查詢。

DNS查詢有兩種方式，遞歸查詢和迭代查詢。遞歸查詢：本地域名伺服器-->根域名伺服器-->頂級域名伺服器-->許可權域名伺服器查到了所需的IP地址後也是逐層返回。此方法會給根域名伺服器造成的負載過大，所以基本不用。迭代查詢：當本地域名伺服器向根域名伺服器發出迭代查詢請求報文時，根域名伺服器要麼給出所查詢的IP地址，要麼告訴本地域名伺服器你下一步應該向哪個頂級域名伺服器查詢。同樣，頂級域名伺服器收到由本地域名伺服器發送的迭代請求後，要麼給它IP，要麼告訴它再去哪個許可權域名伺服器找。在實際應用當中，一般採用遞歸和迭代相結合的方式。本地主機向本地域名伺服器查找為遞歸查詢，本地域名伺服器往下找則為迭代查詢。總之，只要在緩存中沒有找到，那麼就走DNS查詢，就可以獲取輸入的url中到目的主機的IP地址。

6.獲取到目的主機的IP地址後，即可建立TCP連接。

TCP連接的建立有3個步驟，也就是我們常說的三次握手：

（1）第一步:客戶機的TCP首先向伺服器的TCP發送連接請求報文段。這個特殊報文段的首部中的同步位SYN置1,同時選擇一個初始序號seq=J。TCP規定，SYN報文段不能攜帶數據，但要消耗掉一個序號。這時，TCP客戶進程進入SYN-SENT(同步已發送)狀態。（2）第二步:伺服器的TCP收到連接請求報文段後，如同意建立連接，則向客戶機發回確認，並為該TCP連接分配緩存和變數。在確認報文段中，把SYN位和ACK位都置1,確認號是ack=J+1,同時也為自己選擇一個初始序號seq=K。同時，確認報文段也不能攜帶數據，但也要消耗掉一個序號。這時，TCP伺服器進程進入SYN-RCVD(同步收到)狀態。（3）第三步:當客戶機收到確認報文段後，還要向伺服器給出確認，並為該TCP連接分配緩存和變數。確認報文段的ACK位置1,確認號ack=y+1,序號seq=x+1。該報文段可以攜帶數據，若不攜帶數據則不消耗序號。這時，TCP客戶進程進入ESTABLISHED(已建立連接)狀態。成功進行以上三步後，就建立了TCP連接，接下來就可以傳送應用層數據。TCP提供的是全雙工通信，因此通信雙方的應用進程在任何時候都能發送數據。但是，這時候有一個問題就是，伺服器端的資源是在完成第二次握手時分配的，而客戶端的資源是在完成第三次握手時分配的，這就使得伺服器易於受到SYN洪泛攻擊。SYN洪泛攻擊指的是攻擊者給目標伺服器發送大量的SYN消息，伺服器會發送SYN/ACK並等待攻擊者的ACK消息，這時伺服器上會為此連接佔用一定資源。如果攻擊者通過篡改包中的源IP或在Client端過濾相應包等方式使目標伺服器一直收不到ACK消息，這時伺服器上會保持大量的半連接，這些半連接佔用的資源會通過一個超時機制來釋放，如果攻擊者發送的包數量巨大，伺服器來不及回收資源，則會出現資源耗盡從而無法響應新的正常請求。SYNcookie可以有效抵禦SYN洪泛攻擊，洪泛攻擊也還有其他幾種方式，具體原理這里就不再過多介紹。

7.TCP連接建立之後發送HTTP請求

8.伺服器接受請求並解析，將請求轉發到服務程序。9.伺服器檢查HTTP請求頭是否包含緩存驗證信息，如果有則驗證緩存是否新鮮，返回304等狀態碼。10.處理程序讀取完整請求並准備HTTP響應。11.伺服器將響應報文通過TCP連接發送回瀏覽器。

12.瀏覽器接受HTTP響應報文，此時可以根據需求是否關閉TCP連接，TCP連接的關閉有4個步驟，通常稱為四次握手，這里就不再展開。13.瀏覽器檢查響應狀態碼，如果為301,302一類跳轉信息，瀏覽器會跳轉到新的地址欄繼續導航，如果是200，那麼表示瀏覽器可以繼續處理該請求。14.若資源可緩存，則進行緩存。15.對資源進行解碼壓縮。16.根據資源類型決定如何處理，URL請求的數據類型有時候是一個下載類型，有時候是正常的HTML頁面，在HTTP頭中有一個欄位Content-Type，它告訴瀏覽器返回的響應體數據是什麼類型。如果是下載類型，該請求會被提交到瀏覽器的下載管理器，此次URL請求就此結束。如果是HTML，則繼續，接下來就准備渲染進程了。（以下假定資源為HTML）

17.准備渲染進程，一般來說打開一個新頁面的渲染進程策略是：

通常情況下，打開新的頁面都會使用單獨的渲染進程

但是如果從A頁面打開B頁面，而且A和B都屬於同一站點的話，那麼B頁面可以復用A頁面的渲染進程18.提交文檔，就是瀏覽器進程會將網路進程接受到的HTML數據提交給渲染進程，當渲染進程確認提交之後，就將進入到正式的渲染階段了。19.解析HTML文檔，生成頁面，步驟如下。

構建DOM樹，因為瀏覽器無法直接理解和使用HTML，所以需要將HTML轉換為瀏覽器能夠理解的結構——DOM樹。那麼DOM樹是如何構建的呢？大家可參考下圖。

計算樣式，也就是把css文本轉換為瀏覽器可以理解的結構——styleSheets，並且計算出DOM樹種的每個節點的具體樣式，可參考下圖。

創建布局樹，有了DOM樹和DOM樹的樣式時，就可以創建布局樹了。可參考下圖。

對布局樹進行分層，並生成分層樹，並為每個圖層生成繪制列表，它會在合成線程中進行柵格化操作，在轉交給瀏覽器進程即可生成頁面，具體過程可參考李兵老師的瀏覽器工作原理課程(http://gk.link/a/11oJa)

20.顯示頁面（HTML解析過程中頁面會逐步顯示）。那麼大致的流程就是這樣，看到這里，趕緊回憶一下並試著組織好自己的語言去回答面試中面試官的提問吧。以上純屬個人在學習過程中的總結，若存在錯誤的地方，歡迎大家指正。