Halaman dengan dua ratus baris membayar tata letak untuk semuanya sebelum pengecatan pertama, meskipun pengunjung melihat empat. Properti visibilitas konten memungkinkan subpohon dilewati seluruhnya hingga mendekati area pandang, dengan satu properti dan satu petunjuk ukuran.

.list-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 84px;
}

Dua bagian

  • visibilitas konten: otomatis berarti browser dapat melewati rendering, pengujian hit, dan gaya untuk subpohon yang dirender di luar layar.
  • mengandung-ukuran intrinsik memberi elemen yang dilewati ukuran standar sehingga bilah gulir tidak melompat; kata kunci auto memungkinkan browser mengingat ukuran sebenarnya setelah baris dilihat satu kali.

Di mana menerapkannya, di mana tidak

  1. Terapkan per baris, kartu, atau bagian berulang, jangan pernah ke seluruh badan halaman; melewatkan isi akan mengalahkan gulungan pencarian di halaman dan jangkar.
  2. Berikan ukuran intrinsik yang jujur: tebakan yang sangat salah menghasilkan tata letak yang bernafas dengan bilah gulir saat baris tercapai.
  3. Jangan menggunakannya di dalam elemen yang harus dicari pengguna secara visual; browser terus mengerjakan kasus edge, dan pohon tersembunyi adalah teks tersembunyi untuk beberapa alat.

Halaman artikel situs ini tetap sederhana, satu foto dan beberapa lusin blok, sehingga saat ini tidak memerlukan properti tersebut, dan itulah pelajaran pengukuran yang jujur: terapkan di tempat yang benar-benar menghitung jumlah baris. Pada halaman arsip atau log perubahan sedalam dua ribu baris, kemenangannya sangat gacor, dan biayanya dua baris.