在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中獲取。
當遇到標籤時，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。
那我們可以從以下幾個方面去優化：
這些在之後的文章中會做詳細的講解
本文參照：
web效能優化 瀏覽器工作原理
要徹底了解web效能優化的問題，得搞清楚瀏覽器的工作原理。我們需要了解，你在瀏覽器位址列中輸入url到頁面展示的短短幾秒中，瀏覽器究竟做了什麼，才能了解到為什麼我們口中所說的優化方案能夠起到優化作用。瀏覽器的多程序架構 以下的例子都是以chrome為例 chrome由多個程序組成，每個程序都有自己的...
瀏覽器渲染機制與效能優化
詳讀了很多文章，最終對比總結出來的瀏覽器渲染機制，並提出相應的優化原則 瀏覽器將從伺服器中獲取的html文件逐步解析，構建dom樹 在構建dom樹時，如果碰到js和css，會載入執行並阻塞html的解析，即html解析器會將控制權交給js或css解析器，當這個元素被解析完之後，將控制權重交回給htm...
瀏覽器渲染原理
最近在開發b s 框架的專案。開發都是web頁面，也就是執行在瀏覽器上的使用者操作頁面。瀏覽器是使用者得到服務最直接的地方，後台做的好，前台也要讓使用者用著方便。這裡就研究一下瀏覽器的一些原理是如何提高使用者體驗的。首先，這裡有乙個新詞，渲染。什麼是網頁渲染呢？網頁渲染就是html 根據css定義的...