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.

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.

bản minh hoạ có các hình đại diện cho kết quả mạng
Trong bản minh hoạ bài viết của chúng tôi, việc áp dụng content-visibility: auto cho các vùng nội dung chia nhỏ giúp tăng hiệu suất kết xuất gấp 7 lần trong lần tải ban đầu. Hãy đọc tiếp để tìm hiểu thêm.

Hỗ trợ trình duyệt

Hỗ trợ trình duyệt

  • Chrome: 85.
  • Cạnh: 85.
  • Firefox: 125.
  • Safari: 18.

Nguồn

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 đóng gói dưới dạng một tập hợp nội dung, cho phép trình duyệt suy luận về nội dung mà không 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 phương thức chứa CSS, mỗi loại là một giá trị tiềm năng cho thuộc tính CSS contain. Bạn có thể kết hợp các loại này trong một 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: Tính năng chứa Paint đảm bảo rằng các phần tử con của hộp chứa không hiển thị bên ngoài giới hạn của hộp đó. 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

Bạn có thể khó xác định giá trị chứa nào nên sử dụng, vì tính năng tối ưu hoá trình duyệt chỉ có thể kích hoạt khi bạn chỉ định một tập hợp thích hợp. 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 sẽ có vùng chứa layout, stylepaint. 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àuthử 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 các 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ụ: blog du lịch

Trong ví dụ này, chúng ta tạo đường cơ sở cho blog du lịch ở bên phải và áp dụng content-visibility: auto cho các khu vực chia thành nhiều đoạn ở bên trái. Kết quả cho thấy thời gian kết xuất thay đổi từ 232 mili giây đến 30 mili giây trong lần tải trang đầu tiên.

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. Trình duyệt định kiểu và bố trí tất cả nội dung của trang mà không xem xét liệu người dùng có nhìn thấy nội dung đó 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.

Trong bước 2, trình duyệt 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. Quá trình này sẽ mất thời gian.

Ảnh chụp màn hình một blog du lịch.
Ví dụ về một blog du lịch. Xem Bản minh hoạ trên Codepen

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 cũng giống như vậy: 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 thuộc tính content-visibility, thuộc tính này sẽ tạo kiểu và bố cục cho tất cả nội dung mà người dùng hiện có thể nhìn thấy (nội dung trên màn hình). Tuy nhiên, khi xử lý câu chuyện hoàn toàn nằm ngoài màn hình, trình duyệt sẽ bỏ qua công việc kết xuất và chỉ định kiểu và bố cục cho chính hộp phần tử.

Hiệu suất tải trang này sẽ giống như khi trang này chứa đầy đủ các câu chuyện trên màn hình và các hộp trống cho từng câu chuyện 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. Tức là 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:

Ảnh chụp màn hình có chú thích về việc phân đoạn nội dung thành các phần có lớp CSS.
Ví dụ về việc chia nội dung thành các phần bằng cách áp dụng lớp story để nhận content-visibility: auto. Xem Bản minh hoạ trên Codepen

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 có chiều cao được chỉ định trong bố cục khối thông thường, thì phần tử đó sẽ có chiều cao là 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ử đã áp dụng content-visibility: auto, sau đó cuộn phần tử đó ra khỏi màn hình, thì phần tử đó sẽ tự động giữ lại chiều rộng và chiều cao lý tưởng, đồng thời không quay lại kích thước phần giữ chỗ. Tính năng này đặc biệt hữu ích cho các trình cuộn vô hạn, giờ đây có thể tự động cải thiện khả năng ướ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 giữ nội dung không kết xuất bất kể nội dung đó có xuất hiện trên màn hình hay không, đồng thời tận dụng các lợi ích của trạng thái kết xuất được lưu trong bộ nhớ đệm? 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. Lớp này cũng 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 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ả công việc kết xuất và việc sử dụng thuộc tính CSS content-visiblity khi thích hợp có thể 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 được thực hiện.

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à Quy cách chứa CSS có nghĩa là một số tính năng tăng hiệu suất đáng kinh ngạc sẽ được đưa vào tệp CSS của bạn. Để biết thêm thông tin về các thuộc tính này, hãy xem: