Me-raster ulang lapisan yang digabungkan pada perubahan skala

Chris Harrelson
Chris Harrelson
X GitHub

TL;DR

Mulai Chrome 53, semua konten diraster ulang saat skala transformasinya berubah, jika tidak memiliki properti CSS will-change: transform. Dengan kata lain, will-change: transform berarti "animasi dengan cepat".

Hal ini hanya berlaku untuk skala transformasi yang terjadi melalui manipulasi skrip, dan tidak berlaku untuk animasi CSS atau Animasi Web.

Artinya, situs Anda kemungkinan akan mendapatkan konten yang terlihat lebih baik, tetapi mungkin juga lebih lambat tanpa beberapa perubahan sederhana yang diuraikan di bawah.

Implikasi untuk developer web

Berdasarkan perubahan ini, will-change: transform dapat dianggap sebagai memaksa konten diraster menjadi bitmap tetap, yang kemudian tidak pernah berubah di bawah update transformasi. Hal ini memungkinkan developer meningkatkan kecepatan animasi transformasi pada bitmap tersebut, seperti memindahkannya, memutarnya, atau melakukan penskalaan.

Kami tidak membedakan antara transformasi skala dan terjemahan.

Tempatkan will-change: transform pada elemen jika Anda memerlukan kecepatan animasi transformasi yang sangat cepat (dengan kata lain, 60 fps), dan diharapkan rasterisasi elemen dengan kualitas tinggi di setiap frame tidak cukup cepat. Jika tidak, hindari will-change: transform.

Untuk mengoptimalkan kompromi kualitas performa, sebaiknya tambahkan will-change: transform saat animasi dimulai dan hapus saat animasi berakhir. Namun, perlu diketahui bahwa sering kali ada biaya performa satu kali yang besar untuk menambahkan atau menghapus will-change: transform.

Pertimbangan penerapan tambahan

Menghapus will-change: transform menyebabkan konten diraster ulang pada skala yang tajam, tetapi hanya pada frame animasi berikutnya (melalui requestAnimationFrame). Jadi, jika Anda memiliki lapisan dengan will-change: transform dan hanya ingin memicu raster ulang, tetapi kemudian melanjutkan animasi, Anda harus menghapus will-change: transform, lalu menambahkannya kembali di requestAnimationFrame() callback.

Jika kapan saja selama animasi, Anda ingin meraster pada skala saat ini, terapkan teknik di atas untuk menghapus dalam satu frame, lalu tambahkan kembali will-change: transform dalam frame berikutnya.

Hal ini dapat menimbulkan efek samping berupa konten yang kehilangan lapisan gabungannya, sehingga rekomendasi di atas menjadi agak mahal. Jika itu masalahnya, sebaiknya tambahkan transform: translateZ(0) ke konten juga untuk memastikan konten tetap berada di lapisan gabungan selama operasi ini.

Ringkasan dampak

Perubahan ini memiliki implikasi terhadap kualitas, performa, dan kontrol developer konten yang dirender.

  • Kualitas konten yang dirender: output yang dirender dari elemen yang menganimasikan skala transformasi akan selalu tajam secara default.
  • Performa: animasi transformasi saat will-change: transform ada akan cepat.
  • Kontrol developer: developer dapat memilih antara kualitas dan kecepatan, berdasarkan per elemen dan per frame animasi dengan menambahkan dan menghapus
    will-change: transform.

Lihat dokumen desain yang dirujuk di atas untuk mengetahui detail selengkapnya.

Contoh

Dalam contoh ini, elemen dengan ID remainsBlurry akan tetap buram setelah perubahan ini, tetapi elemen dengan ID noLongerBlurry akan menjadi jelas. Hal ini karena yang pertama memiliki properti CSS will- change: transform.

Contoh animasi skala transformasi dari aplikasi sebenarnya