will-change dan Promosi Lapisan

will-change memberikan petunjuk kepada pelayar bahawa sesuatu elemen akan dianimasikan, lalu membolehkannya menyediakan pengoptimuman lebih awal — seperti menaik taraf elemen itu ke lapisan penggubah GPU tersendiri sebelum animasi bermula.

Tentukan sifat yang akan berubah: will-change: transform, will-change: opacity, will-change: transform, opacity. Gunakan will-change: auto untuk membuang petunjuk apabila animasi berakhir.

Gunakan will-change hanya pada elemen yang benar-benar akan dianimasikan dan hanya sepanjang tempoh animasi. Menambah dan membuangnya dengan JavaScript (melalui kelas) lebih cekap daripada membiarkannya secara kekal pada elemen statik.

Setiap lapisan yang dinaik taraf menggunakan memori GPU. Menaik taraf banyak elemen secara serentak menyebabkan tekanan memori, yang boleh merosotkan prestasi — terutamanya pada peranti mudah alih dengan RAM GPU yang terhad. Naik taraf lapisan secara berhemat dan sengaja.

Jangan sekali-kali gunakan will-change pada * atau pada sejumlah besar elemen. Kos pengoptimuman melebihi manfaatnya apabila terlalu banyak lapisan dicipta. Buat profil terlebih dahulu; tambah will-change hanya apabila masalah tersentak yang khusus telah disahkan.

Sebelum will-change, pembangun menggunakan transform: translateZ(0) atau translate3d(0,0,0) untuk memaksa penaikan taraf GPU. will-change ialah pendekatan semantik yang betul. Helah translateZ masih berfungsi, tetapi ia merupakan butiran pelaksanaan, bukan ungkapan niat.

Lapisan yang dinaik taraf mencipta konteks susunan baharu. Hal ini mempengaruhi kelakuan indeks-z — anak bagi elemen yang dinaik taraf disusun relatif kepada elemen itu, bukannya punca dokumen. Beri perhatian kepada perubahan konteks susunan apabila menaik taraf elemen.

Tambah will-change pada mouseenter atau pada permulaan animasi, dan buangnya pada mouseleave atau apabila animasi berakhir. Dengan cara ini, pelayar mempunyai masa untuk membuat persediaan tanpa menggunakan memori GPU secara kekal untuk elemen yang tidak aktif.

Chrome DevTools → panel Lapisan memvisualisasikan lapisan yang dinaik taraf. Bilangan lapisan yang tinggi (beratus-ratus) menunjukkan penaikan taraf berlebihan. Bahagian Memori menunjukkan penggunaan memori GPU. Pastikan bilangan lapisan yang dinaik taraf minimum dan pantau pada profil peranti kelas rendah.

CSS contain: layout paint mengehadkan pengiraan susun atur dan pengecatan kepada subpepohon, serupa dengan pengasingan. Sifat ini meningkatkan prestasi widget yang serba lengkap tanpa mencipta lapisan GPU — pengoptimuman yang lebih murah daripada will-change untuk elemen yang tidak dianimasikan.

will-change disokong sepenuhnya dalam semua pelayar moden. Pelayar menganggapnya sebagai petunjuk, bukan arahan — mereka mungkin mengabaikannya jika sumber terhad. Jangan bergantung padanya sebagai jaminan; gunakan hanya sebagai petunjuk panduan prestasi.

will-change menaik taraf elemen kepada lapisan penggubah GPU sebelum animasi bermula, lalu menghapuskan kos penaikan taraf pada permulaan animasi. Gunakannya secara dinamik dan berhemat — hanya apabila profil menunjukkan masalah tersentak — untuk mengelakkan penggunaan memori GPU yang berlebihan akibat penaikan taraf berlebihan.