最近在研究效能研究到快爆炸了，剛剛看了一篇關於開合動畫的文章讓我好震驚：

指定寬高的寫法是最差的寫法！！！

1
2
3
4
5
6
7
8
9
10
11
.menu {
  overflow: hidden;
  width: 350px;
  height: 600px;
  transition: width 600ms ease-out, height 600ms ease-out;
}
.menu--collapsed {
  width: 200px;
  height: 60px;
}

原來指定width跟height的作法會讓畫面在每個 frame 重算 layout 跟重畫(paint)結果！！


要讓效能好，要避開重算 layout & paint ，只做 composite，而會觸發 composite 的屬性只有 opacity & transform，其他屬性都會動到兩項之一，通通NG～

看來我的學習還不夠，前端之路還很漫長啊…

參考資料