transform 屬于合成屬性(composite property),對合成屬性進行 transition/animation 動畫將會創(chuàng)建一個合成層(composite layer),這使得被動畫元素在一個獨立的層中進行動畫。通常情況下,瀏覽器會將一個層的內容先繪制進一個位圖中,然后再作為紋理(texture)上傳到 GPU,只要該層的內容不發(fā)生改變,就沒必要進行重繪(repaint),瀏覽器會通過重新復合(recomposite)來形成一個新的幀。
top/left屬于布局屬性,該屬性的變化會導致重排(reflow/relayout),所謂重排即指對這些節(jié)點以及受這些節(jié)點影響的其它節(jié)點,進行CSS計算->布局->重繪過程,瀏覽器需要為整個層進行重繪并重新上傳到 GPU,造成了極大的性能開銷。