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
