Critical Render Path
讀取 html => 產生 DOM Tree => 產生 CSSOM Tree => 產生 Render Tree => Layout => Paint => Compositing
Layout做的事情
依照樣式表與元素的可視與否，計算每個元素的尺寸、位置
Paint做的事情
繪製每個Layout的文字、顏色、圖片、透明度、transform。也就是把Layout轉為實際視覺上的結果。
Compositing做的事情
將所有的Layout組合起來
Reflow是什麼意思
當我們改變了元素的位置、大小、可視性，會需要重新回到 Critical Render Path 的 Layout 步驟，重新計算所有元素，這個耗費的資源的行為叫做 Reflow。
Repaint
當我們改變了字色、圖片路徑、透明度、transform…等等，因不會影響到元素的真正位置與大小，我們僅需要重新繪製畫面即可，這個行為叫做 Repaint。