מעברים מהירים יותר בין תצוגות SPA באמצעות שמירת מצב במטמון

אפשר להפעיל ניווט מיידי בין תצוגות באפליקציית דף יחיד (SPA) על ידי שמירת המצב שעבר רינדור של תצוגות לא פעילות במטמון במקום להשמיד אותן.

סקירה כללית

באופן מסורתי, כשמשתמש עובר בין כרטיסיות או תצוגות באפליקציית SPA, המפתחים משמידים את התצוגה הישנה או מסתירים אותה באמצעות display: none. בשתי הגישות, הדפדפן צריך ליצור מחדש או לחשב מחדש את הפריסה המלאה ולצבוע כשהמשתמש חוזר לתצוגה הזו.

כשמשתמשים ב-content-visibility: hidden בתצוגות לא פעילות, הדפדפן מסיר את תוכן הרכיב מתהליך הפריסה ומפסיק לצבוע אותו, אבל שומר את מצב הרינדור שלו במטמון בזיכרון. כשהמשתמש חוזר לתצוגה, היא משוחזרת כמעט באופן מיידי.

הפשרה בין מעבד (CPU) ל-RAM

לגישה הזו יש יתרונות עצומים מבחינת הביצועים, אבל היא כרוכה בפשרה ספציפית שצריך לנהל בזהירות:

• חיסכון במשאבי המעבד (CPU): עצום. הדפדפן מדלג לגמרי על שלבי הפריסה והצביעה של תצוגות מוסתרות.
• עלות RAM: גבוהה. הדפדפן שומר בזיכרון את כל צומתי ה-DOM, רכיבי ה-event listener והמצב של התצוגה המוסתרת.

מתי הפשרה הזו הופכת למסוכנת

• מומלץ להשתמש בשיטה הזו באפליקציות פשוטות עם מספר קטן וצפוי של תצוגות (למשל, ממשק עם 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;
  }
}