瀏覽器運行原理（三）

這是我參與8月更文挑戰的第6天，活動詳情查看：8月更文挑戰

渲染進程是如何工做的

渲染進程幾乎負責 Tab 內的全部事情，渲染進程的核心目的在於轉換 HTML CSS JS 爲用戶可交互的 web 頁面。渲染進程中主要包含如下線程：

1. 主線程 Main thread
2. 工做線程 Worker thread
3. 排版線程 Compositor thread
4. 光柵線程 Raster thread

後文咱們將逐步介紹不一樣線程的職責，在此以前咱們先看看渲染的流程

一、構建DOM

當渲染進程接收到導航的確認信息，開始接受HTML數據時，主線程會解析文辦字符串爲DOM。

渲染html爲DOM的方法有HTML Standard定義。

二、加載次級的資源

網頁中經常包含諸如圖片，CSS,JS等額外的資源，這些資源須要從網絡上火車cache中獲取，主進程能夠在構建DOM的過程當中會逐一請求它們，爲了加速preload scanner 會同事運行，若是在html中存在 等標籤，preload scanner會把這些請求傳遞給Browser process中的network thread進行相關資源的下載。

三、JS的下載與執行

當遇到

不過開發者其實也有多種方式來告知瀏覽器如何應對某個資源，好比說若是在script標籤上添加了async或defer等屬性，瀏覽器會異步的加載和執行JS代碼，而不會阻塞渲染。

四、樣式計算

僅僅渲染DOM還不足以獲知頁面的具體樣式，主進程還會基於CSS選擇器解析CSS獲取每一個節點的最終的計算樣式值，即便不提供任何CSS，瀏覽器對每一個元素也會有一個默認的樣式

五、獲取佈局

想要渲染一個完整的頁面，處理獲知每一個節點的具體樣式，還須要獲知每一個節點在頁面上的位置，佈局其實就是找到全部元素的集合關係的過程，其具體過程以下：

經過遍歷DOM及相關元素的計算樣式，主線程會構建出包含每一個元素的座標信息及盒子大小的佈局樹，佈局樹和DOM樹相似，可是其中只包含頁面課件的元素，若是一個元素設置了display：none，這個元素不會出如今佈局樹上，僞元素雖然在DOM樹上不課件，可是在佈局樹上是可見的。

六、回執各元素

即便知道了不一樣元素的位置及樣式信息，咱們還須要知道不一樣元素的回執前後吮吸才能正確繪製出整個頁面，在繪製階段，主線程會遍歷佈局樹以建立繪製記錄，繪製記錄能夠看作是記錄各元素繪製前後前後的筆記。

七、合成幀

熟悉PS等繪圖軟件的同窗確定對圖層這一律念不陌生，現代Chrome其實利用了這一律念來組合不一樣的層。

符合是一種分割頁面爲不一樣的層，並單獨柵格化，隨後組合爲幀的技術，不一樣層的組合由compositor線程（合成器線程）完成

主線程會遍歷佈局樹來建立層樹，添加了'will-change'CSS屬性的元素，會被看做單獨的一層。

你可能會想給每一個元素都添加上'will-change'，不過組合過多的層也許會比在每一幀都柵格化頁面中的某些小部分更慢。

一旦層樹被建立，渲染順序被肯定，主線程會把這些信息通知給合成器線程，合成器線程會柵格化每一層，有的層能夠達到整個頁面的大小，所以，合成器線程將把它們分紅多個磁貼。並將每一個磁貼發送到柵格線程，柵格線程會柵格化每一個磁貼存儲在GPU顯存中

一旦磁貼被光柵化，合成器線程會手機成爲繪製四邊形的磁貼信息以建立合成幀

合成幀隨後會經過IPC消息傳遞給瀏覽器進程，因爲瀏覽器的UI改變或者其餘拓展的渲染進程也能夠添加合成幀，這些合成幀會被傳遞給GPU用以展現在屏幕上，若是滾動發生，合成器線程會建立另外一個合成幀發送給GPU.

合成器的優勢在於，其工做無關主線程，合成器線程不須要等待樣式計算或者JS執行，這就是爲何合成器先關的動畫最流暢，若是，某個動畫設計到佈局或者繪製的調整，就會設計到主線程的重計算，天然會慢不少。