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