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](https://web.dev/static/articles/content-visibility/image/demo-figures.jpg?authuser=5&hl=vi)
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
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
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:
- 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.
- 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.
- 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.
![Ảnh chụp màn hình của một blog du lịch.](https://web.dev/static/articles/content-visibility/image/a-screenshot-a-travel-bl-d12bedce7d152.jpg?authuser=5&hl=vi)
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:
![Ả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.](https://web.dev/static/articles/content-visibility/image/an-annotated-screenshot-9dac5c2e32b01.jpg?authuser=5&hl=vi)
story
để nhận được content-visibility: auto
. Xem Bản minh hoạ trên CodepenSau đó, 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: