content-Visibility: thuộc tính CSS mới giúp tăng hiệu suất hiển thị

Cải thiện thời gian tải ban đầu bằng cách bỏ qua việc kết xuất nội dung ngoài màn hình.

Jeremy Wagner

Una Kravets

Vladimir Levin

Chiến lược phát hành đĩa đơn content-visibility tài sản này, ra mắt trong Chromium 85, có thể là một trong những CSS mới có ảnh hưởng lớn nhất để cải thiện hiệu suất tải trang. content-visibility bật tác nhân người dùng để bỏ qua công việc kết xuất của một phần tử, bao gồm cả bố cục và tô màu, cho đến khi cần thiết. Bởi vì quá trình kết xuất bị bỏ qua, nếu một phần lớn nội dung nằm ngoài màn hình, việc tận dụng thuộc tính content-visibility sẽ giúp người dùng ban đầu tải nhanh hơn nhiều. Giải pháp này cũng cho phép tương tác nhanh hơn với nội dung trên màn hình. Khá gọn gàng.

Hỗ trợ trình duyệt

content-visibility dựa vào các dữ liệu gốc trong Vùng chứa CSS Quy cách. Trong khi content-visibility chỉ là được hỗ trợ trong Chromium 85 (và được coi là "giá trị tạo nguyên mẫu" cho Firefox), Thông số kỹ thuật của Vùng chứa được hỗ trợ phiên bản hiện đại nhất .

Vùng chứa CSS

Mục tiêu chính và bao quát của việc ngăn chặn CSS là cho phép kết xuất cải thiện hiệu suất của nội dung web bằng cách cung cấp sự tách biệt có thể dự đoán một cây con DOM từ phần còn lại của trang.

Về cơ bản, nhà phát triển có thể cho trình duyệt biết những phần nào của trang được trình bày dưới dạng tập hợp nội dung, cho phép trình duyệt giải thích về nội dung mà không cần cần xem xét trạng thái bên ngoài cây con. Biết được đoạn nội dung nào (cây con) chứa nội dung riêng biệt có nghĩa là trình duyệt có thể tối ưu hoá quyết định về hiển thị trang.

Có bốn loại CSS , mỗi giá trị tiềm năng cho thuộc tính CSS contain. Bạn có thể kết hợp giá trị này trong danh sách giá trị được phân tách bằng dấu cách:

• size: Vùng chứa kích thước trên một phần tử đảm bảo hộp của phần tử đó được bố trí mà không cần kiểm tra các thành phần con. Điều này có nghĩa là chúng ta có thể có thể bỏ qua bố cục của các thành phần con nếu tất cả những gì chúng ta cần là kích thước của .
• layout: Vùng chứa bố cục nghĩa là các thành phần con không ảnh hưởng đến bố cục bên ngoài của các hộp khác trên trang. Điều này cho phép chúng tôi có thể bỏ qua bố cục của các thành phần con nếu tất cả những gì chúng ta muốn làm là bố trí các hộp khác.
• style: Vùng chứa kiểu đảm bảo rằng các thuộc tính có thể ảnh hưởng đến không chỉ là các thành phần con không thoát khỏi phần tử (ví dụ: bộ đếm). Chiến dịch này cho phép chúng ta có thể bỏ qua việc tính toán kiểu cho các phần tử con nếu tất cả chúng ta là tính toán kiểu trên các phần tử khác.
• paint: Vùng chứa Paint đảm bảo rằng các thành phần con của hộp chứa không hiển thị bên ngoài giới hạn tương ứng. Không có gì có thể làm tràn phần tử một cách rõ ràng, và nếu một phần tử nằm ngoài màn hình hoặc không hiển thị thì các phần tử con cháu của phần tử đó sẽ cũng không hiển thị. Điều này cho phép chúng ta có thể bỏ qua việc tô màu các thành phần con nếu phần tử nằm ngoài màn hình.

Bỏ qua công việc kết xuất bằng content-visibility

Có thể bạn sẽ gặp khó khăn trong việc chỉ ra nên sử dụng giá trị vùng chứa nào, vì trình duyệt tối ưu hoá chỉ có thể bắt đầu khi một nhóm thích hợp được chỉ định. Bạn có thể thử nghiệm với các giá trị để xem điều gì phù hợp tốt nhất hoặc bạn có thể sử dụng một thuộc tính CSS khác có tên là content-visibility để áp dụng thuộc tính cần thiết vùng chứa. content-visibility giúp bạn có được những tăng hiệu suất mà trình duyệt có thể mang lại mà không cần nhiều công sức như bạn nhà phát triển.

Thuộc tính content- visibility chấp nhận nhiều giá trị, nhưng auto là một giá trị giúp cải thiện hiệu suất ngay lập tức. Một phần tử có content-visibility: auto nhận được layout, style và vùng chứa paint. Nếu phần tử nằm ngoài màn hình (và không liên quan đến người dùng) phần tử sẽ là các phần tử có tiêu điểm hoặc lựa chọn trong cây con), nó cũng nhận được size vùng chứa (và nó sẽ dừng tô màu và thử nghiệm lượt truy cập nội dung của tài khoản).

Điều này có nghĩa là gì? Tóm lại, nếu phần tử nằm ngoài màn hình, thì các thành phần con cháu của nó chưa được hiển thị. Trình duyệt xác định kích thước của phần tử mà không xem xét đến bất kỳ nội dung nào của tệp và chỉ dừng lại ở đó. Hầu hết hoạt động kết xuất, chẳng hạn như tạo kiểu và bố cục của cây con của phần tử đó bị bỏ qua.

Khi phần tử này đến gần khung nhìn, trình duyệt sẽ không thêm size nữa ngăn chặn và bắt đầu vẽ cũng như kiểm thử nhấn vào nội dung của phần tử. Chiến dịch này cho phép công việc kết xuất được thực hiện ngay trong thời gian mà người dùng có thể xem.

Lưu ý về khả năng hỗ trợ tiếp cận

Một trong những tính năng của content-visibility: auto là nội dung ngoài màn hình vẫn có trong mô hình đối tượng tài liệu và do đó, cây hỗ trợ tiếp cận (không giống với visibility: hidden). Điều này có nghĩa là người dùng có thể tìm kiếm và điều hướng nội dung đến trên trang mà không cần chờ tải nội dung hoặc làm giảm hiệu suất kết xuất.

Tuy nhiên, mặt trái của điều này là các phần tử landmark có đặc điểm kiểu như display: none hoặc visibility: hidden cũng sẽ xuất hiện trong cây hỗ trợ tiếp cận khi ở ngoài màn hình, vì trình duyệt sẽ không hiển thị các kiểu này cho đến khi vào khung nhìn. Để ngăn tình trạng này hiển thị trong cây hỗ trợ tiếp cận và có thể gây ra tình trạng lộn xộn, hãy nhớ thêm aria-hidden="true".

Ví dụ: một blog du lịch

Blog du lịch thường chứa tập hợp các câu chuyện kèm một vài hình ảnh và một vài văn bản mô tả. Sau đây là điều xảy ra trên một trình duyệt thông thường khi trình duyệt truy cập vào một blog du lịch:

1. Một phần của trang được tải xuống từ mạng, cùng với mọi thông tin cần thiết của chúng tôi.
2. Kiểu trình duyệt và bố trí tất cả nội dung của trang mà không cân nhắc xem nội dung có hiển thị cho người dùng hay không.
3. Trình duyệt sẽ quay lại bước 1 cho đến khi tất cả trang và tài nguyên đã tải xuống.

Ở bước 2, trình duyệt sẽ xử lý tất cả nội dung để tìm những nội dung có thể đã thay đổi. Nó cập nhật kiểu và bố cục của mọi phần tử mới, cùng với các yếu tố có thể đã thay đổi do cập nhật mới. Đây là kết xuất cơ quan. Việc này sẽ mất nhiều thời gian.

Bây giờ, hãy xem điều gì sẽ xảy ra nếu bạn đặt content-visibility: auto trên mỗi câu chuyện riêng lẻ trong blog. Vòng lặp chung giống nhau: trình duyệt tải xuống và hiển thị các phần của trang. Tuy nhiên, sự khác biệt nằm ở lượng công việc cần làm ở bước 2.

Với chế độ hiển thị nội dung, chế độ xem này sẽ tạo kiểu và bố cục cho tất cả nội dung hiện hiển thị với người dùng (họ đang hiển thị trên màn hình). Tuy nhiên, khi xử lý câu chuyện nằm hoàn toàn ngoài màn hình, trình duyệt sẽ bỏ qua công việc kết xuất và chỉ tạo kiểu và bố cục cho chính hộp phần tử.

Hiệu suất tải trang này sẽ như thể trang hiển thị toàn màn hình các tin bài và ô trống cho từng tin bài ngoài màn hình. Điều này mang lại hiệu quả cao với mức giảm dự kiến giảm 50% trở lên so với chi phí kết xuất của đang tải. Trong ví dụ này, chúng ta thấy thời gian kết xuất tăng từ 232 mili giây lên Thời gian kết xuất là 30 mili giây. Hiệu suất tăng 7 lần.

Bạn cần làm những gì để nhận được những lợi ích này? Trước tiên, chúng tôi chia nội dung thành các phần:

Sau đó, chúng tôi áp dụng quy tắc kiểu sau cho các phần:

.story {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /* Explained in the next section. */
}

Chỉ định kích thước tự nhiên của một phần tử bằng contain-intrinsic-size

Để nhận thấy những lợi ích tiềm năng của content-visibility, trình duyệt cần áp dụng vùng chứa kích thước để đảm bảo kết quả hiển thị nội dung không ảnh hưởng đến kích thước của phần tử theo bất kỳ cách nào. Điều này có nghĩa là phần tử sẽ hiển thị như thể trống. Nếu phần tử không chỉ định chiều cao trong bố cục khối thông thường, thì trình phân tích sẽ có chiều cao bằng 0.

Đây có thể không phải là phương án lý tưởng vì kích thước của thanh cuộn sẽ thay đổi khi dựa vào mỗi câu chuyện có chiều cao khác 0.

Rất may, CSS cung cấp một thuộc tính khác là contain-intrinsic-size chỉ định hiệu quả kích thước tự nhiên của phần tử nếu phần tử là chịu ảnh hưởng của giới hạn kích thước. Trong ví dụ này, chúng ta đặt giá trị cho thuộc tính này thành 1000px ước tính chiều cao và chiều rộng của các đoạn.

Điều này có nghĩa là giao diện sẽ bố trí như thể có một phần tử con có "kích thước nội tại" để đảm bảo rằng các div chưa có kích thước vẫn chiếm không gian. contain-intrinsic-size đóng vai trò là kích thước phần giữ chỗ thay cho nội dung được kết xuất.

Trong Chromium 98 trở lên, có một auto mới từ khoá cho contain-intrinsic-size. Khi được chỉ định, trình duyệt sẽ ghi nhớ kích thước được kết xuất gần đây nhất (nếu có) và sử dụng kích thước đó thay vì phần giữ chỗ do nhà phát triển cung cấp kích thước. Ví dụ: nếu bạn đã chỉ định contain-intrinsic-size: auto 300px, thì sẽ bắt đầu với một kích thước nội tại 300px trong mỗi chiều, nhưng khi nội dung của phần tử được kết xuất thì nó sẽ giữ nguyên kích thước nội tại được kết xuất. Mọi thay đổi về kích thước kết xuất tiếp theo cũng sẽ được ghi nhớ. Trong thực tế, điều này có nghĩa là nếu bạn cuộn một phần tử có áp dụng content-visibility: auto rồi cuộn trở lại ngoài màn hình, hình ảnh sẽ tự động giữ nguyên chiều rộng và chiều cao lý tưởng và không hoàn nguyên vào kích thước phần giữ chỗ. Tính năng này đặc biệt hữu ích cho những trình cuộn vô hạn, Tính năng này hiện có thể tự động cải thiện ước tính kích thước theo thời gian khi người dùng khám phá trang.

Đang ẩn nội dung bằng content-visibility: hidden

Điều gì sẽ xảy ra nếu bạn muốn nội dung không được hiển thị bất kể nội dung đó có hay không có xuất hiện trên màn hình mà vẫn tận dụng được các lợi ích của trạng thái kết xuất được lưu vào bộ nhớ đệm không? Nhập: content-visibility: hidden.

Thuộc tính content-visibility: hidden mang đến cho bạn tất cả các lợi ích tương tự của nội dung chưa kết xuất và trạng thái kết xuất được lưu vào bộ nhớ đệm như content-visibility: auto ngoài màn hình. Tuy nhiên, không giống như auto, chế độ này không tự động bắt đầu hiển thị trên màn hình.

Thao tác này giúp bạn có nhiều quyền kiểm soát hơn, cho phép bạn ẩn nội dung của một phần tử và sau đó hiện chúng một cách nhanh chóng.

So sánh phần tử này với các cách phổ biến khác để ẩn nội dung của phần tử:

• display: none: ẩn phần tử và huỷ trạng thái kết xuất của phần tử đó. Chiến dịch này có nghĩa là việc hiện phần tử cũng tốn kém tương đương với việc kết xuất một phần tử mới bằng cùng một nội dung.
• visibility: hidden: ẩn phần tử và giữ nguyên trạng thái kết xuất. Chiến dịch này không thực sự xoá phần tử khỏi tài liệu, vì phần tử đó (và là cây con) vẫn chiếm không gian hình học trên trang và vẫn có thể nhấp vào được. Nó đồng thời cập nhật trạng thái kết xuất bất cứ khi nào cần thiết, ngay cả khi trạng thái đó bị ẩn.

Mặt khác, content-visibility: hidden ẩn phần tử khi duy trì trạng thái kết xuất, vì vậy, nếu có bất kỳ thay đổi nào cần chúng chỉ xảy ra khi phần tử đó được hiển thị lại (tức là Tài sản content-visibility: hidden đã bị xoá).

Một số trường hợp sử dụng hiệu quả cho content-visibility: hidden khi triển khai trình cuộn ảo nâng cao và bố cục đo lường. Chúng cũng rất phù hợp để (SPA). Chế độ xem của ứng dụng không hoạt động có thể được để lại trong DOM bằng Đã áp dụng content-visibility: hidden để ngăn hiển thị nhưng duy trì trạng thái được lưu vào bộ nhớ đệm. Điều này giúp khung hiển thị nhanh chóng kết xuất khi hoạt động trở lại.

Ảnh hưởng đến lượt tương tác với nội dung hiển thị tiếp theo (INP)

INP là chỉ số đánh giá khả năng phản hồi đáng tin cậy của hoạt động đầu vào của người dùng của một trang. Khả năng phản hồi có thể bị ảnh hưởng khi có quá nhiều tác vụ chạy trên luồng chính, bao gồm cả tác vụ kết xuất hình ảnh.

Bất cứ khi nào bạn có thể giảm công việc kết xuất trên một trang nhất định, bạn đang tạo cho luồng chính cơ hội phản hồi hoạt động đầu vào của người dùng nhanh hơn. Điều này bao gồm công việc kết xuất hình ảnh và việc sử dụng thuộc tính CSS content-visiblity khi thích hợp có thể làm giảm công việc kết xuất — đặc biệt là trong quá trình khởi động, khi hầu hết công việc kết xuất và bố cục đã hoàn tất.

Việc giảm công việc kết xuất có ảnh hưởng trực tiếp đến INP. Khi người dùng cố gắng tương tác với một trang sử dụng thuộc tính content-visibility đúng cách để trì hoãn bố cục và hiển thị các phần tử ngoài màn hình, bạn sẽ cho luồng chính cơ hội phản hồi công việc quan trọng mà người dùng thấy được. Điều này có thể cải thiện INP của trang trong một số trường hợp.

Kết luận

content-visibility và Thông số kỹ thuật của Vùng chứa CSS có nghĩa là một số hiệu suất thú vị sẽ xuất hiện ngay trong tệp CSS của bạn. Để biết thêm thông tin về thuộc tính, hãy xem:

• Quy cách của vùng chứa CSS
• Tài liệu MDN trên CSS Vùng chứa
• Bản nháp CSSWG