輸入URI，按下回車發生了什麼？

當咱們輸入URL，按下回車發生了什麼？ 這個題目很俗套- -可是是面試常常出現的題目了。今天聽尼古拉斯•屌•大斌哥介紹關於從URI到瀏覽器呈現給咱們頁面發生了什麼。感受收穫頗多。索性就翻閱了一些其餘資料。在此總結下。這一夜也算是沒白白浪費。

當咱們輸入URL，發生了什麼？

用一個例子來講明把。當咱們打開 https://datura900607.github.io/home-automation/  這個網頁的時候發生了什麼？

經過URI定位到主機。

當咱們在瀏覽器輸入url後，瀏覽器經過DNS服務器，將網站中的URl中的主機域名解析爲，web服務器中所對應的IP地址。順序差很少是：

• 先在瀏覽器緩存中查詢，若是瀏覽器緩存中有就直接使用。
• 瀏覽器緩存中找不到 在系統緩存中查詢。
• 系統緩存中沒有在路由器緩存中查詢。
• 路由器找不到在web服務器中查詢，直到找到這個IP地址。

打包HTTP請求

好了,通過一番查詢，咱們找到了我家居網站的IP地址：151.101.100.133:443 這是咱們打包的HTTP請求：

 

經過TCP協議，向服務器發送請求

經過TCP協議與Web服務器建立鏈接。(俗稱三次握手)，向服務器發送請求

web服務器接收請求，交給相關進程處理

這裏要根據後臺語言不一樣而分狀況處理，我這個是HTML類型文件。web服務器接收請求後 找到服務器上相對應的html文件(通常是index.html)
若是後臺語言是PHP類型，則web服務器在接收到用戶的請求後將請求轉交給PHP應用服務器來處理，（web服務器自己不能處理PHP動態語言文件）

服務器響應請求，經過TCP協議回傳響應

這裏由於此家居網站就是一個靜態HTML。就直接找到HTML文件就會經過TCP協議回傳了。若是是php文件。則還須要PHP應用服務器將PHP文件，翻譯成HTML靜態代碼，傳回Web服務器，而後再經過TCP協議回傳響應。這是回傳的響應head截圖

 

瀏覽器接收響應，開始下載並渲染，將頁面呈如今咱們面前

1. 解析HTML生成DOM樹，
2. 解析CSS文件生成CSSOM樹，並解析Javascript代碼
3. CSS和DOM組合造成渲染樹，
4. 進行佈局，在瀏覽器中繪製渲染樹中節點的屬性(位置，寬度，大小等)
5. 繪製元素，繪製各個節點的可視屬性(顏色背景等，此時可能會造成多個圖層)
6. 合併圖層，將頁面呈現給用戶面前