Prestasi: Sifat Boleh Diubah Berbanding Sifat Dicat Semula

Pelayar memaparkan kandungan dalam tiga peringkat: Susun Atur (saiz + kedudukan) → Pengecatan (piksel) → Penggabungan (penggabungan lapisan GPU). Menganimasikan sifat yang mencetuskan peringkat lebih awal memerlukan banyak sumber.

Perubahan pada sifat ini memaksa pelayar mengira semula susun atur, mungkin untuk seluruh halaman. Elakkan daripada menganimasikannya:

• width, height
• margin, padding
• top, left
• font-size
• display

Sifat ini melangkaui susun atur tetapi mengecat semula piksel. Kosnya sederhana:

• background-color
• color
• box-shadow
• border

Sifat ini melangkaui susun atur dan pengecatan — pelayar hanya perlu menggabungkan lapisan yang telah diraster. Kosnya sangat rendah dan dipercepatkan oleh GPU:

• transform
• opacity

Untuk animasi 60 bingkai sesaat yang lancar, animasikan hanya transform dan opacity. Gunakan transform: translate() dan bukannya top/left, serta opacity dan bukannya pudar melalui display.

will-change memberitahu pelayar supaya menaikkan elemen ke lapisan GPU tersendiri sebelum animasi bermula, sekali gus mengelakkan "kelipan penaikan" di tengah-tengah animasi.

Tetapkan will-change: auto atau buang sifat itu sepenuhnya selepas animasi selesai. Mengekalkan terlalu banyak elemen yang dinaikkan akan membazirkan memori GPU.

Gunakan tab Performance dalam Chrome DevTools untuk merakam dan memeriksa pemasaan bingkai. Tab Rendering boleh mengaktifkan kelipan pengecatan (lapisan hijau) untuk menunjukkan elemen yang dicat semula pada setiap bingkai.

Pengoptimuman yang paling ketara: gantikan animasi kedudukan dengan transform:

Peralihan warna latar belakang mencetuskan pengecatan semula tetapi bukan susun atur. Peralihan ini sesuai untuk elemen kecil. Untuk latar belakang yang besar, pertimbangkan penggunaan elemen pseudo dengan peralihan kelegapan:

Sifat contain memberikan petunjuk kepada pelayar bahawa sesuatu elemen dan pepohon bawahannya adalah bebas. Ini mengehadkan skop pembatalan susun atur dan meningkatkan prestasi pengecatan semula.

Menganimasikan sifat susun atur (width, top, margin) mencetuskan pengiraan semula yang mahal. Sifat pengecatan (color, background) lebih murah. Hanya transform dan opacity dianimasikan pada peringkat penggabungan GPU tanpa mencetuskan susun atur atau pengecatan. Sentiasa utamakan sifat ini untuk animasi yang lancar dan berprestasi tinggi.