انتقالات أسرع في العرض في تطبيقات الصفحة الواحدة من خلال تخزين الحالة مؤقتًا

يمكنك تفعيل التنقّل الفوري بين طرق العرض في تطبيق من صفحة واحدة (SPA) من خلال تخزين الحالة المعروضة لطرق العرض غير النشطة مؤقتًا بدلاً من إتلافها.

نظرة عامة

في السابق، عندما كان المستخدم يتنقّل بين علامات التبويب أو طرق العرض في تطبيق SPA، كان المطوّرون إما يحذفون طريقة العرض القديمة أو يخفونها باستخدام display: none. يتطلّب كلا النهجَين من المتصفّح إعادة إنشاء أو إعادة احتساب التنسيق الكامل وعرضه عندما يعود المستخدم إلى تلك الصفحة.

باستخدام content-visibility: hidden في طرق العرض غير النشطة، يزيل المتصفّح محتوى العنصر من مسار التنسيق ويتوقف عن رسمه، ولكنّه يحتفظ بحالة العرض المخزّنة مؤقتًا في الذاكرة. وعندما يعود المستخدم إلى العرض السابق، تتم استعادة العرض على الفور تقريبًا.

المفاضلة بين وحدة المعالجة المركزية (CPU) وذاكرة الوصول العشوائي (RAM)

على الرغم من أنّ هذا النهج يقدّم مزايا هائلة في الأداء، إلا أنّه يفرض مقايضة معيّنة يجب إدارتها بعناية:

• توفير وحدة المعالجة المركزية (CPU): كبير جدًا. يتخطّى المتصفّح تمامًا عمليات التخطيط والرسم للعروض المخفية.
• تكلفة ذاكرة الوصول العشوائي (RAM): مرتفعة يحتفظ المتصفّح بجميع عُقد DOM ومتتبِّعات الأحداث وحالة العرض المخفي في الذاكرة.

عندما تصبح هذه المقايضة خطيرة

• يُفضَّل استخدام هذه الاستراتيجية للتطبيقات البسيطة التي تحتوي على عدد صغير من طرق العرض التي يمكن توقّعها (على سبيل المثال، واجهة تتضمّن من 3 إلى 5 علامات تبويب).
• لا تخزِّن مؤقتًا كل طريقة عرض في التطبيقات الديناميكية للغاية التي تنشئ عشرات التقارير الفريدة أو تستخدم مسارات ديناميكية لا حصر لها. سيؤدي ذلك في النهاية إلى تضخّم الذاكرة بشكل كبير وقد يؤدي إلى تعطُّل المتصفّح على الأجهزة المنخفضة المواصفات.
• إجراء إلزامي: إذا كان تطبيقك ديناميكيًا للغاية، عليك تنفيذ استراتيجية إخلاء (مثل ذاكرة التخزين المؤقت الأقل استخدامًا مؤخرًا) لإزالة طرق العرض القديمة عند الوصول إلى حدّ الذاكرة.

التنفيذ

1. ضبط حاويات العرض

اضبط content-visibility: hidden على طرق العرض غير النشطة حاليًا.

.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. إدارة التركيز

عند تبديل طرق العرض، تأكَّد من إدارة تركيز لوحة المفاتيح بشكل صحيح للحفاظ على سهولة الاستخدام.

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

استراتيجيات احتياطية

تتراجع سمة content-visibility بشكل سلس. في المتصفّحات التي لا تتيح ذلك:

• يتم تجاهل السمة.
• لمنع المتصفحات الاحتياطية من عرض جميع طرق العرض في الوقت نفسه، يجب توفير عنصر احتياطي لـ display: none في CSS:

@supports not (content-visibility: hidden) {
  .spa-view.inactive {
    display: none;
  }
}