Ciri -ciri CSS mana yang terbaik untuk menghidupkan prestasi?

Untuk mencapai prestasi tinggi animasi web, anda harus memberi keutamaan untuk menggunakan atribut Transform dan kelegapan untuk mengelakkan pencetus penerbitan menyusun semula atribut. 1. Transformasi (seperti Terjemahan, Skala, Putar) dan Perubahan Kelegapan biasanya dipercepat oleh GPU, hanya operasi sintesis yang diperlukan, dan tiada susun atur pelepasan atau redrawing dicetuskan; 2. Elakkan animasi seperti lebar, ketinggian, atas, kiri, dan lain -lain untuk mengelakkan pelepasan susun atur pelepasan; 3. Anda boleh menggunakan perubahan atau translatez (0) dengan sewajarnya untuk meningkatkan unsur-unsur kepada lapisan bebas, tetapi tidak terlalu banyak; 4. Mengawal kerumitan animasi, mengurangkan bilangan elemen animasi pada masa yang sama, dan lebih suka peralihan CSS daripada pemandu JavaScript, dan gunakan RequestAnimationFrame untuk dikawal apabila diperlukan.

Apabila anda menghidupkan unsur -unsur di laman web, tidak semua sifat CSS dicipta sama. Ada yang akan berjalan lancar dan kelihatan hebat, sementara yang lain dapat menyebabkan jank dan hal -hal yang perlahan. Sekiranya anda mahu animasi anda berasa tajam dan tidak menyakiti prestasi, sebaiknya melekat dengan sifat -sifat yang boleh dikendalikan oleh pelayar dengan cekap - idealnya yang hanya memerlukan perubahan komposit, bukan susun atur atau cat.

Inilah yang perlu difokuskan jika anda mengambil berat tentang prestasi animasi yang lancar.

Gunakan transform dan opacity untuk animasi yang lancar

Kedua-dua sifat ini adalah standard emas ketika datang ke animasi berprestasi tinggi. Kenapa? Kerana mereka sering dapat dikendalikan oleh GPU melalui sesuatu yang dipanggil pecutan perkakasan , tanpa mencetuskan susun atur mahal atau operasi cat.

• transform : Ini termasuk perkara seperti translate , scale , rotate , dan skew . Sebagai contoh, menggerakkan elemen dengan transform: translateX(100px) jauh lebih lancar daripada menukar nilai left atau margin-left .

• opacity : Menukar ketelusan juga tidak memaksa penyemak imbas untuk mengira semula susun atur atau mengecat bahagian besar skrin.

Petua cepat: Cuba menggabungkan kedua -dua kesan seperti pudar dan gelongsor dalam menu atau tooltips.

Elakkan menghilangkan sifat-sifat yang memicu susun atur

Sesetengah sifat menyebabkan penyemak imbas untuk mengira semula susun atur setiap bingkai - ini dikenali sebagai susun atur susun atur dan boleh membuat gagap animasi anda.

Elakkan menghidupkan:

• width , height
• top , left , margin , padding
• border-width

Perubahan jenis ini memaksa penyemak imbas untuk mengukur semula berapa banyak ruang yang diambil, yang dikira berat apabila dilakukan berulang kali dalam gelung animasi.

Sebagai contoh, animasi width untuk membuat bar kemajuan berkembang mungkin kelihatan mudah, tetapi menggunakan transform: scaleX() sebaliknya biasanya akan memberikan hasil yang lebih baik.

Berpegang pada animasi yang terdiri di mana mungkin

Apabila anda menghidupkan harta yang mencetuskan comppositor (sebahagian daripada enjin penyemak imbas yang bertanggungjawab untuk menyusun imej skrin akhir), perkara -perkara cenderung berjalan lebih cepat.

Anda boleh membantu penyemak imbas mengoptimumkan dengan:

• Menggunakan will-change atau translateZ(0) dengan berhati-hati untuk mempromosikan unsur-unsur ke lapisan mereka sendiri
• Tidak berlebihan dengan lapisan - terlalu banyak yang sebenarnya boleh menyakiti prestasi

Pengoptimuman semacam ini tidak selalu diperlukan, tetapi ia dapat membantu dalam UI atau peranti mudah alih yang kompleks di mana sumber lebih terhad.

Pastikan kerumitan animasi terkawal

Walaupun dengan sifat yang dipilih dengan baik, animasi masih boleh menjadi berat jika:

• Mereka berjalan pada banyak elemen sekaligus
• Mereka menggunakan lengkung pelonggaran kompleks atau jangka masa panjang
• Mereka mencetuskan panggilan balik atau javascript semasa animasi

Untuk menjaga perkara cahaya:

• Hadkan berapa elemen yang dihidupkan sekaligus
• Lebih suka peralihan CSS-Only ke atas animasi yang didorong oleh JavaScript
• Gunakan requestAnimationFrame jika anda memerlukan kawalan JS

Juga, uji animasi anda pada peranti rendah-hanya kerana ia lancar pada komputer riba anda tidak bermakna ia akan di telefon dari beberapa tahun yang lalu.

Animasi mesra prestasi kebanyakannya memilih alat yang betul dan mengetahui apa yang menyebabkan kerja tambahan di belakang tabir. Stick dengan transform dan opacity kebanyakan masa, elakkan sifat susun atur, dan simpan perkara yang mudah.

Atas ialah kandungan terperinci Ciri -ciri CSS mana yang terbaik untuk menghidupkan prestasi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!