Trì hoãn việc kết xuất nội dung nặng

Các trang web có nội dung phong phú (chẳng hạn như cuộn vô hạn, trang tổng quan phức tạp hoặc bài viết dày đặc) có thể bị chậm khi hiển thị lần đầu và tương tác chậm. Công nghệ web hiện đại cho phép bạn trì hoãn khối lượng công việc kết xuất cho nội dung không hiển thị ngay lập tức, giúp tăng đáng kể hiệu suất mà không ảnh hưởng đến khả năng hỗ trợ tiếp cận hoặc kỳ vọng của người dùng.

Để tối ưu hoá quá trình kết xuất, bạn có thể sử dụng thuộc tính CSS content-visibility và thuộc tính HTML hidden="until-found". Mặc dù cả hai đều giúp cải thiện hiệu suất, nhưng chúng phục vụ các trường hợp sử dụng riêng biệt.

Trường hợp sử dụng từng loại

Cách triển khai content-visibility: auto

Chọn nội dung ngoài màn hình

BẮT BUỘC: Bạn PHẢI xác định cẩn thận những phần tử nào nhận content-visibility: auto.

• NÊN nhắm đến các khối bố cục lớn, độc lập và nằm hoàn toàn bên dưới màn hình đầu tiên (ví dụ: các mục thẻ trong một nguồn cấp dữ liệu vô hạn, bình luận ở cuối hoặc các phần bố cục nặng ở dưới cùng).
• KHÔNG áp dụng thuộc tính này cho các phần tử trong khung nhìn ban đầu, trong màn hình đầu tiên. Việc này buộc trình duyệt phải đánh giá ranh giới hiển thị trước khi kết xuất, điều này lại làm chậm hiệu suất tải trang quan trọng.
• NÊN nhắm đến các phần tử có cấu trúc DOM nội bộ sâu hoặc phức tạp để tiết kiệm tối đa chi phí kết xuất.

Các bước triển khai

1. BẮT BUỘC: Xác định các phần nặng được xác nhận là nằm ngoài màn hình trong lần tải đầu tiên.
2. BẮT BUỘC: Áp dụng content-visibility: auto cho từng phần tử ngoài màn hình này.
3. BẮT BUỘC: Cung cấp kích thước cấu trúc bố cục ước tính bằng cách sử dụng contain-intrinsic-size trên mỗi phần tử.

Cách sử dụng contain-intrinsic-size

BẮT BUỘC: Bạn PHẢI ghép nối content-visibility: auto với contain-intrinsic-size. Nếu không, trình duyệt sẽ buộc phải thu gọn phần tử xuống chiều cao 0px khi ở ngoài màn hình, gây ra sự thay đổi bố cục nghiêm trọng và thanh cuộn nhảy khi người dùng cuộn.

Thuộc tính viết tắt CSS contain-intrinsic-size đóng vai trò là một phương diện phần giữ chỗ. Việc sử dụng từ khoá auto cho phép trình duyệt "ghi nhớ" kích thước chính xác sau khi phần tử được hiển thị, sử dụng kích thước được tính toán đó thay vì phần giữ chỗ nếu phần tử lại nằm ngoài màn hình.

Mã mẫu

/* DO ONLY apply this class to items OUTSIDE the initial layout viewport */
.heavy-section-deferred {
  /* MANDATORY: Skips rendering calculations when off-screen */
  content-visibility: auto;
  
  /* Mandatory: Provide an estimated size to prevent layouts shifts.
    - 'auto' is optional and enables the browser to remember the actual size
      once rendered. It must be paired with a <length> value to be used for
      the first render.
    - 'none' tells the browser not to apply any intrinsic width to this element.
      It can be used for either the height or the width value.
    - '150px' is the estimated height of this element. This can be any valid
      CSS <length> value.
   */
  contain-intrinsic-size: auto none auto 150px; 
}

Cách triển khai content-visibility: hidden

1. Xác định các phần nặng: Tìm các khối bố cục bị ẩn ban đầu (ví dụ: các hàng bổ sung trong bảng dữ liệu lớn).
2. Áp dụng CSS: Thêm content-visibility: hidden vào phần tử.
3. Hiện phần tử: Khi phần tử cần xuất hiện, hãy thay đổi thuộc tính content-visibility thành visible hoặc auto.

Mã mẫu

.cached-view {
  /* Hides content but caches rendering state */
  content-visibility: hidden;
}

.cached-view.is-active {
  content-visibility: visible;
}

Vì content-visibility: hidden loại trừ phần tử và các phần tử con của phần tử đó khỏi cây hỗ trợ tiếp cận và tính năng tìm trong trang, nên bạn KHÔNG ĐƯỢC sử dụng thuộc tính này nếu nội dung vẫn phải được tìm thấy khi bị ẩn. Nếu bạn cần nội dung bị ẩn vẫn có thể tìm kiếm được thông qua tính năng Tìm trong trang gốc, hãy sử dụng hidden="until-found" như mô tả trong phần Tìm kiếm nội dung bị ẩn.

Các phương pháp hay nhất

• NÊN sử dụng contain-intrinsic-size với content-visibility: auto. Nếu không, chiều cao sẽ phải được tính toán lại khi cuộn, gây ra hiện tượng nhảy bố cục khung nhìn hoặc lỗi hình ảnh.
• KHÔNG áp dụng content-visibility: auto cho các phần tử bên trong khung nhìn màn hình đầu tiên, vì việc này sẽ làm chậm quá trình hiển thị trang quan trọng.
• Xác minh khả năng hỗ trợ tiếp cận BẮT BUỘC: Khi áp dụng content-visibility: auto, bạn PHẢI xác minh khả năng tiếp cận tuần tự bằng bàn phím. Trong một số cấu hình công nghệ hỗ trợ, các nút ngoài màn hình sử dụng content-visibility: auto có thể bị loại trừ khỏi cây hỗ trợ tiếp cận hoặc các tuyến điều hướng tuần tự cho đến khi tiêu điểm được buộc phải di chuyển vào bên trong các nút đó. Kiểm thử thao tác di chuyển tuyến tính qua các ranh giới ngoài màn hình chỉ bằng bàn phím.

Chiến lược dự phòng

Dự phòng content-visibility

Khi không được hỗ trợ, content-visibility sẽ bị trình duyệt bỏ qua. Trong hầu hết các trường hợp, content-visibility: auto sẽ không cần phương án dự phòng, mặc dù nếu không có phương án dự phòng thì hiệu suất sẽ bị giảm. Trình duyệt không được hỗ trợ sẽ hiển thị hoàn toàn các phần tử content-visibility: hidden. Sử dụng tính năng phát hiện để triển khai phương án dự phòng.

/* Default for everyone */
.inactive {
  display: none;
}

/* Modern Browsers only */
@supports (content-visibility: hidden) {
 .inactive {
    display: block; /* Turn the layout box back on */
    content-visibility: hidden;
  }
}