web效能優化 瀏覽器渲染原理

2022-07-22 10:42:13 字數 1221 閱讀 4009

在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定義的...