Me-raster ulang lapisan yang digabungkan pada perubahan skala

Chris Harrelson
Chris Harrelson
X GitHub

TL;DR (Ringkasan)

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

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

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

Implikasi bagi developer web

Dengan perubahan ini, will-change: transform dapat dianggap sebagai memaksa konten di-raster menjadi bitmap tetap, yang kemudian tidak pernah berubah dalam update transformasi. Hal ini memungkinkan developer meningkatkan kecepatan transformasi animasi pada bitmap tersebut, seperti memindahkannya, memutar, atau menskalakannya.

Kami tidak membedakan antara transformasi skala dan terjemahan.

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

Untuk mengoptimalkan kompromi kualitas performa, Anda mungkin ingin menambahkan will-change: transform saat animasi dimulai dan menghapusnya saat berakhir. Namun, perhatikan bahwa sering kali ada biaya performa satu kali yang besar untuk menambahkan atau menghapus will-change: transform.

Pertimbangan penerapan tambahan

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

Jika sewaktu-waktu Anda ingin melakukan raster pada skala saat ini, terapkan teknik di atas untuk menghapus dalam satu frame, yaitu menambahkan kembali will-change: transform dalam frame berikutnya.

Hal ini mungkin menyebabkan efek samping konten kehilangan lapisan gabungannya, sehingga menyebabkan rekomendasi di atas menjadi agak mahal. Jika hal ini menjadi masalah, sebaiknya tambahkan juga transform: translateZ(0) ke konten untuk memastikan tetap berada dalam lapisan gabungan selama operasi ini.

Ringkasan dampak

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

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

Lihat dokumen desain yang direferensikan 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 tajam. Hal ini karena yang pertama memiliki properti CSS will- change: transform di dalamnya.

Contoh mengubah animasi skala dari aplikasi nyata