關注公衆號「執鳶者」，獲取大量教學視頻並進入專業交流羣。前端
某一天小林去面試，面試官說問你一道經典面試題吧，從「輸入一個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張圖入門Linuxspa
歡迎你們關注公衆號(回覆「操做系統」獲取本節的思惟導圖,回覆「書籍」獲取大量前端學習資料,回覆「前端視頻」獲取大量前端教學視頻)操作系統
預覽
本文分享自微信公衆號 - 執鳶者（gh_4918fcc10eab）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。