Browser Support
सिस्टम के रिसॉर्स कम होने पर, आधुनिक ब्राउज़र कभी-कभी पेजों को निलंबित कर देते हैं या उन्हें पूरी तरह खारिज कर देते हैं. आने वाले समय में, ब्राउज़र ऐसा पहले से करना चाहते हैं, ताकि वे कम बैटरी और मेमोरी का इस्तेमाल कर सकें. पेज लाइफ़साइकल एपीआई, लाइफ़साइकल हुक उपलब्ध कराता है, ताकि आपके पेज, उपयोगकर्ता अनुभव पर असर डाले बिना, ब्राउज़र के इन इंटरवेंशन को सुरक्षित तरीके से मैनेज कर सकें. एपीआई को देखकर पता लगाएं कि आपको अपने ऐप्लिकेशन में ये सुविधाएं लागू करनी चाहिए या नहीं.
बैकग्राउंड
ऐप्लिकेशन लाइफ़साइकल, आधुनिक ऑपरेटिंग सिस्टम के लिए संसाधनों को मैनेज करने का मुख्य तरीका है. Android, iOS, और Windows के नए वर्शन पर, ओएस कभी भी ऐप्लिकेशन को शुरू और बंद कर सकता है. इससे, इन प्लैटफ़ॉर्म को संसाधनों को बेहतर तरीके से मैनेज करने और उन्हें फिर से बांटने में मदद मिलती है, ताकि उपयोगकर्ता को ज़्यादा से ज़्यादा फ़ायदा मिल सके.
वेब पर, ऐप्लिकेशन के लाइफ़साइकल के लिए कोई समयसीमा तय नहीं की गई है. यहां ऐप्लिकेशन को कभी भी बंद नहीं किया जा सकता. एक साथ कई वेब पेज चलने पर, मेमोरी, सीपीयू, बैटरी, और नेटवर्क जैसे सिस्टम के ज़रूरी संसाधनों का इस्तेमाल ज़्यादा हो सकता है. इससे, असली उपयोगकर्ता को खराब अनुभव मिलता है.
वेब प्लैटफ़ॉर्म में लाइफ़साइकल की स्थितियों से जुड़े इवेंट लंबे समय से मौजूद हैं. जैसे, load,
unload, और
visibilitychange. हालांकि, इन इवेंट की मदद से डेवलपर, सिर्फ़ उपयोगकर्ता की ओर से लाइफ़साइकल की स्थिति में हुए बदलावों का जवाब दे सकते हैं. वेब को कम क्षमता वाले डिवाइसों पर भरोसेमंद तरीके से काम करने के लिए, ब्राउज़र को सिस्टम के संसाधनों को फिर से हासिल करने और उन्हें फिर से बांटने का तरीका चाहिए. इससे वे सभी प्लैटफ़ॉर्म पर संसाधनों का ज़्यादा बेहतर तरीके से इस्तेमाल कर पाएंगे.
असल में, आज के ब्राउज़र पहले से ही बैकग्राउंड टैब में मौजूद पेजों के लिए, संसाधनों को बचाने के लिए सक्रिय कदम उठाते हैं. साथ ही, कई ब्राउज़र (खास तौर पर Chrome) इस तरह के और भी कदम उठाना चाहते हैं, ताकि संसाधनों का इस्तेमाल कम से कम हो.
समस्या यह है कि डेवलपर के पास, सिस्टम की ओर से किए जाने वाले इस तरह के इंटरवेंशन के लिए तैयारी करने का कोई तरीका नहीं है. इसके अलावा, उन्हें यह भी नहीं पता कि ये इंटरवेंशन हो रहे हैं. इसका मतलब है कि ब्राउज़र को सावधानी से काम करना चाहिए, नहीं तो वेब पेजों के काम न करने का खतरा हो सकता है.
पेज लाइफ़साइकल एपीआई, इस समस्या को हल करने की कोशिश करता है:
- वेब पर लाइफ़साइकल स्टेटस के कॉन्सेप्ट को पेश करना और उसे स्टैंडर्ड बनाना.
- सिस्टम से शुरू होने वाली नई स्थितियों को तय करना, ताकि ब्राउज़र उन संसाधनों को सीमित कर सकें जिन्हें छिपे हुए या इनऐक्टिव टैब इस्तेमाल कर सकते हैं.
- नए एपीआई और इवेंट बनाना, ताकि वेब डेवलपर, सिस्टम से शुरू किए गए इन नए स्टेटस में ट्रांज़िशन के जवाब दे सकें.
इस समाधान की मदद से, वेब डेवलपर को सिस्टम के इंटरवेंशन के हिसाब से ऐप्लिकेशन बनाने में मदद मिलती है. साथ ही, इससे ब्राउज़र को सिस्टम के रिसॉर्स को ज़्यादा बेहतर तरीके से ऑप्टिमाइज़ करने में मदद मिलती है. इससे, वेब के सभी उपयोगकर्ताओं को फ़ायदा मिलता है.
इस पोस्ट के बाकी हिस्से में, पेज लाइफ़साइकल की नई सुविधाओं के बारे में बताया जाएगा. साथ ही, यह भी बताया जाएगा कि वे वेब प्लैटफ़ॉर्म की सभी मौजूदा स्थितियों और इवेंट से कैसे जुड़ी हैं. इसमें, हर राज्य में डेवलपर को किस तरह के काम करने चाहिए और किन कामों से बचना चाहिए, इसके लिए सुझाव और सबसे सही तरीके भी दिए जाएंगे.
पेज के लाइफ़साइकल की स्थितियों और इवेंट के बारे में खास जानकारी
पेज के लाइफ़साइकल की सभी स्थितियां अलग-अलग होती हैं और एक-दूसरे से अलग होती हैं. इसका मतलब है कि कोई पेज एक समय में सिर्फ़ एक स्थिति में हो सकता है. आम तौर पर, किसी पेज के लाइफ़साइकल स्टेटस में हुए ज़्यादातर बदलावों को डीओएम इवेंट की मदद से देखा जा सकता है. अपवादों के बारे में जानने के लिए, हर स्टेटस के लिए डेवलपर के सुझाव देखें.
पेज के लाइफ़साइकल की स्थितियों के साथ-साथ, उन इवेंट के बारे में बताने का सबसे आसान तरीका, डायग्राम का इस्तेमाल करना है जो उनके बीच ट्रांज़िशन का सिग्नल देते हैं:
राज्य
यहां दी गई टेबल में, हर राज्य के बारे में पूरी जानकारी दी गई है. इसमें उन संभावित स्थितियों की सूची भी होती है जो बदलाव से पहले और बाद में आ सकती हैं. साथ ही, डेवलपर बदलावों को देखने के लिए इवेंट का इस्तेमाल कर सकते हैं.
| स्थिति | ब्यौरा |
|---|---|
| चालू है |
अगर कोई पेज दिख रहा है और उस पर इनपुट फ़ोकस है, तो वह चालू स्थिति में होता है.
पिछली संभावित स्थितियां: |
| पैसिव |
अगर कोई पेज दिख रहा है और उस पर इनपुट फ़ोकस नहीं है, तो वह पैसिव स्थिति में होता है.
पिछली संभावित स्थितियां:
इसके बाद की संभावित स्थितियां: |
| छिपा हुआ |
अगर कोई पेज दिख नहीं रहा है, लेकिन उसे छिपाया नहीं गया है, तो उसकी स्थिति छिपा हुआ होती है.
पिछली संभावित स्थितियां:
इसके बाद की संभावित स्थितियां: |
| फ़्रीज़ हो गया |
फ़्रीज़ होने पर, ब्राउज़र पेज की
टास्क सूचियों में,
फ़्रीज़ किए जा सकने वाले
टास्क को तब तक निष्पादित नहीं करता, जब तक पेज फ़्रीज़ नहीं हो जाता. इसका मतलब है कि
JavaScript टाइमर और फ़ेच कॉलबैक जैसे काम नहीं होते. पहले से चल रहे टास्क पूरे हो सकते हैं. सबसे अहम बात यह है कि
ब्राउज़र, सीपीयू/बैटरी/डेटा के इस्तेमाल को कम करने के लिए पेजों को फ़्रीज़ करते हैं. साथ ही, वे ऐसा इसलिए भी करते हैं, ताकि बैक/फ़ॉरवर्ड नेविगेशन तेज़ी से काम कर सकें. इससे, पेज को फिर से लोड करने की ज़रूरत नहीं पड़ती.
पिछली संभावित स्थितियां:
इसके बाद की संभावित स्थितियां: |
| समझौता खत्म हो गया है |
जब ब्राउज़र किसी पेज को अनलोड करना शुरू कर देता है और उसे मेमोरी से हटा देता है, तो वह पेज बंद हो जाता है. इस स्थिति में, कोई भी नया टास्क शुरू नहीं किया जा सकता. साथ ही, अगर चल रहे टास्क बहुत देर तक चलते हैं, तो उन्हें बंद किया जा सकता है.
पिछली संभावित स्थितियां:
अगली स्थितियां: |
| खारिज किया गया |
जब ब्राउज़र, रिसॉर्स बचाने के लिए किसी पेज को अनलोड करता है, तो वह खारिज किया गया पेज माना जाता है. इस स्थिति में कोई भी टास्क, इवेंट कॉलबैक या किसी भी तरह का JavaScript नहीं चल सकता. ऐसा इसलिए होता है, क्योंकि आम तौर पर, संसाधनों की कमी की वजह से डेटा को खारिज किया जाता है. ऐसे में, नई प्रोसेस शुरू करना असंभव होता है. खारिज किया गया स्टेटस में, टैब और उसका टाइटल और फ़ैविकन, आम तौर पर उपयोगकर्ता को दिखता है. भले ही, पेज बंद हो गया हो.
पिछली संभावित स्थितियां:
अगली स्थितियां: |
इवेंट
ब्राउज़र कई इवेंट डिस्पैच करते हैं, लेकिन उनमें से सिर्फ़ कुछ ही इवेंट, पेज लाइफ़साइकल की स्थिति में संभावित बदलाव का संकेत देते हैं. नीचे दी गई टेबल में, लाइफ़साइकल से जुड़े सभी इवेंट के बारे में बताया गया है. साथ ही, यह भी बताया गया है कि ये इवेंट किन स्टेटस में ट्रांज़िशन कर सकते हैं.
| नाम | विवरण |
|---|---|
focus
|
किसी डीओएम एलिमेंट को फ़ोकस मिला है.
ध्यान दें:
पिछली स्थितियां:
मौजूदा स्थितियां: |
blur
|
किसी DOM एलिमेंट का फ़ोकस हट गया है.
ध्यान दें:
पिछली स्थितियां:
मौजूदा स्थितियां: |
visibilitychange
|
दस्तावेज़ की
पिछली संभावित स्थितियां: |