content-visibilitydi Chromium 85. Properti tersebut secara signifikan akan memengaruhi kecepatan pemuatan pertama dan perenderan pertama di situs; selain itu, Anda dapat segera berinteraksi dengan konten yang baru dirender, tanpa menunggu konten lainnya dimuat. content-visibilitymemaksa agen pengguna untuk melewati menandai dan mengecat elemen yang tidak ada di layar. Faktanya, ini berfungsi seperti pemuatan lambat, tidak hanya pada pemuatan sumber daya, tetapi pada renderingnya.
Dalam demo ini
content-visibility: auto, ketika diterapkan untuk membagi konten, ini memberikan kecepatan render 7x lebih cepat
Dukung
content-visibilityberdasarkan primitif dari spesifikasi CSS Containment . Meskipun saat ini content-visibilityhanya didukung di Chromium 85 (dan dianggap "dapat dibuat prototipe" di Firefox), spesifikasi Penahanan didukung di sebagian besar browser modern.
Prinsip operasi
Tujuan utama CSS Containment adalah untuk meningkatkan kinerja rendering konten web dengan menyediakan isolasi subpohon DOM yang dapat diprediksi dari bagian lain halaman.
Pada dasarnya, pengembang dapat memberi tahu browser bagian mana dari halaman yang dienkapsulasi sebagai sekumpulan konten, memungkinkan browser untuk memanipulasi konten tanpa harus mempertimbangkan status di luar subpohon. Browser dapat mengoptimalkan rendering halaman dengan mengetahui subpohon mana yang berisi konten terisolasi.
Ada empat jenis CSS Containment, masing-masing berfungsi sebagai nilai untuk properti CSS
containdan dapat digabungkan dengan yang lain:
size: , . , , .layout: . , , , .style: , , , (, ). , , , — .paint: . , , . , .
content-visibility
Mungkin membingungkan nilai mana yang
containterbaik untuk digunakan, karena pengoptimalan browser hanya dapat bekerja dengan sekumpulan parameter yang benar. Ada baiknya bermain-main dengan nilai-nilai untuk secara empiris mencari tahu mana yang terbaik. Lebih baik menggunakannya content-visibilityuntuk penyetelan otomatis contain. content-visibility: automenjamin perolehan kinerja semaksimal mungkin dengan upaya minimum.
Dalam mode otomatis, properti mendapatkan atribut layout, style dan paint, dan ketika elemen keluar dari tepi layar, ia mendapatkan ukuran dan berhenti mengecat dan memeriksa konten. Ini berarti bahwa segera setelah elemen meninggalkan area render, turunannya berhenti merender. Browser mengenali ukuran elemen, tetapi tidak melakukan apa pun hingga rendering diperlukan.
Contoh - blog perjalanan
Biasanya blog perjalanan memiliki beberapa cerita dengan gambar dan deskripsi. Inilah yang terjadi pada browser biasa saat masuk ke blog perjalanan:
- Sebagian halaman dimuat dari jaringan bersama dengan sumber daya yang diperlukan
- Gaya browser dan menempatkan semua konten pada halaman tanpa membedakan antara konten yang terlihat dan tidak terlihat
- Browser melanjutkan ke langkah 1 hingga semua sumber daya dimuat
Pada langkah 2, browser memproses konten, mencari perubahan. Ini memperbarui gaya dan tata letak elemen baru apa pun, bersama dengan elemen yang mungkin telah berubah sebagai akibat dari pembaruan. Ini rendering. Ini membutuhkan waktu.
Sekarang mari kita bayangkan apa yang kita pasang
content-visibility: autodi setiap posting blog. Sistem dasarnya sama: browser mengunduh dan merender bagian halaman. Namun, perbedaan jumlah pekerjaan yang dilakukan pada langkah 2.Ccontent-visibilitybrowser akan mengatur gaya dan menempatkan konten yang sedang dilihat pengguna (di layar). Namun saat menangani cerita di luar layar, browser akan melewatkan rendering seluruh elemen dan hanya menghosting penampung. Performa pemuatan halaman ini akan seolah-olah telah mengisi posting di layar dan wadah kosong untuk setiap posting di luarnya. Ternyata jauh lebih cepat, mendapatkan hingga 50% dari waktu pemuatan. Dalam contoh kami, kami melihat peningkatan dari rendering 232ms menjadi 30ms, yang merupakan peningkatan kinerja 7x.
Apa yang perlu Anda lakukan untuk memanfaatkan manfaat ini? Pertama, kami membagi konten menjadi beberapa bagian:
Setelah, kami menerapkan gaya berikutnya ke bagian-bagian:
.story {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* */
}
, , . , , , .
contain-intrinsic-size
Untuk memahami manfaat potensial
content-visibility, browser harus memberlakukan batasan ukuran untuk memastikan bahwa rendering konten tidak memengaruhi dimensi elemen. Artinya barang tersebut akan diletakkan seolah-olah kosong. Jika elemen tidak memiliki ketinggian yang ditentukan, maka itu akan sama dengan nol.
Untungnya, css memiliki kemampuan lain,
contain-intrinsic-sizyaitu memberikan kemampuan untuk menentukan ukuran sebenarnya dari suatu elemen jika telah dikompresi. Dalam contoh kami, kami mengatur lebar dan tinggi menjadi sekitar 1000px.
Ini berarti bahwa ini akan diposisikan seolah-olah ada satu file "ukuran internal", sambil memastikan bahwa div masih memakan ruang.
contain-intrinsic-siz .
Sembunyikan konten dari content-visibility: hidden
content-visibility: hiddenmelakukan apa yang content-visibility: autodilakukannya dengan konten di luar layar. Namun, tidak seperti auto, itu tidak secara otomatis mulai menampilkan konten ke layar.
Bandingkan ini dengan cara biasa untuk menyembunyikan konten elemen:
- display: none: Menyembunyikan elemen dan menghapus status rendering. Ini berarti bahwa mengambil item akan menelan biaya yang sama seperti membuat item baru.
- visibility: hidden: menyembunyikan elemen dan meninggalkan status rendering. Ini tidak benar-benar menghapus elemen dari dokumen, karena (dan subpohonnya) masih menempati ruang geometris pada halaman dan masih dapat diklik. Itu juga memperbarui status rendering kapan pun diperlukan, bahkan jika tersembunyi.
content-visibility: hiddendi sisi lain, sembunyikan elemen sambil mempertahankan status render sehingga jika ada perubahan yang diperlukan, perubahan itu hanya akan terjadi saat elemen ditampilkan di layar.
Kesimpulan
content-visibilitydan CSS Containment Spec memungkinkan Anda mempercepat rendering dan pemuatan halaman secara signifikan tanpa manipulasi yang rumit, dengan CSS kosong.
CSS Containment Spec
MDN Docs on CSS Containment
CSSWG Draft
Informasi berikut digunakan dalam persiapan materi - web.dev/content-visibility
Periklanan
Server untuk hosting situs - ini tentang epik kami ! Semua server "di luar kotak" dilindungi dari serangan DDoS, instalasi otomatis dari panel kontrol VestaCP yang nyaman. Lebih baik mencobanya sekali;)
