स्टेट कैश मेमोरी की मदद से, एसपीए व्यू ट्रांज़िशन को तेज़ बनाना

एक पेज के ऐप्लिकेशन (एसपीए) में, अलग-अलग व्यू के बीच तुरंत नेविगेट करने की सुविधा चालू करें. इसके लिए, इनऐक्टिव व्यू को मिटाने के बजाय, उनके रेंडर किए गए स्टेटस को कैश मेमोरी में सेव करें.

खास जानकारी

आम तौर पर, जब कोई उपयोगकर्ता किसी एसपीए में टैब या व्यू के बीच नेविगेट करता है, तो डेवलपर पुराने व्यू को मिटा देते हैं या display: none का इस्तेमाल करके उसे छिपा देते हैं. दोनों ही तरीकों में, जब उपयोगकर्ता उस व्यू पर वापस आता है, तो ब्राउज़र को पूरे लेआउट और पेंट को फिर से बनाना या फिर से कैलकुलेट करना पड़ता है.

इनऐक्टिव व्यू पर content-visibility: hidden का इस्तेमाल करने से, ब्राउज़र एलिमेंट के कॉन्टेंट को लेआउट फ़्लो से हटा देता है और उसे रेंडर करना बंद कर देता है. हालांकि, वह मेमोरी में रेंडरिंग की कैश मेमोरी में सेव की गई स्थिति को बरकरार रखता है. जब उपयोगकर्ता वापस स्विच करता है, तो व्यू तुरंत पहले जैसा हो जाता है.

सीपीयू बनाम रैम ट्रेड-ऑफ़

इस तरीके से परफ़ॉर्मेंस में काफ़ी फ़ायदे मिलते हैं. हालांकि, इसमें एक खास समझौता करना पड़ता है, जिसे आपको ध्यान से मैनेज करना होगा:

• सीपीयू की बचत: बहुत ज़्यादा. ब्राउज़र, छिपे हुए व्यू के लिए लेआउट और पेंट पास को पूरी तरह से स्किप कर देता है.
• रैम की लागत: ज़्यादा. ब्राउज़र, छिपे हुए व्यू के लिए सभी डीओएम नोड, इवेंट लिसनर, और स्टेटस को मेमोरी में सेव रखता है.

जब यह समझौता खतरनाक हो जाता है

• इस रणनीति का इस्तेमाल, छोटे और आसान ऐप्लिकेशन के लिए करें. इनमें व्यू की संख्या कम और अनुमानित होती है. जैसे, तीन से पांच टैब वाला इंटरफ़ेस.
• ऐसे डाइनैमिक ऐप्लिकेशन में हर व्यू को बिना किसी शर्त के कैश मेमोरी में सेव न करें जो दर्जनों यूनीक रिपोर्ट जनरेट करते हैं या डाइनैमिक रूट का इस्तेमाल करते हैं. ऐसा करने से, मेमोरी में बहुत ज़्यादा डेटा भर जाएगा और कम क्षमता वाले डिवाइसों पर ब्राउज़र क्रैश हो सकता है.
• ज़रूरी: अगर आपका ऐप्लिकेशन बहुत डाइनैमिक है, तो आपको मेमोरी खाली करने की रणनीति (जैसे, हाल ही में इस्तेमाल की गई कैश मेमोरी) लागू करनी होगी. इससे मेमोरी की सीमा पूरी होने पर, पुराने व्यू मिटाए जा सकेंगे.

लागू करना

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 के लिए फ़ॉलबैक देना चाहिए:

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