Chuyển đổi chế độ xem SPA nhanh hơn thông qua tính năng lưu trạng thái vào bộ nhớ đệm

Tính năng web: content-visibility

Cho phép điều hướng tức thì giữa các thành phần hiển thị trong Ứng dụng trang đơn (SPA) bằng cách lưu trạng thái kết xuất của các thành phần hiển thị không hoạt động vào bộ nhớ đệm thay vì huỷ chúng.

Tổng quan

Thông thường, khi người dùng di chuyển giữa các thẻ hoặc chế độ xem trong SPA, nhà phát triển sẽ huỷ chế độ xem cũ hoặc ẩn chế độ xem đó bằng display: none. Cả hai phương pháp đều yêu cầu trình duyệt tạo lại hoặc tính toán lại toàn bộ bố cục và hiển thị khi người dùng quay lại chế độ xem đó.

Bằng cách sử dụng content-visibility: hidden trên các thành phần hiển thị không hoạt động, trình duyệt sẽ xoá nội dung của phần tử khỏi luồng bố cục và ngừng hiển thị nội dung đó, nhưng giữ lại trạng thái kết xuất được lưu vào bộ nhớ đệm. Khi người dùng chuyển về, chế độ xem sẽ khôi phục gần như ngay lập tức.

Sự đánh đổi giữa CPU và RAM

Mặc dù phương pháp này mang lại lợi ích lớn về hiệu suất, nhưng nó cũng có một điểm đánh đổi cụ thể mà bạn phải quản lý cẩn thận:

  • Tiết kiệm CPU: Rất nhiều. Trình duyệt hoàn toàn bỏ qua các lượt bố cục và vẽ cho các thành phần hiển thị bị ẩn.
  • Chi phí RAM: Cao. Trình duyệt lưu giữ tất cả các nút DOM, trình nghe sự kiện và trạng thái cho chế độ xem ẩn trong bộ nhớ.

Khi sự đánh đổi này trở nên nguy hiểm

  • NÊN sử dụng chiến lược này cho các ứng dụng đơn giản có số lượng khung hiển thị nhỏ và dễ dự đoán (ví dụ: giao diện có 3 đến 5 thẻ).
  • KHÔNG lưu mọi khung hiển thị vào bộ nhớ đệm một cách vô điều kiện trong các ứng dụng có tính linh động cao, tạo ra hàng chục báo cáo riêng biệt hoặc sử dụng các tuyến động vô hạn. Việc này cuối cùng sẽ gây ra tình trạng phình bộ nhớ nghiêm trọng và có thể làm trình duyệt gặp sự cố trên các thiết bị cấp thấp.
  • BẮT BUỘC: Nếu ứng dụng của bạn có tính linh động cao, bạn PHẢI triển khai chiến lược loại bỏ (chẳng hạn như bộ nhớ đệm Ít dùng gần đây nhất) để huỷ các thành phần hiển thị cũ khi đạt đến ngưỡng bộ nhớ.

Triển khai

1. Định cấu hình vùng chứa khung hiển thị

Đặt content-visibility: hidden trên các chế độ xem hiện không hoạt động.

.spa-view.inactive {
  /* MANDATORY: Use hidden to cache the rendering state of inactive views */
  content-visibility: hidden;
  
  /* Optional: Prevent hidden views from taking up physical space in layout flow */
  position: absolute;
}

2. Quản lý chế độ Tập trung

Khi hoán đổi khung hiển thị, hãy đảm bảo bạn quản lý tiêu điểm bàn phím đúng cách để duy trì khả năng hỗ trợ tiếp cận.

function switchToView(viewId) {
  // Hide all views
  document.querySelectorAll('.spa-view').forEach(view => {
    view.classList.add('inactive');
    view.setAttribute('aria-hidden', 'true');
  });
  
  // Show the target view
  const activeView = document.getElementById(viewId);
  activeView.classList.remove('inactive');
  activeView.setAttribute('aria-hidden', 'false');
  
  // MANDATORY: Move focus to the new view to ensure a logical tab-order
  activeView.focus();
}

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

Thuộc tính content-visibility sẽ giảm dần một cách linh hoạt. Trong các trình duyệt không hỗ trợ:

  • Thuộc tính này bị bỏ qua.
  • Để ngăn các trình duyệt dự phòng hiển thị tất cả các chế độ xem cùng một lúc, bạn nên cung cấp một phương án dự phòng cho display: none trong CSS:
@supports not (content-visibility: hidden) {
  .spa-view.inactive {
    display: none;
  }
}