Chrome中主要的進(jìn)程有四個(gè)：
瀏覽器進(jìn)程 (Browser Process)：負(fù)責(zé)瀏覽器的TAB的前進(jìn)、后退、地址欄、書簽欄的工作和處理瀏覽器的一些不可見的底層操作，比如網(wǎng)絡(luò)請(qǐng)求和文件訪問。
渲染進(jìn)程 (Renderer Process)：負(fù)責(zé)一個(gè)Tab內(nèi)的顯示相關(guān)的工作，也稱渲染引擎。
插件進(jìn)程 (Plugin Process)：負(fù)責(zé)控制網(wǎng)頁(yè)使用到的插件
GPU進(jìn)程 (GPU Process)：負(fù)責(zé)處理整個(gè)應(yīng)用程序的GPU任務(wù)
由于進(jìn)程與進(jìn)程之間內(nèi)存空間獨(dú)立，所以需要進(jìn)程之間的通信需要使用新的方式——IPC通信
4個(gè)進(jìn)程之間的關(guān)系：
當(dāng)我們要瀏覽一個(gè)網(wǎng)頁(yè)時(shí)，輸入U(xiǎn)RL，瀏覽器進(jìn)程向URL發(fā)送請(qǐng)求，獲取到HTML內(nèi)容后將其交給渲染進(jìn)程，渲染進(jìn)程解析HTML內(nèi)容，解析中遇到新的網(wǎng)絡(luò)資源再返回給瀏覽器進(jìn)程加載，同時(shí)告知瀏覽器進(jìn)程需要通知插件進(jìn)程加載插件。解析完成后，渲染進(jìn)程計(jì)算得到圖像幀，將圖像幀交給GUP進(jìn)程，GUP進(jìn)程將圖像顯示出來(lái)。
多進(jìn)程架構(gòu)的好處：
1.容錯(cuò)性高，渲染引擎容易崩潰，多進(jìn)程的每個(gè)頁(yè)面的渲染引擎互相之間不受影響；
2.安全性高，不同進(jìn)程的權(quán)限不同，并為其提供沙盒運(yùn)行環(huán)境，使其更加安全可靠；
3.響應(yīng)速度快，單進(jìn)程架構(gòu)中各個(gè)任務(wù)互相競(jìng)爭(zhēng)搶奪CPU資源，響應(yīng)速度緩慢，多進(jìn)程架構(gòu)規(guī)避了這一點(diǎn)。
導(dǎo)航過程：
網(wǎng)頁(yè)加載過程：
tab以外的大部分工作都是瀏覽器進(jìn)程負(fù)責(zé)的，分為幾個(gè)不同的工作線程：
UI線程：控制瀏覽器上的按鈕以及輸入框；
網(wǎng)絡(luò)線程：處理網(wǎng)絡(luò)請(qǐng)求，獲取網(wǎng)絡(luò)數(shù)據(jù)；
storage線程：控制文件的訪問；
第一步：處理輸入
在地址欄輸入內(nèi)容按下回車，UI線程會(huì)判斷輸入的內(nèi)容是搜索關(guān)鍵詞還是URL，并作出對(duì)應(yīng)的處理；
第二步：開始導(dǎo)航
UI線程把對(duì)應(yīng)任務(wù)交給網(wǎng)絡(luò)線程，tab前的圖標(biāo)展示為加載中狀態(tài)，網(wǎng)絡(luò)線程進(jìn)行DNS尋址，建立TLS連接等操作進(jìn)行資源請(qǐng)求，如果服務(wù)器301重定向，則告知UI線程進(jìn)行重定向再進(jìn)行新的網(wǎng)絡(luò)請(qǐng)求。
第三步：讀取響應(yīng)
網(wǎng)絡(luò)線程接收到服務(wù)器的響應(yīng)后解析HTTP報(bào)文，根據(jù)響應(yīng)頭中的Content-Type字段來(lái)確定響應(yīng)主體的媒體類型，如果媒體類型是HTML文件，就將相應(yīng)數(shù)據(jù)交給渲染進(jìn)程進(jìn)行接下來(lái)的工作，如果是zip等文件，就會(huì)把數(shù)據(jù)交給下載管理器。（與此同時(shí)，瀏覽器會(huì)進(jìn)行Safe Browsing安全檢查展示警告頁(yè)和CORB檢查確定敏感跨站數(shù)據(jù)不被發(fā)送至渲染進(jìn)程）
第四步：查找渲染進(jìn)程
上面的準(zhǔn)備都完成之后，網(wǎng)絡(luò)線程通知UI線程數(shù)據(jù)已經(jīng)準(zhǔn)備好了，此時(shí)UI線程會(huì)查找到一個(gè)UI進(jìn)程進(jìn)行網(wǎng)頁(yè)渲染。（第二步開始的時(shí)候?yàn)g覽器已經(jīng)預(yù)先查找和啟動(dòng)了一個(gè)渲染進(jìn)程）
第五步：提交導(dǎo)航
到了這一步，數(shù)據(jù)和渲染進(jìn)程都準(zhǔn)備好了，瀏覽器進(jìn)程會(huì)向渲染進(jìn)程發(fā)送IPC消息來(lái)確認(rèn)導(dǎo)航，同時(shí)將準(zhǔn)備好的數(shù)據(jù)發(fā)送給渲染進(jìn)程，渲染進(jìn)程接收到數(shù)據(jù)后，又發(fā)送IPC消息給瀏覽器進(jìn)程，表示導(dǎo)航已經(jīng)提交了，頁(yè)面開始加載。這時(shí)導(dǎo)航欄會(huì)更新，安全提示符更新（小鎖），訪問歷史列表（history tab)更新，即可通過前進(jìn)和后退來(lái)切換該頁(yè)面。
第六步：初始化加載完成
提交導(dǎo)航完成后，渲染進(jìn)程開始記載資源及渲染頁(yè)面，當(dāng)頁(yè)面渲染完成后（頁(yè)面及內(nèi)部的iframe都觸發(fā)了onload事件），回想瀏覽器進(jìn)程發(fā)送IPC消息，此時(shí)UI線程會(huì)停止tab中加載的圖標(biāo)。
網(wǎng)頁(yè)渲染原理：
五個(gè)步驟：
第一步：處理 HTML 并構(gòu)建 DOM 樹。
引擎解析HTML，解析的結(jié)果會(huì)成為一顆DOM樹，這顆DOM樹將會(huì)作為下個(gè)階段渲染樹狀圖的輸入以及成為網(wǎng)頁(yè)和腳本的交互界面（js操作DOM）
當(dāng)解析器到達(dá)script標(biāo)簽時(shí)，發(fā)生下面四件事情：
1.html解析器停止解析,
2.如果是外部腳本，就從外部網(wǎng)絡(luò)獲取腳本代碼
3.將控制權(quán)交給js引擎，執(zhí)行js代碼
4.恢復(fù)html解析器的控制權(quán)
由于<script>標(biāo)簽是阻塞解析的，將腳本放在網(wǎng)頁(yè)尾部會(huì)加速代碼渲染。
defer和async屬性也能有助于加載外部腳本。
defer使得腳本會(huì)在dom完整構(gòu)建之后執(zhí)行；
async標(biāo)簽使得腳本只有在完全available才執(zhí)行，并且是以非阻塞的方式進(jìn)行的
第二步：處理 CSS構(gòu)建 CSSOM 樹。
css樣式表是阻塞的，當(dāng)cssom樹建立好之后才會(huì)進(jìn)行下一步的解析渲染。
通過以下手段可以減輕cssom帶來(lái)的影響：
1.將script腳本放在頁(yè)面底部
2.盡可能快的加載css樣式表
3.將樣式表按照media type和media query區(qū)分，這樣有助于我們將css資源標(biāo)記成非阻塞渲染的資源。
4.非阻塞的資源還是會(huì)被瀏覽器下載，只是優(yōu)先級(jí)較低
第三步：將 DOM 與 CSSOM 合并成一個(gè)渲染樹。
第四步：根據(jù)渲染樹來(lái)布局，計(jì)算每個(gè)節(jié)點(diǎn)的位置。
布局(layout)：定位坐標(biāo)和大小，是否換行，各種position, overflow, z-index屬性
第五步：調(diào)用 GPU 繪制，合成圖層，顯示在屏幕上。
將渲染樹的各個(gè)節(jié)點(diǎn)繪制到屏幕上，這一步被稱為繪制painting
渲染性能優(yōu)化：
Load 和 DOMContentLoaded 區(qū)別：
Load 事件觸發(fā)代表頁(yè)面中的 DOM，CSS，JS，圖片已經(jīng)全部加載完畢。
DOMContentLoaded 事件觸發(fā)代表初始的 HTML 被完全加載和解析，不需要等待 CSS，JS，圖片加載
圖層：
一般來(lái)說，可以把普通文檔流看成一個(gè)圖層。特定的屬性可以生成一個(gè)新的圖層。不同的圖層渲染互不影響，所以對(duì)于某些頻繁需要渲染的建議單獨(dú)生成一個(gè)新圖層，提高性能。但也不能生成過多的圖層，會(huì)引起反作用。
以下幾個(gè)屬性可以生成新圖層：
translate3d、translateZ
will-change
video、iframe
通過動(dòng)畫實(shí)現(xiàn)opacity動(dòng)畫轉(zhuǎn)換
position: fixed
重繪和回流：
重繪是當(dāng)前節(jié)點(diǎn)布局不發(fā)生變化但外觀發(fā)生變化的，比如color的改變就是重繪
回流是布局或者幾何屬性需要改變。
（重繪和回流屬于渲染的一部分，但這兩個(gè)步驟對(duì)于性能影響頗大，
回流必定發(fā)生重繪，重繪不一定引發(fā)回流?；亓鞒杀竞艽?，改變深層次的節(jié)點(diǎn)很可能導(dǎo)致父節(jié)點(diǎn)的一系列回流。）
下面幾個(gè)動(dòng)作會(huì)導(dǎo)致性能：
改變window大?。?/p>
改變字體；
添加或刪除樣式；
文字改變；
定位或者浮動(dòng)；
盒子模型；
參考文獻(xiàn)：
