Udacity課程:瀏覽器渲染優化個人筆記
第一課:渲染流程

前言

了解瀏覽器渲染的管道(Browser Rendering pipeline),以解決渲染效能的議題(Rendering Performance Issue)。

效能的議題之一:Juddering

顫抖(Juddering),想像畫面上有個按鈕或圖片持續的抖動~~。課:juddering

造成 juddering 的原因,先了解瀏覽器會以每秒 60 次的頻率更新螢幕上的 frame(影格),又稱 1 秒 60Hz 或 60fps ( 1 秒又是 1000 毫秒,所以 1 個 frame 在畫面上大約只停留了 16ms (1000 / 60 = 16.66ms)) 課:frames
若瀏覽器無法達成每秒 60 Hz,使用者就會感受到有東西在抖動(juddering),如果是圖片就會產生像殘影的東西。

產生一個 frame 的流程

  • 使用者在瀏覽器向網站的某服務發一個request
  • 瀏覽器上收到一個傳回來的 HTML 文件
  • 瀏覽器解析這份文件(parse HTML tag)形成 DOM
  • 把 DOM 與 CSS 結合形成 Render Tree
    • 它與DOM相似,但少了一些東西,例如少了head, script標籤
    • css裡定義的像 :before, :after 的屬性,在這階段被加入
    • css中 display: none,在這個階段被移除
  • 進到 layout 階段,到目前為止的 render tree 只實作出一個 frame 的渲染規則(rendering rules),例如哪個css屬性要影響哪個 html element
    延續剛剛得到的 render tree layout > paint > composite
  • 瀏覽器用 render tree 去計算 layout,也就是每一個元件能在螢幕上佔的空間
    • layout 可以想像是個層層包覆的箱子
    • 父層元件會影響子元件的layout,例如width, height,並會層層影響下去
  • 進到 painting 階段,目前 layout 是單純的 vector,還不是螢幕上看到的樣子,這個階段會將 vector 轉換成 Raster (點陣圖)
    • rasterizer 像個點陣圖處理器,負責將 draw call 的事件一步一步填入layout中
    • 其中有個事件叫 drawBitmap 它是瀏覽器將準備好圖檔 JPEG 解碼進記憶體中
    • 這種做法將圖檔依據不同的瀏覽裝置做不同的size或其他效果
      上述階段已經完成一個 surface,也就是一個圖層(layer),但一個畫面有時會有很多個圖層
  • 進到 composite 階段,因為瀏覽器能夠 paint 多個塗層(layer), 所以在這個階段會將這些圖層合成

影響畫面渲染過程

相同的筆記整理
參考PJ教學
課:Layout and Paint
這裡提到渲染管道(Rendering pipeline),是指在一個動態網頁,當調整某些css屬性時對渲染流程的影響。搭配前一段產生一個frame的流程

常見的三種重新渲染 frame 的方式

第一種
更新畫面上的元件,像是調整 width, height, position, display。它的 pipeline 會經過 Javascript > Style > layout > Paint > Composite

第二種
更新繪圖相關的屬性,例如改變 background-image, color, text-color, shadow。它的 pipeline 會經過 Javascript > Style > 略過layout > Paint > Composite

第三種
更新圖層相關的屬性,例如改變layer的順序它的 pipeline 會經過 Javascript > Style > 略過layout > 略過Paint > Composite

觀察上述的三種路徑,可以發現無論何種變化都會經過 Style ,不同 style 影響到管線的選擇,並影響到 web 的渲染效能。

這裡有個 css 屬性與受影響的 rendering pipeline 對照表
https://csstriggers.com/background-color


#瀏覽器 #frame #css屬性 #juddering #DOM #Render Tree #rendering pipeline







Related Posts

上線個人頁面到Netlify+啟動Netlify CMS

上線個人頁面到Netlify+啟動Netlify CMS

[ 筆記 ] JavaScript 進階 09 - What is 「this」?

[ 筆記 ] JavaScript 進階 09 - What is 「this」?

揭開 Command Line 的神秘面紗

揭開 Command Line 的神秘面紗


Comments