उपयोगकर्ता ब्राउज़र में लगभग किसी भी अन्य कंट्रोल की तुलना में बैक बटन का अधिक बार उपयोग करते हैं। वे उम्मीद करते हैं कि पिछला स्क्रीन तुरंत दिखाई दे, ठीक वहीं जहाँ उन्होंने छोड़ा था। आधुनिक ब्राउज़र बैक/फॉरवर्ड कैश, या bfcache के साथ उस उम्मीद को पूरा करते हैं। जब आप नेविगेट करते हैं, तो ब्राउज़र पेज को नष्ट करने के बजाय उसे मेमोरी में फ्रीज (freeze) कर देता है। जब आप वापस आते हैं, तो यह एक स्नैपशॉट को रीस्टोर कर देता है। ब्राउज़र HTML पार्सिंग, JavaScript को फिर से चलाने और लेआउट की पुनर्गणना करने को छोड़ देता है। परिणाम तुरंत महसूस होता है क्योंकि पेज कभी पूरी तरह से खत्म ही नहीं हुआ।
bfcache वास्तव में क्या करता है
एक सामान्य पेज लोड महंगा होता है। ब्राउज़र को रिसोर्स फेच करने, HTML को टोकनाइज़ करने, DOM बनाने, स्क्रिप्ट चलाने, स्टाइल को हल करने, लेआउट करने, पिक्सेल पेंट करने और लेयर्स को कंपोजिट करने की आवश्यकता होती है। bfcache पेज को RAM में फ्रीज्ड स्टेट में जीवित रखकर इनमें से लगभग सभी चीज़ों से बच जाता है। यह डिस्क कैश नहीं है। रेंडर किया गया पेज, जिसमें JavaScript हीप, स्क्रॉल पोजीशन और फॉर्म स्टेट शामिल है, तब तक मेमोरी में रहता है जब तक उपयोगकर्ता अगला पेज पढ़ रहा होता है। जब उपयोगकर्ता बैक पर क्लिक करता है, तो ब्राउज़र स्नैपशॉट को अनफ्रीज (thaw) करता है और एक pageshow इवेंट फायर करता है। पेज बिना नेटवर्क को छुए या शून्य से लेआउट दोबारा किए बिना फिर से शुरू हो जाता है। धीमे डिवाइस या अस्थिर कनेक्शन वाले उपयोगकर्ताओं के लिए, bfcache रिस्टोर और फ्रेश लोड के बीच का अंतर सैकड़ों मिलीसेकंड या उससे अधिक हो सकता है।
क्या इसे रोकता है
एक डेवलपर ने हाल ही में यह पता लगाने के लिए एक सटीक प्रयोग किया कि वास्तव में क्या bfcache को रोकता है। उन्होंने छह सरल पेज बनाए, जिनमें से प्रत्येक एक संदिग्ध ब्लॉकर का परीक्षण कर रहा था, फिर नेविगेट किया और बैक दबाया। परिणाम स्पष्ट थे।
बिना किसी असामान्य हेडर या स्क्रिप्ट वाला एक बेसलाइन पेज सफलतापूर्वक रीस्टोर हो गया। beforeunload लिसनर वाला पेज भी बिना किसी समस्या के रीस्टोर हो गया। आश्चर्यजनक रूप से, Cache-Control: no-store के साथ सर्व किया गया पेज भी bfcache में प्रवेश कर गया, जो पुराने दिशा-निर्देशों के विपरीत है। यहाँ तक कि एक लाइव ब्लॉग लेख भी, जो फ्रीज करने के लिए बहुत डायनेमिक लग सकता है, सफलतापूर्वक रीस्टोर हो गया।
दो पेज विफल रहे। unload इवेंट लिसनर वाले पेज को रीस्टोर नहीं किया जा सका। एक खुला WebSocket कनेक्शन वाला पेज भी ब्लॉक हो गया। ये दो विफलताएं उन जाल (traps) की ओर इशारा करती हैं जो हर दिन वास्तविक प्रोडक्शन साइट्स को पकड़ लेते हैं।
unload इवेंट का जाल
unload इवेंट लंबे समय से आखिरी सेकंड की सफाई (cleanup) के लिए सिग्नल के रूप में उपयोग किया जाता रहा है। डेवलपर्स इसका उपयोग एनालिटिक्स बीकन को फ्लश करने, टाइमर को खत्म करने या अस्थायी स्टेट को मिटाने के लिए करते हैं। समस्या यह है कि bfcache इस विचार पर बना है कि पेज वापस जीवित हो सकता है। यदि ब्राउज़र को unload लिसनर दिखता है, तो वह मान लेता है कि पेज पूरी तरह से नष्ट होने की अपेक्षा कर रहा है और उसे फ्रीज करने से इनकार कर देता है। इससे कोई फर्क नहीं पड़ता कि जुड़ा हुआ फंक्शन खाली है या नहीं। लिसनर की केवल उपस्थिति ही हर आधुनिक ब्राउज़र में कैशिंग को रोकने के लिए पर्याप्त है।
इसका विकल्प pagehide है। यह इवेंट तब फायर होता है जब पेज को bfcache के लिए फ्रीज किया जा रहा हो और तब भी जब इसे वास्तव में हटाया जा रहा हो। यदि आपको दोनों के बीच अंतर करने की आवश्यकता है, तो जब पेज bfcache में जा रहा हो, तो event.persisted प्रॉपर्टी true होती है। हालाँकि, अधिकांश टियरडाउन कार्यों के लिए, pagehide दोनों रास्तों को कवर करता है। सफाई के हर हिस्से को unload से हटाकर pagehide में ले जाएँ। फिर हर unload लिसनर को पूरी तरह से हटा दें, जिसमें थर्ड-पार्टी एनालिटिक्स स्निपेट्स या पुराने प्लगइन्स में छिपे लिसनर भी शामिल हैं।
एक्टिव कनेक्शन के जाल
एक खुला नेटवर्क या स्टोरेज कनेक्शन संकेत देता है कि आपका पेज अभी भी वास्तविक काम कर रहा है। ब्राउज़र नेविगेशन के समय सक्रिय रिसोर्स की सूची बनाता है। यदि उसे एक खुला WebSocket, एक सक्रिय WebRTC पीयर कनेक्शन, या एक लंबित IndexedDB कनेक्शन मिलता है, तो वह फ्रीज को रद्द कर देता है और पेज को सामान्य रूप से बंद कर देता है। जब बाइट्स अभी भी फ्लो हो रहे हों, तो स्नैपशॉट पर भरोसा नहीं किया जा सकता।
आपको इन रिसोर्स को pagehide लिसनर के अंदर बंद करना चाहिए। अपने WebSocket के close मेथड को कॉल करें। WebRTC पीयर कनेक्शन को बंद करें। किसी भी लंबित IndexedDB ट्रांजेक्शन को एबॉर्ट या कमिट करें। यदि आपके ऐप को उपयोगकर्ता के वापस आने पर उन चैनलों की आवश्यकता है, तो उन्हें pageshow के अंदर फिर से खोलें। यह close-on-pagehide, restore-on-pageshow पैटर्न कार्यक्षमता खोए बिना इंस्टेंट बैक नेविगेशन के लिए पेज को पात्र बनाए रखता है।
no-store का आश्चर्य
वर्षों तक, पारंपरिक धारणा यह थी कि Cache-Control: no-store bfcache को रोकता है। Chrome ने 2025 में उस व्यवहार को बदल दिया। no-store के साथ सर्व किया गया पेज अब bfcache में प्रवेश कर सकता है। ब्राउज़र फ्रीज किए गए स्नैपशॉट को केवल तभी बाद में हटाता है यदि ऑथेंटिकेशन स्टेट या कुकीज़ इस तरह से बदलती हैं जो सेव की गई स्टेट को अमान्य कर देती हैं। यदि आप no-store का उपयोग कर रहे हैं as