Trang danh sách dài (vài nghìn card) render chậm dù dữ liệu đã phân trang phía server. `content-visibility` và `contain` giúp gì?

Hai thuộc tính này cho trình duyệt biết phạm vi ảnh hưởng của một subtree, để nó được phép bỏ qua công việc render không cần thiết.

contain khai báo cam kết cách ly:

• layout — thay đổi bên trong không ảnh hưởng layout bên ngoài.
• paint — con không vẽ tràn ra ngoài biên.
• size — kích thước phần tử không phụ thuộc nội dung (phải tự cho kích thước).
• style, và bí danh content = layout paint style, strict = thêm size.

Nhờ đó một thay đổi trong card chỉ bắt trình duyệt tính lại phạm vi card đó thay vì cả trang.

content-visibility: auto mạnh hơn: phần tử ngoài viewport được bỏ qua cả layout lẫn paint cho tới khi cuộn tới gần — về bản chất là virtualization do trình duyệt lo.

.card {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;  /* placeholder height while skipped */
}

Bẫy phải nói kèm:

• Thiếu contain-intrinsic-size, mỗi phần tử bị bỏ qua tính chiều cao 0 → thanh cuộn nhảy loạn khi cuộn. Đây là lỗi phổ biến nhất.
• Nội dung bị bỏ qua không tìm được bằng Ctrl+F ở một số trình duyệt và có thể ảnh hưởng anchor link, scrollIntoView. Đừng áp lên nội dung quan trọng cho tìm kiếm trong trang.
• contain: size mà không đặt kích thước rõ ràng sẽ làm phần tử sập về 0.

So với virtualization JS (react-window): content-visibility rẻ về công sức và giữ nguyên DOM (tốt cho SEO, in ấn), nhưng DOM vẫn tồn tại nên với hàng chục nghìn node thì virtualization thật vẫn thắng.