從輸入url到頁面加載完成發生了什麼？

從輸入url到頁面加載完成發生了什麼？——前端角度

　轉載自：https://www.cnblogs.com/daijinxue/p/6640153.html

更詳細的可以見https://www.jianshu.com/p/d616d887953a

https://www.cnblogs.com/kongxy/p/4615226.html

　　這是一道經典的面試題，這道面試題不光前端面試會問到，後端面試也會被問到。這道題沒有一個標準的答案，它涉及很多的知識點，面試官會通過這道題了解你對哪一方面的知識比較擅長，然後繼續追問看看你的掌握程度。當然我寫的這些也只是我的一些簡單的理解，從前端的角度出發，我覺得首先回答必須包括幾個基本的點，然後在根據你的理解深入回答。

　　1、瀏覽器的地址欄輸入URL並按下回車。

　　2、瀏覽器查找當前URL是否存在緩存，並比較緩存是否過期。

　　3、DNS解析URL對應的IP。

　　4、根據IP建立TCP連接（三次握手）。

　　5、HTTP發起請求。

　　6、服務器處理請求，瀏覽器接收HTTP響應。

　　7、渲染頁面，構建DOM樹。

　　8、關閉TCP連接（四次揮手）。

　　說完整個過程的幾個關鍵點後我們再來展開的說一下。

　　一、URL

　　我們常見的RUL是這樣的:http://www.baidu.com,這個域名由三部分組成：協議名、域名、端口號，這裏端口是默認所以隱藏。除此之外URL還會包含一些路徑、查詢和其他片段，例如：http://www.tuicool.com/search?kw=%E4%。我們最常見的的協議是HTTP協議，除此之外還有加密的HTTPS協議、FTP協議、FILe協議等等。URL的中間部分爲域名或者是IP，之後就是端口號了。通常端口號不常見是因爲大部分的都是使用默認端口，如HTTP默認端口80，HTTPS默認端口443。說到這裏可能有的面試官會問你同源策略，以及更深層次的跨域的問題，我今天就不在這裏展開了。

　　二、緩存

　　說完URL我們說說瀏覽器緩存,HTTP緩存有多種規則，根據是否需要重新向服務器發起請求來分類，我將其分爲強制緩存，對比緩存。

　　強制緩存判斷HTTP首部字段：cache-control，Expires。

　　Expires是一個絕對時間，即服務器時間。瀏覽器檢查當前時間，如果還沒到失效時間就直接使用緩存文件。但是該方法存在一個問題：服務器時間與客戶端時間可能不一致。因此該字段已經很少使用。

　　cache-control中的max-age保存一個相對時間。例如Cache-Control: max-age = 484200，表示瀏覽器收到文件後，緩存在484200s內均有效。 如果同時存在cache-control和Expires，瀏覽器總是優先使用cache-control。

　　對比緩存通過HTTP的last-modified，Etag字段進行判斷。

　　last-modified是第一次請求資源時，服務器返回的字段，表示最後一次更新的時間。下一次瀏覽器請求資源時就發送if-modified-since字段。服務器用本地Last-modified時間與if-modified-since時間比較，如果不一致則認爲緩存已過期並返回新資源給瀏覽器；如果時間一致則發送304狀態碼，讓瀏覽器繼續使用緩存。

　　Etag：資源的實體標識（哈希字符串），當資源內容更新時，Etag會改變。服務器會判斷Etag是否發生變化，如果變化則返回新資源，否則返回304。

　　

　　三、DNS域名解析

　　我們知道在地址欄輸入的域名並不是最後資源所在的真實位置，域名只是與IP地址的一個映射。網絡服務器的IP地址那麼多，我們不可能去記一串串的數字，因此域名就產生了，域名解析的過程實際是將域名還原爲IP地址的過程。

　　首先瀏覽器先檢查本地hosts文件是否有這個網址映射關係，如果有就調用這個IP地址映射，完成域名解析。

　　如果沒找到則會查找本地DNS解析器緩存，如果查找到則返回。

　　如果還是沒有找到則會查找本地DNS服務器，如果查找到則返回。

　　最後迭代查詢，按根域服務器 ->頂級域,.cn->第二層域，hb.cn ->子域，www.hb.cn的順序找到IP地址。

　　

　　遞歸查詢，按上一級DNS服務器->上上級->....逐級向上查詢找到IP地址。

　　

　　四、TCP連接

　　在通過第一步的DNS域名解析後，獲取到了服務器的IP地址，在獲取到IP地址後，便會開始建立一次連接，這是由TCP協議完成的，主要通過三次握手進行連接。

　　第一次握手： 建立連接時，客戶端發送syn包（syn=j）到服務器，並進入SYN_SENT狀態，等待服務器確認； 

　　第二次握手： 服務器收到syn包，必須確認客戶的SYN（ack=j+1），同時自己也發送一個SYN包（syn=k），即SYN+ACK包，此時服務器進入SYN_RECV狀態；

　　第三次握手： 客戶端收到服務器的SYN+ACK包，向服務器發送確認包ACK(ack=k+1），此包發送完畢，客戶端和服務器進入ESTABLISHED（TCP連接成功）狀態，完成三次握手。

 

　　完成三次握手，客戶端與服務器開始傳送數據。

　　

　　五、瀏覽器向服務器發送HTTP請求

　　完整的HTTP請求包含請求起始行、請求頭部、請求主體三部分。

　　

　　六、瀏覽器接收響應

　　服務器在收到瀏覽器發送的HTTP請求之後，會將收到的HTTP報文封裝成HTTP的Request對象，並通過不同的Web服務器進行處理，處理完的結果以HTTP的Response對象返回，主要包括狀態碼，響應頭，響應報文三個部分。

　　狀態碼主要包括以下部分

　　1xx：指示信息–表示請求已接收，繼續處理。

　　2xx：成功–表示請求已被成功接收、理解、接受。

　　3xx：重定向–要完成請求必須進行更進一步的操作。

　　4xx：客戶端錯誤–請求有語法錯誤或請求無法實現。

　　5xx：服務器端錯誤–服務器未能實現合法的請求。

　　響應頭主要由Cache-Control、 Connection、Date、Pragma等組成。

　　響應體爲服務器返回給瀏覽器的信息，主要由HTML，css，js，圖片文件組成。

　　七、頁面渲染

　　如果說響應的內容是HTML文檔的話，就需要瀏覽器進行解析渲染呈現給用戶。整個過程涉及兩個方面：解析和渲染。在渲染頁面之前，需要構建DOM樹和CSSOM樹。

　　

　　在瀏覽器還沒接收到完整的 HTML 文件時，它就開始渲染頁面了，在遇到外部鏈入的腳本標籤或樣式標籤或圖片時，會再次發送 HTTP 請求重複上述的步驟。在收到 CSS 文件後會對已經渲染的頁面重新渲染，加入它們應有的樣式，圖片文件加載完立刻顯示在相應位置。在這一過程中可能會觸發頁面的重繪或重排。這裏就涉及了兩個重要概念：Reflow和Repaint。

　　Reflow，也稱作Layout，中文叫回流，一般意味着元素的內容、結構、位置或尺寸發生了變化，需要重新計算樣式和渲染樹，這個過程稱爲Reflow。

　　Repaint，中文重繪，意味着元素髮生的改變只是影響了元素的一些外觀之類的時候（例如，背景色，邊框顏色，文字顏色等），此時只需要應用新樣式繪製這個元素就OK了，這個過程稱爲Repaint。

　　所以說Reflow的成本比Repaint的成本高得多的多。DOM樹裏的每個結點都會有reflow方法，一個結點的reflow很有可能導致子結點，甚至父點以及同級結點的reflow。

　　下面這些動作有很大可能會是成本比較高的：

• 增加、刪除、修改DOM結點時，會導致Reflow或Repaint

• 移動DOM的位置，或是搞個動畫的時候

• 內容發生變化

• 修改CSS樣式的時候

• Resize窗口的時候（移動端沒有這個問題），或是滾動的時候

• 修改網頁的默認字體時

　　基本上來說，reflow有如下的幾個原因：

• Initial，網頁初始化的時候

• Incremental，一些js在操作DOM樹時

• Resize，其些元件的尺寸變了

• StyleChange，如果CSS的屬性發生變化了

• Dirty，幾個Incremental的reflow發生在同一個frame的子樹上

　　八、關閉TCP連接或繼續保持連接

　　通過四次揮手關閉連接(FIN ACK, ACK, FIN ACK, ACK)。

　　

　　第一次揮手是瀏覽器發完數據後，發送FIN請求斷開連接。

　　第二次揮手是服務器發送ACK表示同意，如果在這一次服務器也發送FIN請求斷開連接似乎也沒有不妥，但考慮到服務器可能還有數據要發送，所以服務器發送FIN應該放在第三次揮手中。

　　這樣瀏覽器需要返回ACK表示同意，也就是第四次揮手。

 

　　至此從瀏覽器地址欄輸入URL到頁面呈現到你面前的整個過程就分析完了，上面內容如有錯誤歡迎留言交流。