步驟拆分

• 網絡-請求和響應
  • 緩存
  • DNS解析
  • 建立TCP連接(三次握手和四次揮手)
  • 服務端驗證請求
  • 響應文件類型(Content-Type)
• 瀏覽器-解析與渲染
  • 瀏覽器進程和線程
  • 構建Dom樹
  • layout paint 合成顯示

詳細回答

一、緩存

緩存在請求資源時很大程度提高了效率,對于前端和服務端都是很好的性能優化的手段。

緩存分為強緩存和協商緩存

判斷強緩存的條件是,在請求開始,瀏覽器會驗證該請求是否具有強緩存,判定緩存的標識是請求頭中的cache-control(http1.1同時存在cache-control和expires)、expires(http1.0只存在expires)字段,當兩者在http1.1同時設置時,優先使用cache-control判斷是否具有強緩存

cache-control的值是max-age = xx;這個值代表客戶端收到第一次響應成功后,該資源請求需要被緩存的時間,未超過這個時間下次請求則不發送任何請求,直接使用緩存數據

判斷協商緩存的條件是請示頭中的If-None-Match 和響應頭中的E-tag,這兩個字段成對存在,如果發出請求后兩者相對于,則表示請求結果未發生任何改變,瀏覽器可以使用本地緩存,服務器返回狀態碼304

二、DNS解析

DNS的解析過程是域名轉換為真實IP地址的過程。

一個域名對應一個IP地址,一個IP地址可以對應多個域名。

優先從本機hosts文件中查找是否有和這個網站和IP地址映射關系,有則直接直接使用這個IP地址,完整解析。

hosts文件中沒有映射關系,DNS會按照固定的順序查找緩存,步驟為瀏覽器 、本機系統、路由器緩存 、運營商緩存、根域名服務器、頂級域名服務器、主域名服務器。

沒有緩存則像DNS服務器發出請求,獲取該域名對應的真實IP地址(此過程可以使用dns-prefetch進行預解析優化)

三、TCP連接

http的本質就是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連接成功）狀態，完成三次握手。

該過程完成后,服務端開始像客戶端傳輸數據。

四、服務端驗證請求

服務端收到請求會對請求進行統一的驗證,如安全攔截,跨域驗證等。

根據請求類型做出處理,返回對應的響應白報文。

五、響應文件類型

服務端會根據Content-Type 來判斷響應文件類型

文本、圖片等資源瀏覽器會直接渲染展示到頁面

stream流文件,瀏覽器會進行下載

html文檔,會交給瀏覽器進行解析和渲染

六、瀏覽器的線程和進程

瀏覽器是多進程的,每一個窗口是一個進程。瀏覽器內核則是多線程的,資源下載會進行多線程下載。

瀏覽器內核的線程分為以下幾種

• 定時器線程
  • 負責執行異步定時器一類的函數的線程，如 setInterval，setTimeout 等。
  • 主線程依次執行代碼時，遇到定時器，會將定時器交給該線程處理，當計數完畢后， 事件觸發線程會將計數完畢的事件加入到任務隊列的尾部，等待 JS引擎線程執行。
• GUI線程
  • 主要負責頁面的渲染，解析 HTML，CSS，構建 DOM 樹，布局和繪制等。
  • 當頁面需要重繪或者由于某種操作引發回流時，將執行該線程。
  • 該線程與JS 引擎線程互斥，當執行 JS 引擎線程時，GUI渲染線程會被掛起， 當前任務隊列為空時，JS引擎才會去執行 GUI 渲染。
• 網絡請求進程
  • 主要負責異步請求一類的函數的線程，如 Promise，axios，ajax等，主線程依次執行代碼時，遇到異步請求，會將函數交給該線程處理，當監聽到狀態碼變更，如果有回調函數，時間觸發線程會將回調函數加入到任務隊列的尾部，等待 JS 引擎線程的執行。
• Js引擎線程
  • 主要負責處理 JavaScript 腳本，執行代碼。
  • 也主要負責執行準備好的待執行的事件，即定時器結束，或者異步請求成功并正確返回時，將依次進入任務 隊列，等待 JS 引擎線程的執行。
  • 該線程與 GUI 渲染線程互斥，當 JS引擎線程執行 JavaScript 腳本時間過長， 將導致頁面渲染的阻塞。
• 事件觸發線程
  • 主要負責將準備好的事件交給 JS 引擎線程執行，比如 setTimeout 定時器計數結束，ajax 等異步請求成功并觸發回調函數，或者用戶觸發點擊事件時，該線程會將整裝待發的事件依次加入到任務隊列的尾部，等待 JS 引擎線程的執行。

瀏覽器內核得到報文后會進行以下的步驟完成頁面的渲染

• 解析HTML得到Dom Tree
• 解析Css 得到Css Tree
• 合并Dom Tree和Css Tree生成Render Tree
• layout(布局) 計算每個元素的大小和位置,將元素布局到頁面正確的位置
• paint(繪制) 繪制頁面的像素信息,填充具體的樣式
• GPU將合成后的結果顯示到頁面
  

七、構建Dom樹的過程

構建Dom是編碼和解碼的過程,主要經過一下幾個環節

• 編碼: 將html原始字節內容轉換為指定的編碼內容
• 令牌化: 每一個標簽都是一個令牌,內部保存自己的規則,令牌記錄了標簽的開始和結束,這也是判斷標簽有沒有子節點的依據
• 生成對象:每一個令牌都會生成具有屬性的對象,該對象保存該節點所攜帶的信息
• 構建完成 : 形成多個對象組成的樹形結構

注: CssTree的構建過程同理
DomTree和CssTree最終合并為RenderTree,此時瀏覽器可以進行渲染

八、layout和paint

根據渲染樹中的每一個節點位置,尺寸信息,將節點渲染到執行的位置

根據渲染樹中節點的樣式信息,為每一個節點分配樣式

九、回流和重繪

回流: 當元素的位置,大小,結構等信息發生變化時,會構建渲染樹,此過程稱為回流。

重繪: 當元素外觀視覺發生變化時,只需要使用新的樣式覆蓋這個元素,此過程稱為重繪。

回流必定引起重繪,重繪不一定引起回流。

總結

以上是生活随笔為你收集整理的URL解析过程和浏览器渲染机制【面试必问、深入解析 下一次再也不怕面试官问这个问题】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。