Hanya dengan menerapkan content-visibility: auto, objek yang tidak terlihat di layar tidak akan dirender sehingga performa meningkat
Saat auto ditetapkan pada objek, layout, style, dan paint dari spesifikasi CSS Containment akan diterapkan, dan ketika objek tersebut keluar dari layar, size juga ikut diterapkan
→ Saat keluar dari layar, turunan dari objek tersebut sama sekali tidak digambar
→ Saat kembali mendekati layar, size dilepas dan hit-test dimulai
Dengan contain-intrinsic-size, ukuran dasar yang harus digambar bisa ditentukan. Jika tidak ditentukan, nilainya 0
Jika content-visibility: hidden ditetapkan, objek sama sekali tidak dirender seolah-olah berada di luar layar.
→ Objek disembunyikan dan status rendering dipertahankan, tetapi jika ada perubahan, rendering akan diterapkan saat objek ditampilkan kembali.
→ display:none - objek disembunyikan dan status rendering dihancurkan. Artinya saat ditampilkan lagi, efeknya sama seperti menggambar ulang dari awal
→ visibility:hidden - objek disembunyikan dan status rendering dipertahankan. Objek tidak benar-benar dihapus dari dokumen, tetap menempati ruang, dan masih bisa diklik. Meskipun tersembunyi, rendering tetap berjalan
Belum ada komentar.