十五張圖帶你徹底搞懂從URL到頁面展示發生的故事

{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"關注公衆號“"},{"type":"text","marks":[{"type":"strong"}],"text":"執鳶者"},{"type":"text","text":"”,獲取大量教學視頻並進入"},{"type":"text","marks":[{"type":"strong"}],"text":"專業交流羣"},{"type":"text","text":"。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/9a/9a3d2734b53d10fd2fd73b6e994d989d.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"某一天小林去面試,面試官說問你一道經典面試題吧,從“"},{"type":"text","marks":[{"type":"strong"}],"text":"輸入一個URL到頁面展示中間發生了什麼?"},{"type":"text","text":"”,小林一聽激動了,心裏暗自高興說這道題我背過呀,然後嘩啦嘩啦開啓了背書模式。背完之後面試官不是很滿意,思路並不是很清晰呀!!!(純屬個人杜撰的小故事,切勿當真。)"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下面就讓我們來嘮一嘮這個小問題,有不準確的地方還望各位大佬指正。對於這個問題將從"},{"type":"text","marks":[{"type":"strong"}],"text":"瀏覽器包含的進程"},{"type":"text","text":"着手,然後用用一張圖來展示"},{"type":"text","marks":[{"type":"strong"}],"text":"整體流程"},{"type":"text","text":",最後分別從"},{"type":"text","marks":[{"type":"strong"}],"text":"導航階段"},{"type":"text","text":"和*"},{"type":"text","marks":[{"type":"italic"}],"text":"渲染階段"},{"type":"text","text":"*兩個方面詳細闡述從輸入一個URL到頁面展示中間發生的過程。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"一、瀏覽器進程"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在聊上述話題之前要意識到目前瀏覽器處在多進程時代,包含"},{"type":"text","marks":[{"type":"strong"}],"text":"瀏覽器進程、渲染進程、GPU進程、網絡進程、插件進程"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/44/44387884a0c31c047befc9968a9301f4.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"二、整體流程"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"用一張圖來表示整個流程,整個流程包含"},{"type":"text","marks":[{"type":"strong"}],"text":"導航階段"},{"type":"text","text":"和*"},{"type":"text","marks":[{"type":"italic"}],"text":"渲染階段"},{"type":"text","text":"*兩大部分,其中每個具體細節所需要的進程如下圖所示。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/d8/d8d1ad3f9dbc87d2c69b6947e96d8c29.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"三、導航階段"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"導航階段主要包含"},{"type":"text","marks":[{"type":"strong"}],"text":"用戶輸入、URL請求、準備渲染進程、提交文檔"},{"type":"text","text":"四個部分"}]}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"3.1 用戶輸入"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/f0/f07472007cdf1b41f1a0a180562ba43c.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"3.2 URL請求過程"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/93/933bf3cc3c47d7d89fc435837e8578d9.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"3.3 準備渲染進程"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c5/c5c701f5b9f28efc1b704d5dc977e270.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"3.4 提交文檔"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/d0/d0b50f1caaccd5201f05eebc1341dbd2.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"四、渲染階段"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當文檔數據傳輸完成後將進入渲染階段,渲染階段主要包含"},{"type":"text","marks":[{"type":"strong"}],"text":"構建DOM樹、樣式計算、佈局階段、分層、圖層繪製、分塊、柵格化操作、合成和顯示"},{"type":"text","text":"。其整個渲染階段流程如下圖所示。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/3a/3a149cee6c8d290765a25e1e3d148225.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.1 構建DOM樹"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/8d/8dcb68ebd1a29ee77c07ecfec360dd1e.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.2 樣式計算"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/ee/eeff62c8a68b4e7c7318941e214447e2.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.3 佈局階段"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/14/1461ba1c4fc0f67e918c6a7c6f3314d9.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.4 分層"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/46/466938417edee4a039a3f957173422dd.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.5 圖層繪製"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/44/445219307b318757cd9a547b5a9fc833.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.6 分塊"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/cc/cc279709012845906cdcb83c25662fe5.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.7 柵格化操作"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/a6/a67b59be2b42cb019acd56d06044a52f.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"4.8 合成和顯示"}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/e0/e01d4d72e790aa5ddee6a8f05e49be09.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"參考內容 "},{"type":"link","attrs":{"href":"https://time.geekbang.org/column/intro/100033601?utmsource=pinpaizhuanqu&utmmedium=geektime&utmcampaign=guanwang&utmterm=guanwang&utm_content=0511","title":""},"content":[{"type":"text","text":"瀏覽器工作原理與實踐_李兵"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相關章節"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://mp.weixin.qq.com/s/GzPqSgna9Fwqal-5Oyg5EA","title":""},"content":[{"type":"text","text":"圖解23種設計模式"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://mp.weixin.qq.com/s/DqWfz3YDQVBODZQizoiwww","title":""},"content":[{"type":"text","text":"40張圖入門Linux"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"歡迎大家關注公衆號(回覆“操作系統”獲取本節的思維導圖,回覆“書籍”獲取大量前端學習資料,回覆“前端視頻”獲取大量前端教學視頻)"}]}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/9a/9a3d2734b53d10fd2fd73b6e994d989d.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章