輸入了url然後呢？

Catagory

1. Foreword
2. 輸入地址
3. 瀏覽器查找IP地址
4. 瀏覽器向Web伺服器發送HTTP請求
5. 瀏覽器解析渲染頁面
6. 優化

Foreword

What really happens when you navigate to a URL

輸入地址

當我們在瀏覽器輸入url時，瀏覽器已經開始只能匹配了，它會從我們的歷史記錄里，書籤等地方找到可能匹配的字元串，給出補全的url，有些瀏覽器甚至會把相關的頁面展示出來。

瀏覽器查找IP地址

需要把我們輸入的域名地址轉換成IP地址，這一過程稱為DNS解析。DNS解析是一個遞歸查詢的過程。

DNS域名解析過程

域名解析過程： . -> .com -> google.com. -> www.google.com.

• 瀏覽器緩存

  瀏覽器緩存DNS記錄一段時間，操作系統並沒有告訴瀏覽器每個DNS記錄的生存時間，因此瀏覽器會將其緩存一段固定的時間（一般在2到30分鐘之間）。

• 系統緩存
  如果瀏覽器緩存不包含所需的記錄，則瀏覽器進行調用操作系統的緩存。
• 路由器緩存
  請求繼續到路由器，路由器通常具有自己的DNS緩存。
• IPS伺服器緩存
  檢查的下一個位置是緩存ISP的DNS伺服器。
• 根域名伺服器緩存
• 頂級域名伺服器緩存
• 主域名伺服器緩存

DNS負載均衡：成千上萬台伺服器都可以作為解析的IP地址，DNS可以返回一個適合的機器的IP給用戶，從而達到加速和穩定的效果，例如可以根據每台機器的負載量，該機器離用戶地理位置的距離等等，這種過程就是DNS負載均衡，又叫做DNS重定向。CDN就是利用了DNS的重定向技術，DNS伺服器會返回一個跟用戶最接近的點的IP地址給用戶，CDN節點的伺服器負責響應用戶的請求，提供所需的內容。

瀏覽器向Web伺服器發送HTTP請求

在動態網頁中，瀏覽器需要發送請求到網站的伺服器。

請求中一般都會包含瀏覽器對此域的Cookie。

HTTP和HTTPS,HTTPS協議的本質就是HTTP + SSL(or TLS).HTTP請求報文由三部分組成: 請求行, 請求報頭,請求正文。

伺服器處理請求並返回HTTP報文.

HTTP響應報文也是由三部分組成: 狀態碼, 響應報頭,響應報文。根據狀態碼瀏覽器可能做重定向。瀏覽器會再次跟蹤重定向的地址。

瀏覽器根據返回的響應報文，進行頁面的渲染。

瀏覽器解析渲染頁面

頁面渲染

瀏覽器是一個邊解析邊渲染的過程。首先瀏覽器解析HTML文件構建DOM樹，然後解析CSS文件構建渲染樹，等到渲染樹構建完成後，瀏覽器開始布局渲染樹並將其繪製到屏幕上。這個過程比較複雜，涉及到兩個概念: reflow(迴流)和repain(重繪)。DOM節點中的各個元素都是以盒模型的形式存在，這些都需要瀏覽器去計算其位置和大小等，這個過程稱為relow;當盒模型的位置,大小以及其他屬性，如顏色,字體,等確定下來之後，瀏覽器便開始繪製內容，這個過程稱為repain。頁面在首次載入時必然會經歷reflow和repain。reflow和repain過程是非常消耗性能的，尤其是在移動設備上，它會破壞用戶體驗，有時會造成頁面卡頓。所以我們應該儘可能少的減少reflow和repain。計算樣式並生成渲染對象的過程為attachment，每個dom節點有一個attach方法，attachment的過程是同步的，調用新節點的attach方法插入到dom樹中。

parser：解析， Render Tree:渲染樹 Layout:安排布局

瀏覽器在解析頁面的過程中，如果遇到請求外部資源時，就會發送請求獲取嵌入在HTML中的資源（如圖片、音頻、視頻、CSS、JS等等），請求是非同步的，並不會影響文檔的載入。但是，如果遇到JS文件，HTML文檔會掛起渲染，要等待JS載入並且解析完畢，在回到斷點處繼續渲染。因為JS可能改變文檔結構，瀏覽器的JS阻塞行為，是為了更有效的渲染頁面。

優化

拋過UI層面，一個網頁的體感很大程度就要依靠載入的速度，在這一系列的載入渲染過程中，可優化的項目很多：

• 緩存，既然瀏覽器第一個尋找的是緩存，那麼我們就要先利用緩存。能緩存在本地的盡量從本地載入。脫離網路，將靜態資源緩存在瀏覽器端。
• DNS，必須從網路載入的，要縮短鏈路時間，合理的利用DNS資源。在減少DNS查找和允許高並發下載中找到折中方案。
• 減少請求數，合併文件，圖片映射，行內圖片，懶載入等，都可以提升首屏時間。
• 避免重定向，重定向不可避免的降低的用戶體驗，如果只是為了鏈接兩個網站，可以創建一條CNAME指向。
• 減少DOM元素，可以說避免不必要的DOM深度，瀏覽器會節省遍歷樹的時間。
• 規範CSS，不要使用行內樣式，避免後代選擇器，盡量使用子選擇器，避免使用通配符，選擇捨棄@import，樣式表放在頂部等。
• 減少JS對DOM對操作，避免利用JS去修復布局問題，把腳本放在底部。
• 清除不必要對Cookie，保證Cookie盡量小，給cookie設置合適的域級別，以免影響其它子域，設置合適對有效期。

推薦閱讀：