Transisi Tampilan SPA yang Lebih Cepat melalui Cache Status

Fitur web: content-visibility

Aktifkan navigasi instan antar-tampilan di Aplikasi Web Satu Halaman (SPA) dengan meng-cache status tampilan tidak aktif yang dirender, bukan menghancurkannya.

Ringkasan

Biasanya, saat pengguna berpindah antar-tab atau tampilan di SPA, developer akan menghancurkan tampilan lama atau menyembunyikannya menggunakan display: none. Kedua pendekatan tersebut mengharuskan browser membuat ulang atau menghitung ulang tata letak dan rendering penuh saat pengguna kembali ke tampilan tersebut.

Dengan menggunakan content-visibility: hidden pada tampilan yang tidak aktif, browser akan menghapus konten elemen dari alur tata letak dan berhenti merendernya, tetapi mempertahankan status rendering yang di-cache dalam memori. Saat pengguna beralih kembali, tampilan akan dipulihkan hampir seketika.

Kompromi CPU vs. RAM

Meskipun pendekatan ini menawarkan manfaat performa yang sangat besar, pendekatan ini menimbulkan konsekuensi tertentu yang harus Anda kelola dengan cermat:

  • Penghematan CPU: Sangat besar. Browser sepenuhnya melewati proses tata letak dan gambar untuk tampilan tersembunyi.
  • Biaya RAM: Tinggi. Browser menyimpan semua node DOM, pemroses peristiwa, dan status untuk tampilan tersembunyi dalam memori.

Saat Kompromi Ini Menjadi Berbahaya

  • LAKUKAN penggunaan strategi ini untuk aplikasi sederhana dengan jumlah tampilan yang kecil dan dapat diprediksi (misalnya, antarmuka dengan 3 hingga 5 tab).
  • JANGAN meng-cache setiap tampilan tanpa syarat dalam aplikasi yang sangat dinamis yang menghasilkan puluhan laporan unik atau menggunakan rute dinamis tanpa batas. Tindakan ini pada akhirnya akan menyebabkan pembengkakan memori yang parah dan dapat membuat browser error di perangkat kelas bawah.
  • WAJIB: Jika aplikasi Anda sangat dinamis, Anda HARUS menerapkan strategi penghapusan (seperti cache Least Recently Used) untuk menghancurkan tampilan lama saat batas memori tercapai.

Penerapan

1. Mengonfigurasi Penampung Tampilan

Tetapkan content-visibility: hidden pada tampilan yang saat ini tidak aktif.

.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. Mengelola Fokus

Saat menukar tampilan, pastikan Anda mengelola fokus keyboard dengan benar untuk mempertahankan aksesibilitas.

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();
}

Strategi penggantian

Properti content-visibility menurun secara halus. Di browser yang tidak mendukungnya:

  • Properti diabaikan.
  • Untuk mencegah browser penggantian merender semua tampilan secara bersamaan, Anda harus memberikan penggantian ke display: none di CSS:
@supports not (content-visibility: hidden) {
  .spa-view.inactive {
    display: none;
  }
}