Cara Menulis CSS Lebih Baik dengan Prestasi dalam Minda

Dalam jawatan hari ini kita akan merenungkan pilihan kod yang boleh kita buat dalam CSS untuk prestasi tapak yang lebih baik. Tetapi, sebelum kita menyelam dengan pilihan tersebut, mari kita mulailah dengan ringkas, melihat dengan lebih dekat pada alur kerja rendering laman web untuk memberi tumpuan kepadakawasan bermasalah (prestasi) yang boleh diselesaikan melalui CSS.

Inilah aliran operasi kasar yang dilakukan oleh penyemak imbas selepas penciptaan pokok DOM:

Mengira semula Gaya (dan menjadikan penciptaan pokok). Pelayar mengira gaya yang akan digunakan pada elemen dalam pokok DOM. Pokok render kemudian dibuat semasa membuang nod (unsur) dari pokok DOM yang tidak akan diberikan (elemen dengan paparan: tiada) dan mereka yang (unsur-unsur pseudo).
Layout (aka Reflow). Menggunakan gaya yang dikira dari sebelumnya, pelayar mengira kedudukan dan geometri setiap elemen pada halaman.
Repaint. Apabila susun atur dipetakan, piksel ditarik ke skrin.
Lapisan Komposit. Semasa mengecat, lukisan mungkin dilakukan dalam lapisan berlainan secara autonomi; lapisan tersebut akhirnya digabungkan bersama.

Sekarang mari kita meneruskan apa yang boleh kita lakukan dalam tiga peringkat pertama operasi untuk menulis kod CSS yang lebih baik.

1. Kurangkan Pengiraan Gaya

Seperti yang dinyatakan sebelum ini, dalam gaya "Mengira semula", peramban mengira gaya yang akan digunakan untuk unsur-unsur. Untuk melakukan ini, pelayar pertama mendapati semua pemilih dalam CSS yang menunjuk kepada nod elemen yang diberikan dalam pokok DOM. Kemudian ia meneruskan semua peraturan gaya dalam pemilih tersebut dan memutuskan mana yang akan digunakan untuk elemen tersebut.

Untuk mengelakkan pengiraan gaya mahal, mengurangkan pemilih yang kompleks dan sangat bersarang supaya lebih mudah bagi penyemak imbas untuk memikirkan unsur yang dipilih oleh pemilih. Ini mengurangkan masa pengiraan.

Cara lain untuk menggunakan termasuk mengurangkan bilangan peraturan gaya (jika mungkin), mengeluarkan CSS yang tidak digunakan dan mengelakkan redundansi & menimpa, supaya penyemak imbas tidak perlu melalui gaya yang sama sekali lagi semasa pengiraan gaya.

2. Kurangkan Reflows

Perubahan-perubahan reflows atau Layout dalam elemen adalah sangat "mahal" proses, dan mereka boleh menjadi masalah yang lebih besar apabila elemen yang melalui perubahan susunatur mempunyai jumlah anak-anak yang besar (sejak Reflows menjatuhkan ke bawah hierarki).

Reflows dicetuskan oleh susun atur perubahan kepada elemen, seperti perubahan kepada sifat geometri seperti ketinggian atau saiz fon, penambahan atau pengalihan kelas kepada elemen, saiz semula tetingkap, diaktifkan : berlegar, Perubahan DOM oleh JavaScript, dan lain-lain.

Sama seperti pengiraan gaya, untuk mengurangkan Reflows, elakkan pemilih kompleks dan pokok DOM mendalam (sekali lagi, ini adalah untuk mengelakkan pengisian semula Reflows yang berlebihan).

Sekiranya anda perlu menukar gaya susun atur komponen dalam halaman anda, Taruhan gaya unsur yang paling rendah dalam hierarki elemen bahawa komponen itu dibuat. Ini supaya susun atur perubahan tidak mencetuskan (hampir) Reflows lain.

Jika anda menghidupkan elemen yang berjalan melalui susun atur perubahan, mengambilnya dari aliran halaman oleh tiada kedudukannya, kerana Reflow dalam elemen yang benar-benar diposisikan tidak akan menjejaskan seluruh unsur-unsur di halaman.

Untuk meringkaskan:

Unsur sasaran yang lebih rendah di dalam pokok DOM apabila membuat susun atur berubah
Pilih elemen yang benar-benar diposisikan untuk susun atur yang mengubah animasi
Elakkan sifat susun atur animasi apabila mungkin

3. Mengurangkan Pengecutan

Mengecat merujuk kepada lukisan piksel pada skrin, dan merupakan proses yang mahal seperti Reflow. Pengecekan boleh dicetuskan oleh Reflows, tatal halaman, perubahan sifat seperti warna, penglihatan dan kelegapan.

Untuk mengelakkan pengecutan yang kerap dan besar, gunakan kurang daripada sifat-sifat yang menyebabkan repaints mahal seperti bayang-bayang.

Jika anda menghidupkan sifat elemen yang boleh mencetuskan Pengecutan secara langsung atau tidak langsung, ia akan menjadi kelebihan yang besar jika unsur itu berada dalam lapisannya sendiri mencegah pracetak lukisan daripada menjejaskan seluruh halaman dan mencetuskan pecutan perkakasan. Dalam perkakas perkakasan, GPU akan mengambil tugas melaksanakan perubahan animasi dalam lapisan, menyimpan kerja tambahan CPU semasa mempercepatkan proses.

Dalam beberapa penyemak imbas, kelegapan (dengan nilai kurang daripada 1) dan ubah (nilai selain daripada tiada) secara automatik dipromosikan ke lapisan baru, dan pecutan perkakasan digunakan untuk animasi dan peralihan. Lebih suka sifat-sifat ini untuk animasi adalah begitu baik.

Untuk memaksa mempromosikan elemen ke lapisan baru dan masuk ke pecutan perkakasan untuk animasi, terdapat dua teknik yang dicadangkan:

Tambah mengubah: translate3d (0, 0, 0); ke elemen, menipu pelayar untuk mencetuskan pecutan perkakasan untuk animasi dan peralihan.
tambahkan akan berubah harta kepada elemen, yang memberitahu penyemak imbas sifat-sifat yang mungkin berubah dalam elemen di masa depan. Catatan: Sara Soueidan mempunyai artikel mendalam dan sangat berguna mengenai perkara ini di laman Dev.Opera.

Untuk meringkaskan:

Elakkan gaya mahal yang menyebabkan Repaints
Dapatkan promosi lapisan dan pecutan perkakasan untuk animasi dan peralihan besar.

Mengambil nota

(1) Jadi sehingga sekarang, kami tidak menyentuh pengurangan saiz fail CSS. Kami telah menyebut bahawa pengurangan peraturan gaya (dan elemen DOM) membuat peningkatan prestasi yang signifikan kerana berapa banyak penyemak imbas perlu berfungsi kurang semasa proses pengkomputeran gaya. Akibat pengurangan kod ini, menulis pemilihan yang lebih baik dan penghapusan CSS yang tidak digunakan, saiz fail secara automatik akan berkurangan.

(2) Ia juga dinasihatkan tidak membuat terlalu banyak perubahan berbangkit kepada gaya elemen dalam JavaScript. Sebaliknya tambah kelas pada elemen (menggunakan JavaScript) yang memegang gaya baru untuk membuat perubahan ini - ini menghalang Reflows yang tidak perlu.

(3) Anda akan mahu elakkan Layout Thrashing juga (Reflows sinkron dipaksa) yang timbul kerana mengakses dan mengubahsuai sifat Layout elemen menggunakan JavaScript. Baca lebih lanjut mengenai cara ini membunuh prestasi di sini.