web性能優化-瀏覽器渲染原理

在web性能優化-瀏覽器工做原理中講到，瀏覽器渲染是在renderer process中完成的。

那咱們來看下renderer process究竟幹了什麼？

Renderer Process包含的線程有：

1.主線程 main thread

2. 工做線程 workder thread

3. 合成器線程 compositor thread

4. 光柵線程 raster thread

渲染進程的流程

構建DOM

　　當渲染進程接受到導航的確認信息後，開始接受html數據，main thread 會解析文本字符串爲DOM。

　　渲染HTML爲DOM的方法，由HTML standard定義

加載次級資源

　　網頁中經常包含圖片，css, js等額外的資源，這些資源須要從網絡或者cache中獲取。

　　Main thread會在構建DOM的過程當中逐一請求他們。爲了加速preloa scanner會同事運行，入股偶在HTML中<img><link>等標籤，preload scanner會把這些請求傳遞給Browser process中network thread進行相關資源的下載

JS的下載和執行

　　當遇到<script>標籤時，renderer process會中止解析，而去加載，解析和執行js代碼，阻塞渲染。不過有不少方法能夠防止阻塞，這裏不介紹了

樣式的計算

　　僅僅渲染DOM還不足獲知頁面的具體樣式，main thread還會基於css選擇器解析CSS獲取每個節點的最終的計算樣式。

獲取佈局

　　想要渲染一個完整的頁面，除了獲知每一個節點的具體樣式，還須要獲取每一個節點在頁面上的位置，佈局其實就是找到全部遠的的幾何歡喜的過程。

繪製各元素

　　即便知道了DOM和CSSDOM，咱們還須要知道不一樣元素的繪製前後順序。在繪製階段，主線程會遍歷lauout tree建立繪製記錄。

合成幀（合成幀不是很懂，將就看）

　　main thread會遍歷layout tree來建立層樹layer tree，添加will-change css屬性的元素，會被當作單獨的一個層

　　一旦層樹被建立，渲染順序被肯定，主線程會把這些消息通知給合成器線程。合成器線程會柵格化每個層

　　柵格線程會柵格化每個磁鐵並存儲在GPU顯存中

　　一旦磁鐵被光柵化，合成器線程會建立合成幀

　　合成幀後會經過IPC消息傳遞給browser process，這些合成幀會被傳遞給GPU process，而後顯示在屏幕上。

　　若是發生滾動，合成器線程會建立另一個合成幀發送GPU。

那咱們能夠從如下幾個方面去優化：

• 順序執行，併發加載
• 是否阻塞
• 依賴關係
• 依賴方式
• 重繪和重流

這些在以後的文章中會作詳細的講解

本文參照：https://developers.google.com/web/updates/2018/09/inside-browser-part3