我們在做網頁上的效果時，時常會有更改元素位置的需求，同樣都是 hover 之後往下移動 20px 的話，我們該用 top: 20px 還是 transform: translateY(20px) 來做呢？

先假定這兩種方式都可以達成我們的需求，那麼判斷的基準就是效能了。哪種方式所耗費的效能較低呢？

在這之前我們要先知道瀏覽器的渲染流程：

（圖片來源：dom_performance_reflow_repaint）

拿到從伺服器來的資料後

1. 會開始解析 HTML 的標籤、屬性等，產生 DOM Tree
2. 解析 CSS 並建立 CSSOM Tree
3. 將 DOM 與 CSSOM 組合起來產生 Render Tree
   • 從 DOM Tree 的 root 開始計算可見（visible）元素的樣式
   • 不可見的元素（meta, script, link, display: none）會在 Render Tree 中被省略
   • 將 CSSOM 的樣式套在對應的可見元素上
4. Reflow，計算 layout 上每個可見元素的位置、大小等
   • 當改變的樣式與 layout 有關時（width, position, float），他會重新計算元素而對大範圍的 document 進行重新渲染
5. Repaint，將計算的結果轉換成實際的像素並渲染到螢幕上
   • 當改變的樣式與可見與否（visibility）有關的時候會觸發這個流程（opacity, color, bgc, visibility）

當我們修改了 position top 的數值時，會觸發 Reflow 的行爲而導致 CSS 效能消耗變大。

我們可以用 translateY 來取代直接修改 top，如此一來就不會觸發 Reflow 了。

Day08 X 瀏覽器架構演進史 & 渲染機制
Inside look at modern web browser (part 3)
dom_performance_reflow_repaint
03. [CSS] Reflow 及 Repaint 是什麼？
Browser Rendering