Will-change adalah harta CSS yang digunakan untuk memaklumkan elemen pelayar sebelum kemungkinan perubahan untuk mengoptimumkan prestasi. Fungsi terasnya adalah untuk membolehkan penyemak imbas membuat lapisan terlebih dahulu untuk meningkatkan kecekapan rendering. Nilai umum termasuk transformasi, kelegapan, dan lain -lain, dan juga boleh dipisahkan oleh pelbagai koma atribut; Ia sesuai untuk animasi atribut yang tidak standard, peralihan komponen kompleks dan interaksi pengguna yang mencetuskan animasi; Tetapi ia mesti dielakkan penyalahgunaan, jika tidak, ia akan membawa kepada penggunaan memori yang berlebihan atau peningkatan beban GPU; Amalan terbaik adalah untuk memohon sebelum perubahan berlaku dan mengeluarkannya selepas selesai.

Hartanah will-change di CSS digunakan untuk memaklumkan penyemak imbas terlebih dahulu mengenai jenis perubahan yang anda harapkan pada elemen, sehingga dapat mengoptimumkan bagaimana ia mengendalikan perubahan tersebut. Ini dapat meningkatkan prestasi, terutamanya semasa animasi atau peralihan.

Ia bukan tentang membuat perkara lebih cepat dengan sendirinya-lebih lanjut mengenai memberi penyemak imbas kepala supaya dapat disediakan.

Apa yang akan dilakukan oleh will-change ?

Pelayar pintar dan biasanya mengendalikan pengoptimuman secara automatik. Tetapi kadang -kadang, mereka menunggu sehingga detik terakhir untuk membuat keputusan prestasi, yang boleh menyebabkan cegukan kecil - seperti sedikit lag apabila sesuatu mula menghidupkan.

Dengan menggunakan will-change , anda berkata:

"Hei pelayar, saya akan mengubah perkara ini tidak lama lagi - mungkin berulang kali - jadi bersiaplah."

Ini memberitahu penyemak imbas untuk membuat lapisan baru untuk elemen awal (seperti menggunakan transform atau opacity akan), jadi apabila perubahan itu berlaku, ia lebih lancar.

Nilai biasa termasuk:

• will-change: transform;
• will-change: opacity;
• will-change: scroll-position;
• will-change: contents;

Anda juga boleh menyenaraikan pelbagai sifat yang dipisahkan oleh koma:

 Will-change: transform, kelegapan;

Bilakah anda harus menggunakan will-change ?

Menggunakan will-change tidak selalu diperlukan. Pelayar sudah mengoptimumkan sifat animasi biasa seperti transform dan opacity .

Tetapi ada kes di mana ia membantu:

• Animasi sifat yang biasanya tidak dioptimumkan (misalnya, width , left , top )
• Komponen UI Kompleks yang memerlukan peralihan yang lancar (seperti modal, slider, atau tab)
• Unsur -unsur yang akan dihidupkan selepas interaksi pengguna (hover, klik)

Nota penting: Jangan terlalu banyak. Memberitahu pelayar segala -galanya akan berubah dapat menjadi bumerang kerana membuat terlalu banyak lapisan menggunakan memori tambahan dan mungkin benar -benar memperlahankan perkara.

Corak yang baik adalah untuk memohon will-change yang betul sebelum perubahan itu berlaku dan mengeluarkannya selepas itu. Contohnya:

 .element: hover {
  Will-change: Transform;
}

Atau lebih baik lagi, gunakan JavaScript untuk menambah/mengalih keluar kelas dengan will-change sebelum animasi bermula.

Masalah apa yang boleh berlaku jika anda menyalahgunakannya?

Menyalahgunakan will-change boleh membawa kepada prestasi yang lebih buruk dan bukannya lebih baik. Inilah sebabnya:

• Terlalu banyak lapisan : Setiap lapisan mengambil ingatan. Jika berpuluh -puluh elemen dipromosikan ke lapisan mereka sendiri yang tidak perlu, ia boleh menyebabkan penggunaan gpu atau tinggi.
• Pengoptimuman Pramatang : Memohon will-change untuk setiap elemen animasi adalah seperti memanaskan oksigen sebelum anda memutuskan apa yang anda masak-ia tidak membantu dan boleh membazirkan sumber.
• Tingkah laku yang tidak dijangka : Sesetengah sifat seperti contents atau scroll-position boleh menyebabkan perubahan susun atur atau mengecat masalah jika tidak ditangani dengan teliti.

Oleh itu, pastikan ia mudah:

• Gunakannya hanya apabila diperlukan
• Sasaran sifat khusus
• Memohon hampir apabila perubahan berlaku
• Keluarkannya apabila tidak diperlukan lagi

Pemikiran terakhir

Menggunakan will-change boleh membantu membuat animasi lebih lancar dengan membiarkan penyemak imbas menyediakan. Ia paling berguna apabila berurusan dengan sifat bukan standard atau interaksi kompleks.

Tetapi ingat - itu petunjuk, bukan arahan. Pelayar masih memutuskan bagaimana bertindak berdasarkan petunjuk itu.

Dan dalam kebanyakan kes, melekat dengan sifat-sifat yang dipercepatkan perkakasan seperti transform dan opacity sudah cukup. Anda mungkin tidak memerlukan will-change kecuali anda menghadapi masalah prestasi dan cuba menyempurnakannya.

Pada dasarnya itu sahaja.

Atas ialah kandungan terperinci Apakah tujuan harta CSS `Will-Change`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!