十五張圖帶你完全搞懂從URL到頁面展現發生的故事

關注公衆號「 執鳶者」，獲取大量教學視頻並進入 專業交流羣。

某一天小林去面試，面試官說問你一道經典面試題吧，從「 輸入一個URL到頁面展現中間發生了什麼？」，小林一聽激動了，內心暗自高興說這道題我背過呀，而後嘩啦嘩啦開啓了背書模式。背完以後面試官不是很滿意，思路並非很清晰呀！！！（純屬我的杜撰的小故事，切勿當真。）

下面就讓咱們來嘮一嘮這個小問題，有不許確的地方還望各位大佬指正。對於這個問題將從瀏覽器包含的進程着手，而後用用一張圖來展現總體流程，最後分別從導航階段和渲染階段兩個方面詳細闡述從輸入一個URL到頁面展現中間發生的過程。

1、瀏覽器進程

在聊上述話題以前要意識到目前瀏覽器處在多進程時代，包含 瀏覽器進程、渲染進程、GPU進程、網絡進程、插件進程

2、總體流程

用一張圖來表示整個流程，整個流程包含 導航階段和 渲染階段兩大部分，其中每一個具體細節所須要的進程以下圖所示。

3、導航階段

導航階段主要包含 用戶輸入、URL請求、準備渲染進程、提交文檔四個部分

3.1 用戶輸入

3.2 URL請求過程

3.3 準備渲染進程

3.4 提交文檔

4、渲染階段

當文檔數據傳輸完成後將進入渲染階段，渲染階段主要包含 構建DOM樹、樣式計算、佈局階段、分層、圖層繪製、分塊、柵格化操做、合成和顯示。其整個渲染階段流程以下圖所示。

4.1 構建DOM樹

4.2 樣式計算

4.3 佈局階段

4.4 分層

4.5 圖層繪製

4.6 分塊

4.7 柵格化操做

4.8 合成和顯示

參考內容 瀏覽器工做原理與實踐_李兵

相關章節
圖解23種設計模式
40張圖入門Linux

歡迎你們關注公衆號(回覆「操做系統」獲取本節的思惟導圖,回覆「書籍」獲取大量前端學習資料,回覆「前端視頻」獲取大量前端教學視頻)