01/10/2026 · VietTechies · Biên tập
Trình duyệt thường xuyên phải thực hiện các tác vụ tính toán bố cục (layout), kiểu dáng (style) và vẽ (paint) cho những phần tử nằm sâu bên dưới khung hiển thị (viewport), ngay cả khi người dùng chỉ đang xem phần nội dung ở trên cùng. Để khắc phục chi phí xử lý này, thuộc tính CSS content-visibility: auto cho phép trình duyệt bỏ qua việc render các cây con trong DOM ngoài màn hình cho đến khi chúng thực sự cần thiết đối với người dùng.
Cách content-visibility Quản Lý Các Cây Con Ngoài Màn Hình
Thiết lập content-visibility: auto tận dụng cơ chế cô lập (containment) của trình duyệt để tạm dừng công đoạn layout, style và paint đối với các phần tử nằm ngoài viewport. Phần tử đó vẫn tồn tại trong DOM và các tài nguyên mạng liên quan không bị hoãn tải chỉ bởi quy tắc này, giúp phân biệt rõ ràng với kỹ thuật lazy loading. Thay vào đó, nó hướng dẫn công cụ trình duyệt giảm thiểu công việc render cho những nội dung chưa xuất hiện trên màn hình.
Trong một thử nghiệm có kiểm soát do freeCodeCamp thực hiện trên 150 thẻ HTML phức tạp không sử dụng framework, việc áp dụng content-visibility: auto đã giảm thời gian hoạt động Rendering ban đầu trong Chrome DevTools từ 42 ms xuống còn 20 ms. Tác giả lưu ý rằng con số này chỉ phản ánh thời gian render ban đầu được ghi nhận bởi devtools chứ không đại diện cho tốc độ tải trang tổng thể hay các chỉ số Core Web Vitals, đồng thời mức độ cải thiện hiệu suất sẽ thay đổi tùy thuộc vào độ phức tạp của bố cục, thiết bị và kích thước viewport.
Giữ Ổn Định Bố Cục Với contain-intrinsic-size
Bỏ qua công đoạn render ngoài màn hình có thể dẫn đến hiện tượng dịch chuyển bố cục (layout shift) do trình duyệt chưa có kích thước hình học chính xác cho các nút bị bỏ qua. Các nhà phát triển giải quyết vấn đề này bằng cách kết hợp content-visibility với contain-intrinsic-size. Ví dụ, khai báo contain-intrinsic-size: auto 900px sẽ cung cấp một kích thước dự phòng khi nội dung bị bỏ qua, đồng thời cho phép trình duyệt ghi nhớ kích thước thực tế sau khi phần tử được cuộn vào vùng nhìn thấy.
Trong bài kiểm tra của freeCodeCamp, việc thêm kích thước nội tại dự phòng rõ ràng đã làm giảm thêm thời gian đo lường render ban đầu xuống mức trung vị 10 ms. Tuy nhiên, nếu lựa chọn chiều cao dự phòng không chính xác, trang web có thể gặp phải sự điều chỉnh hình học đột ngột khi các nút ngoài màn hình cuộn vào viewport và hiển thị kích thước thực của chúng.
Khả Năng Truy Cập Và Ranh Giới Triển Khai
Mặc dù quá trình render cho các cây con ngoài màn hình bị bỏ qua, các phần tử sử dụng content-visibility: auto vẫn có thể hiện diện trong cây khả năng truy cập (accessibility tree) của trình duyệt. Do đặc tính này, thuộc tính không nên được dùng làm phương thức ẩn phần tử về mặt ngữ nghĩa đối với các công nghệ hỗ trợ. Ngoài ra, việc hoãn xử lý ban đầu không làm mất đi hoàn toàn khối lượng công việc; các tác vụ bị hoãn sẽ tiếp tục được thực hiện khi phần tử cuộn vào viewport.
Thuộc tính content-visibility đã đạt độ tương thích rộng rãi trên các trình duyệt hiện đại như một phần của Baseline 2024. Kỹ thuật này mang lại giá trị cao nhất cho các trang chứa cây DOM lớn với nhiều nội dung ngoài màn hình, chẳng hạn như danh sách sản phẩm dài, nguồn cấp bài viết hoặc các bảng điều khiển nhiều phân đoạn.
Ảnh minh họa do AI tạo, không phải ảnh tư liệu.
Nguồn:
How CSS content-visibility Works and How It Can Improve Rendering Performance