步驟拆分

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

詳細(xì)回答

一、緩存

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

緩存分為強緩存和協(xié)商緩存

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

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

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

二、DNS解析

DNS的解析過程是域名轉(zhuǎn)換為真實IP地址的過程。

一個域名對應(yīng)一個IP地址,一個IP地址可以對應(yīng)多個域名。

優(yōu)先從本機hosts文件中查找是否有和這個網(wǎng)站和IP地址映射關(guān)系,有則直接直接使用這個IP地址,完整解析。

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

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

三、TCP連接

http的本質(zhì)就是TCP連接,此時要進行三次握手。

第一次握手：建立連接時，客戶端發(fā)送syn包（syn=j）到服務(wù)器，并進入SYN_SENT狀態(tài)，等待服務(wù)器確認(rèn)。

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

客戶端收到服務(wù)器的SYN+ACK包，向服務(wù)器發(fā)送確認(rèn)包ACK(ack=k+1），此包發(fā)送完畢，客戶端和服務(wù)器進入ESTABLISHED（TCP連接成功）狀態(tài)，完成三次握手。

該過程完成后,服務(wù)端開始像客戶端傳輸數(shù)據(jù)。

四、服務(wù)端驗證請求

服務(wù)端收到請求會對請求進行統(tǒng)一的驗證,如安全攔截,跨域驗證等。

根據(jù)請求類型做出處理,返回對應(yīng)的響應(yīng)白報文。

五、響應(yīng)文件類型

服務(wù)端會根據(jù)Content-Type 來判斷響應(yīng)文件類型

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

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

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

六、瀏覽器的線程和進程

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

瀏覽器內(nèi)核的線程分為以下幾種

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

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

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

七、構(gòu)建Dom樹的過程

構(gòu)建Dom是編碼和解碼的過程,主要經(jīng)過一下幾個環(huán)節(jié)

• 編碼: 將html原始字節(jié)內(nèi)容轉(zhuǎn)換為指定的編碼內(nèi)容
• 令牌化: 每一個標(biāo)簽都是一個令牌,內(nèi)部保存自己的規(guī)則,令牌記錄了標(biāo)簽的開始和結(jié)束,這也是判斷標(biāo)簽有沒有子節(jié)點的依據(jù)
• 生成對象:每一個令牌都會生成具有屬性的對象,該對象保存該節(jié)點所攜帶的信息
• 構(gòu)建完成 : 形成多個對象組成的樹形結(jié)構(gòu)

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

八、layout和paint

根據(jù)渲染樹中的每一個節(jié)點位置,尺寸信息,將節(jié)點渲染到執(zhí)行的位置

根據(jù)渲染樹中節(jié)點的樣式信息,為每一個節(jié)點分配樣式

九、回流和重繪

回流: 當(dāng)元素的位置,大小,結(jié)構(gòu)等信息發(fā)生變化時,會構(gòu)建渲染樹,此過程稱為回流。

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。