Properti will-change memungkinkan Anda untuk memberi tahu browser sebelumnya tentang jenis perubahan apa yang kemungkinan Anda buat pada suatu elemen agar memungkinkan browser untuk mengoptimalkan bagaimana elemen tersebut menangani elemen sebelumnya.
Menggunakan will-change, Anda mengizinkan browser untuk mempersiapkan perubahan tertentu yang mungkin terjadi di masa depan, sebelumnya. Hal ini memungkinkannya untuk melakukan optimasi yang tepat untuk membuat halaman lebih cepat ketika perubahan ini terjadi, karena itu menghindari biaya awal yang tidak sepele yang dapat berdampak negatif pada respons halaman. Dengan cara ini, ketika perubahan aktual terjadi, halaman diperbarui secara cepat.
Misalnya, saat menggunakan CSS 3D Transforms untuk memindahkan elemen di sekitar layar, elemen dan isinya mungkin dipromosikan ke “lapisan”, di mana mereka dapat merender secara independen dari sisa halaman dan dikomposisikan nanti. Ini mengisolasi rendering konten sehingga sisa halaman tidak harus dirender ulang jika elemen transformasi adalah satu-satunya hal yang berubah di antara frame, dan sering memberikan manfaat kecepatan yang signifikan.
Namun, pengaturan elemen dalam layer baru adalah operasi yang relatif mahal, yang dapat menunda dimulainya animasi transformasi dengan sepersekian detik.
Untuk menghindari keterlambatan ini saat menggunakan Transformasi CSS dan operasi CSS lainnya, kami telah lama menggunakan translateZ (atau kadang-kadang translate3d) untuk mempromosikan elemen ke lapisan mereka sendiri, sehingga mencapai operasi akselerasi perangkat keras yang berjalan lebih lancar dan lebih cepat tanpa gangguan. Namun, teknik ini – juga dikenal sebagai “Hack translateZ () (atau translate3d ())” – hadir dengan biaya. Paul Lewis telah menulis posting yang sangat informatif tentang hal ini yang harus Anda periksa jika Anda menggunakan teknik ini. will-perubahan ada di sini untuk memungkinkan kami untuk mengoptimalkan animasi kami tanpa harus menggunakan hack ini – atau hack lainnya, dalam hal ini.
Anda dapat menyatakan kepada browser niat Anda untuk mengubah posisi gulir elemen, kontennya, atau satu atau lebih nilai properti CSS-nya dengan menentukan nama properti yang Anda harapkan akan berubah, dipisahkan oleh koma. Sebagian besar properti tidak akan memiliki efek ketika ditentukan, karena agen pengguna tidak melakukan optimasi khusus untuk perubahan di sebagian besar properti. Namun masih aman untuk menentukannya; itu tidak akan berpengaruh.
Jika Anda mengharapkan atau berencana untuk mengubah beberapa nilai / aspek elemen, Anda bisa memberikan daftar nilai yang dipisahkan koma. Daftar nilai yang dipisahkan koma dapat menyertakan kata kunci dan / atau nama properti yang telah ditentukan sebelumnya. (Lihat bagian Contoh di bawah ini.)
Jika nilai non-awal dari properti yang Anda deklarasikan akan membuat konteks penumpukan pada elemen, menentukan bahwa properti di akan-perubahan harus membuat konteks susun pada elemen. Misalnya, mengatur opacity ke nilai apa pun selain 1 menciptakan konteks penumpukan pada elemen. Dengan demikian, pengaturan akan berubah: opacity juga menciptakan konteks penumpukan, bahkan jika opacity saat ini masih sama dengan 1.
Demikian pula, jika nilai non-awal properti akan menyebabkan elemen menghasilkan blok berisi untuk elemen posisi tetap, menentukan bahwa properti di akan mengubah harus menyebabkan elemen menghasilkan blok berisi untuk elemen posisi tetap.
Properti will-change tidak memiliki efek langsung pada elemen yang ditentukan, di luar penciptaan konteks penumpukan dan mengandung blok seperti yang disebutkan sebelumnya – itu hanyalah petunjuk render kepada agen pengguna, yang memungkinkannya mengatur optimasi yang berpotensi mahal untuk jenis perubahan tertentu sebelum perubahan sebenarnya mulai terjadi.
Yang sedang berkata, penting bahwa Anda tahu bahwa properti ini harus digunakan dengan hati-hati. Browser yang berbeda dapat menggunakan informasi dari akan berubah dengan cara yang berbeda, dan bahkan satu browser dapat menggunakannya dengan cara yang berbeda pada waktu yang berbeda. Terlalu sering menggunakannya dapat mengabaikan deklarasi sama sekali. Misalnya, peramban yang mempromosikan elemen ke “lapisan GPU” mereka sendiri ketika mereka akan mengubah: transformasi yang ditentukan mungkin menghindari melakukan itu ketika ada terlalu banyak elemen yang menyatakan bahwa, untuk menghindari melelahkan memori GPU.
Selain itu, perubahan tidak boleh digunakan kecuali jika elemen diketahui atau diperkirakan akan berubah dalam waktu dekat (mis. Dalam sepersekian detik). Setelah tidak diperlukan lagi, harus tidak disetel:
Optimalisasi yang dilakukan browser untuk perubahan yang akan terjadi biasanya mahal dan, seperti yang kami sebutkan sebelumnya, dapat mengambil banyak sumber daya mesin. Perilaku peramban yang biasa untuk optimasi yang dibuatnya adalah menghapus optimisasi ini dan kembali ke perilaku normal sesegera mungkin. Namun, perubahan akan mengesampingkan perilaku ini mempertahankan pengoptimalan lebih lama daripada yang dilakukan browser.
Karena itu, Anda harus selalu ingat untuk menghapus will-change setelah elemen selesai diubah, sehingga browser dapat memulihkan sumber daya apa pun yang diklaim oleh optimasi.