瀏覽器運行機制總結
前言
一庸蔼、從進程的角度簡單了解一下瀏覽器
1.多進程的瀏覽器
2.了解多進程
3.總結
二皆刺、從輸入url到瀏覽器到頁面的過程
1.瀏覽器進程對URL進行初步的處理
2.網(wǎng)絡進程接收到URL進行處理
3.進行網(wǎng)絡請求
4.瀏覽器進程進行預渲染工作
5.渲染進程進行工作
三憋活、渲染引擎的工作原理
1.主要模塊介紹
2.工作流程
四、參考文章如下（不分先后）
前言
本篇文章主要是為幫助于前端開發(fā)者了解開發(fā)之外又與開發(fā)息息相關的知識仍秤。
這里所講的瀏覽器多指chromium瀏覽器，其實其他瀏覽器也大致相同诗力。
筆者的幾句話：本人也是個剛從事前端3年的菜鳥凰浮，文中有任何錯誤不對的地方望大佬海涵，如能指點一番苇本，更是不甚感激。
文中大多內(nèi)容都是我參考了很多文章瓣窄，以及問了業(yè)界相關的一些大佬整合下來的笛厦，其中會引用一些個人認為比較比較好以及易于前端開發(fā)者理解的部分，并且我會盡量把所有的文章放至底部一并供大家參考康栈。
一递递、從進程的角度簡單了解一下瀏覽器
在講結構之前，還有一些必須要了解的知識登舞。
現(xiàn)代瀏覽器很多都支持多進程模型悬荣，這個模型能有效的預防瀏覽器的其中一個頁面崩潰而不影響其他頁面，同時也很復雜氯迂，也加大了資源的消耗，你可以嘗試運行下方代碼在當前頁面的控制臺禁灼，就可以看出當前頁面崩潰而不會影響其他頁面轿曙。
for(leti=0;i<10;i--){console.log('123456789')}
那么既然是多進程模型，那么哪幾個進程呢导帝，我在下方列舉這5個主要的進程，本文也是根據(jù)這5個進程一步步進行講解
瀏覽器進程
負責瀏覽器界面的顯示斋荞，各個頁面的管理虐秦，其他各種進程的管理
GPU進程
最多只有一個，當且僅當GPU硬件加速打開的時候才會被創(chuàng)建悦陋，主要用于對3D加速調(diào)用的實現(xiàn)
網(wǎng)絡進程
負責頁面的網(wǎng)絡資源加載，很多文章寫的都是不存在這個進程的柳刮，我還有點迷惑痒钝，其實是網(wǎng)絡這一塊之前是瀏覽器主進程負責的，后來獨立了出來送矩。
渲染進程
這里下面要重點講，與我們開發(fā)息息相關的運行在沙箱的進程栋荸，它主要負責HTML解析，CSS解析爱沟，布局，和javascript的支持身冀。上面所講的死循環(huán)導致的進程崩潰也就是這個進程崩潰掉了括享。
插件進程
每種類型的插件對應一個進程，僅當使用該插件時才創(chuàng)建铃辖。
通常情況下打開2個頁面會有5個進程，分別是：瀏覽器主進程隙咸、GPU進程成洗、網(wǎng)絡進程和2個渲染進程，也會有一些其他情況存在瓶殃。
如果頁面中有插件遥椿，插件也需要一個單獨的進程。
如果頁面中有 iframe冠场，iframe 也會運行在單獨的進程中。
如果你裝了擴展钢悲，擴展也會占用進程舔株。
如果兩個頁面屬于同一個站點，并且 B 頁面是從 A 頁面中打開的载慈，那么他們會共用一個渲染進程。
看到這里辞做，你應該對瀏覽器運行的機制有了一個大概了解，最起碼你應該知道了為什么頁面崩潰不會導致整個瀏覽器崩潰的原因稚补，以及與我們開發(fā)息息相關的html嫂伞，css拯钻，js是由哪一部分去解析執(zhí)行的。
二粪般、從輸入url到瀏覽器到頁面的過程
用戶輸入URL確認后，瀏覽器進程會檢查輸入內(nèi)容是否符合URL規(guī)則匙监，不符合會將輸入內(nèi)容當成搜索內(nèi)容拼接到瀏覽器的默認搜索引擎小作，符合URL規(guī)則將通過進程間通信（IPC）將請求發(fā)送給網(wǎng)絡進程，此時導航欄會處于onbeforeunload狀態(tài)(加載狀態(tài))达罗，頁面還未重載静秆，這是因為要等渲染進程向瀏覽器進程進行確認，瀏覽器才會更新頁面抚笔。
網(wǎng)絡進程拿到URL后首先會查看是否有緩存內(nèi)容，如果有且沒有過期辐宾，會直接返回緩存內(nèi)容膨蛮，緩存的時間很短，也和瀏覽器的設置有關吊洼。
如果沒有緩存制肮，網(wǎng)絡進程會進行DNS解析递沪，意思就是要找到我們要訪問的IP综液，這是一個遞歸的過程，會從下方這幾個地方進行查找直到找到為至檩奠。
首先會從瀏覽器的DNS緩存種查找是否有我們要訪問的IP
系統(tǒng)自身的DNS緩存
嘗試讀取hosts文件
如果在hosts文件中也沒有找到對應的條目附帽，瀏覽器就會發(fā)起一個DNS的系統(tǒng)調(diào)用，就會向本地配置的首選DNS服務器（一般是電信運營商提供的蕉扮，也可以使用像Google提供的DNS服務器）發(fā)起域名解析請求。
運營商的DNS服務器首先查找自身的緩存屁使，找到對應的條目奔则，且沒有過期，則解析成功酬蹋。如果沒有找到對應的條目疾呻，則有運營商的DNS代我們進行這個類似的遞歸操作，直到找到為止岸蜗。
這里比較復雜，很多文章會講述關于TCP三次握手四次揮手以及向下傳輸來回的過程年缎，這里實際上與瀏覽器的機制關系不大了铃慷，所以我這里就不去細講了，就把大概的流程放到下面洲鸠，感興趣的朋友可以去專門學習下。
進入TCP隊列扒腕，同一個域名同時最多只能建立 6 個TCP 連接，如果在同一個域名下同時有 10 個請求發(fā)生皆的，那么其中 4 個請求會進入排隊等待狀態(tài)
創(chuàng)建 TCP 連接（三次握手）
如果是HTTPS請求會建立 TLS 連接（client hello, server hello, pre-master key 生成『對話密鑰』）蹋盆；
發(fā)送 HTTP 請求（請求行[方法、URL楞抡、協(xié)議]岩灭、請求頭 Cookie 等赂鲤、請求體 POST）
接受請求（響應行[協(xié)議、狀態(tài)碼找爱、狀態(tài)消息]泡孩、響應頭、響應體等）
如果狀態(tài)碼是301或302仑鸥，根據(jù)響應頭中的 Location 重定向
狀態(tài)碼 200，根據(jù)響應頭中的 Content-Type 決定如何響應并交給相應的進程意狠，如下載文件交給下載管理器疮胖，加載資源、渲染 HTML將通知瀏覽器進程進行預渲染工作院塞。
瀏覽器進程會根據(jù)數(shù)據(jù)判斷是否同一站點（相同的協(xié)議和根域名）性昭，決定是否重新創(chuàng)建新的進程，如果是同一站點就會復用同一站點的渲染進程汹族。
如果不是同一站點，瀏覽器進程會向渲染進程發(fā)送提交文檔消息鞠抑，渲染進程收到提交文檔消息后，與網(wǎng)絡進程建立傳輸數(shù)據(jù)管道秒梳，渲染進程接收數(shù)據(jù)完畢后會象瀏覽器進程提交確認提交的消息箕速。瀏覽器接收確認提交消息后，會移除舊文檔兴垦、更新界面字柠、地址欄，導航歷史狀態(tài)等钦幔，這個時候?qū)Ш綑谟袀€小動作很有意思常柄，就是loading本來是順時針旋轉(zhuǎn)的，在這之后會變成逆時針旋轉(zhuǎn)西潘，同時這也代表了渲染進程進行工作了。
渲染引擎渲染文檔完成后向至瀏覽器進程提交相种，這是一個非常重要且復雜的部分东抹，在第三部分>渲染引擎的工作原理重點講了渲染進程接收到文檔后是如何進行工作的。
三食茎、渲染引擎的工作原理
渲染引擎主要有這么幾個模塊馏谨，HTML解析器，css解析器哎媚，js引擎，布局模塊和繪圖模塊拨与，這里大致介紹一下每個模塊負責的內(nèi)容买喧。
HTML解析主要負責解析將文檔解析為dom樹
css解析器主要負責將css內(nèi)容解析為瀏覽器能夠識別的css sheets
js引擎就是解析執(zhí)行js內(nèi)容
布局模塊結算每個元素、節(jié)點的位置大小等信息
繪圖模塊拿到計算好的數(shù)據(jù)繪制頁面
渲染引擎工作是從上至下的逐行解析淤毛，首先由HTML解析器進行解析整個文檔逐步生成dom樹和render樹低淡，其中遇到外部的將會調(diào)用css解析器構建css樹，js同理（沒有樹）蔗蹋。但是如果行內(nèi)css則直接解析纸颜，一般情況下解析工作是非阻塞的绎橘，除非遇到js，js的執(zhí)行與下載均會造成html解析的阻塞称鳞，但css不會，css只會阻塞渲染而不影響解析狂票，css解析器和js引擎是互斥的熙暴，他們不會同步進行。
生成完render樹之后交于布局模塊進行計算各個元素掂器，節(jié)點的位置大小等信息俱箱，后繪圖模塊進行繪制渲染到頁面。
通常這個流程是重復執(zhí)行的乃摹，因為在實際應用過程中會產(chǎn)生交互或其他原因?qū)е马撁娴闹乩L與回流。
四孵睬、參考文章如下（不分先后）
理解WebKit和Chromium: Chromium多進程模型
進程、線程與頁面渲染的關系
從輸入URL到頁面加載發(fā)生了什么
HTTP響應頭和請求頭信息對照表
html的解析流程
DOM荚恶、DOM樹和DOM的其他幾個概念
Render樹與CSS解析
