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