Cải thiện hiệu năng trang với `content-visibility` được hỗ trợ từ Chrome 85

Chỉ cần áp dụng content-visibility: auto là có thể cải thiện tốc độ bằng cách không render các đối tượng không hiển thị trên màn hình.

Khi đặt auto cho đối tượng, các thuộc tính layout, style, paint trong đặc tả CSS Containment sẽ được áp dụng, và khi đối tượng đó ra khỏi màn hình thì cả size cũng được áp dụng.

→ Khi ra khỏi màn hình, các phần tử con của đối tượng đó sẽ hoàn toàn không được vẽ.

→ Khi quay lại gần màn hình, size sẽ được bỏ và bắt đầu hit-test.

Có thể chỉ định kích thước mặc định cần vẽ bằng contain-intrinsic-size. Nếu không chỉ định thì là 0.

Khi đặt content-visibility: hidden, phần tử sẽ hoàn toàn không được render như thể đã ra khỏi màn hình.

→ Phần tử được ẩn và trạng thái render vẫn được giữ, nhưng nếu có thay đổi thì khi hiển thị lại, render sẽ được áp dụng.

→ display:none - Ẩn phần tử và hủy trạng thái render. Tức là khi hiển thị lại thì gần như vẽ mới từ đầu.

→ visibility:hidden - Ẩn phần tử và giữ nguyên trạng thái render. Thực tế nó không bị loại khỏi tài liệu, phần tử vẫn chiếm chỗ và vẫn có thể được nhấp. Dù bị ẩn nhưng render vẫn tiếp tục.