Tối ưu hoá hoạt động tương tác trong bố cục phức tạp

Duy trì tốc độ khung hình cao (60 khung hình/giây) và loại bỏ độ trễ tương tác trong quá trình kéo và thả hoặc các đột biến nặng trong bố cục phức tạp, nhiều cột như bảng Kanban hoặc lưới dữ liệu lớn.

Tổng quan

Trong các bố cục phức tạp, việc thực hiện một thay đổi nhỏ đối với một mục (chẳng hạn như kéo thẻ hoặc chỉnh sửa ô) có thể kích hoạt phản ứng dây chuyền của các phép tính kiểu và bố cục, buộc trình duyệt phải chỉnh lại toàn bộ trang. Điều này dẫn đến tình trạng rớt khung hình và độ trễ cao của chỉ số Lượt tương tác đến nội dung hiển thị tiếp theo (INP).

Bằng cách áp dụng content-visibility: auto cho các vùng bố cục độc lập (như các cột trong bảng Kanban), bạn có thể tách riêng công việc kết xuất.

Cơ chế cho các thành phần trên màn hình

Bạn cần hiểu rõ cách content-visibility: auto mang lại lợi ích cho các phần tử đã hiển thị trên màn hình:

• Đối với các phần tử hiển thị, trình duyệt sẽ không bỏ qua quá trình kết xuất.
• Thay vào đó, lợi ích về hiệu suất hoàn toàn đến từ các vùng chứa CSS mà thuộc tính tự động thực thi (tức là bố cục, kiểu và màu vẽ).
• Vùng chứa này đóng vai trò như một ranh giới. Nếu một đột biến xảy ra bên trong một vùng chứa có áp dụng tính năng chứa, thì trình duyệt sẽ biết rằng các thay đổi không thể ảnh hưởng đến hình học hoặc kiểu của các phần tử bên ngoài vùng chứa đó. Quá trình dàn lại trang được tách biệt, ngăn việc tính toán lại bố cục chung.

Triển khai

1. Xác định vùng ngăn chặn

Áp dụng content-visibility: auto cho các vùng chứa lớn, độc lập, đại diện cho các đơn vị bố cục riêng biệt (ví dụ: cột lưới, danh sách bảng).

.board-column {
  /* Apply containment boundaries */
  content-visibility: auto;
  
  /* Mandatory: Provide a placeholder size to prevent layouts shifts.
     For a vertical column, define a reasonable width and height. 
     - '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.
     - '300px' is the estimated width of this element. This can be any valid
      CSS <length> value. Replace it with the expected width of your
      component.
     - '800px' is the estimated height of this element. This can be any valid
      CSS <length> value. Replace it with the expected height of your
      component.
   */
  contain-intrinsic-size: auto 300px auto 800px;
}

2. Quản lý hoạt động tương tác

Đảm bảo các hoạt động tương tác diễn ra bên trong cột được hưởng lợi từ vùng chứa.

// Example: Drag and drop item movement
function moveItemToColumn(itemId, columnId) {
  const item = document.getElementById(itemId);
  const column = document.getElementById(columnId);
  
  // The browser will only reflow this specific column, 
  // not the entire board layout!
  column.appendChild(item);
}

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

Thuộc tính này xuống cấp một cách linh hoạt. Trong các trình duyệt không được hỗ trợ:

• Thuộc tính này bị bỏ qua và các đột biến sẽ gây ra hiện tượng dàn lại bố cục chung tiêu chuẩn.
• Để đạt được hiệu ứng tách biệt tương tự trong các trình duyệt cũ, bạn có thể quay lại áp dụng tính năng chứa theo cách thủ công:

@supports not (content-visibility: auto) {
  .board-column {
    /* Manual fallback for containment */
    contain: layout style paint;
  }
}