輸入URL到瀏覽器完成頁面渲染髮生了什麼

瀏覽器渲染大體的幾個過程：

• DNS域名解析
• 創建TCP鏈接
• 發送HTTP請求
• 服務器處理請求
• 返回響應結果
• 關閉TCP鏈接
• 瀏覽器解析HTM
• 瀏覽器佈局渲染

1、DNS域名解析 (經過DNS查詢域名所對的IP地址)

• 咱們在瀏覽器輸入網址的時候，瀏覽器從歷史記錄和書籤等地方搜尋本身的DNS緩存，找出已輸入的字符串能夠對應的url，而後根據智能提示，讓你能夠經過enter鍵，補全url地址。
• 查找本地hosts文件，檢查該文件是否有相應的域名，ip對應關係，有的話取出
• 若上兩步都沒有，將域名發送給本地DNS服務器（中國電信，移動），查詢本地DNS緩存，查找成功則返回結果。若不成功則經過迭代查詢，屢次訪問不一樣的DNS服務器，取到域名對應的ip地址返回給本地DNS服務器
• 本地DNS將這個域名和IP地址緩存起來，而後把ip地址以響應報文的形式發送給客戶端

2、創建TCP鏈接 （可靠穩定）

TCP 是一種面向有鏈接的傳輸層協議。 它能夠保證兩端（發送端和接收端）通訊主機之間的通訊可達。 它可以處理在傳輸過程當中丟包、傳輸順序亂掉等異常狀況；此外它還能有效利用寬帶，緩解網絡擁堵。

三次握手：創建鏈接

上圖也能夠這麼理解：

客戶端：「你好，在家不，有你快遞。」

服務端：「在的，送來就行。」

客戶端：「好嘞。」

3、發送http請求

   HTTP請求報文（用什麼協議，取什麼資源）

4、服務器處理請求

   web服務器（準確說應該是http服務器）處理請求，諸如Apache、Ngnix、IIS等。web服務器解析用戶請求，知道了須要調度哪些資源文件（HTML，css，js），再經過相應的這些資源文件處理用戶請求和參數，並調用數據庫信息，最後將結果經過web服務器返回給瀏覽器客戶端。

5、返回響應結果

返回響應報文，報文中都會有一個HTTP狀態碼

6、關閉TCP鏈接

四次揮手，避免服務器與客戶端雙方的資源佔用和損耗

上圖能夠這麼理解：

客戶端：「兄弟，我這邊沒數據要傳了，咱關閉鏈接吧。」

服務端：「收到，我看看我這邊有木有數據了。」

服務端：「兄弟，我這邊也沒數據要傳你了，咱能夠關閉鏈接了。」

客戶端：「好嘞。」

7、瀏覽器解析HTML

渲染引擎使用webkit，採用關鍵路徑渲染的方式

a.構建DOM樹

解析html文件，遍歷文檔節點，生成Dom樹。 DOM樹的生成過程可能會被CSS和JS的加載阻塞

b.生成CSSOM規則樹

解析CSS文件生成CSS規則樹，每一個css文件都被分析成一個stylesheet對象

c.渲染阻塞

當文檔加載過程當中遇到 js 文件，html 文檔會掛起渲染（加載解析渲染同步）的線程，不只要等待文檔中 js 文件加載完畢，還要等待解析執行完畢，才能夠恢復 html 文檔的渲染線程。由於 JS 有可能會修改 DOM

d.構建渲染樹

瀏覽器會從DOM樹的根節點開始遍歷，對每一個可見節點找到其適配的CSS樣式規則應用

渲染樹是用於顯示，那些不可見的元素固然就不會在這棵樹中出現了，譬如。除此以外，display等於none的也不會被顯示在這棵樹裏頭，可是visibility等於hidden的元素是會顯示在這棵樹裏頭的。

e.渲染樹佈局

從渲染樹的根節點開始遍歷，計算每一個可見節點的在頁面上確切的位置和大小，這個階段輸出的是盒子模型

f.渲染樹繪製

遍歷渲染樹，調用渲染器的paint（）方法在屏幕上顯示內容，渲染樹的繪製工做由瀏覽器的UI後端框架完成

g.reflow和repaint (迴流與重繪)

HTML默認是流式佈局的，CSS和js會打破這種佈局，改變DOM的外觀樣式以及大小和位置。這時就要提到兩個重要概念：replaint和reflow。

replaint：屏幕的一部分重畫，不影響總體佈局，好比某個CSS的背景色變了，但元素的幾何尺寸和位置不變。

reflow： 意味着元件的幾何尺寸變了，咱們須要從新驗證並計算渲染樹。是渲染樹的一部分或所有發生了變化。