नेविगेशन में क्या होता है
यह चार भागों वाली ब्लॉग सीरीज़ का दूसरा हिस्सा है. इसमें Chrome के काम करने के तरीके के बारे में बताया गया है. पिछली पोस्ट में हमने देखा कि कितने अलग प्रोसेस और थ्रेड की मदद से ब्राउज़र के अलग-अलग हिस्सों को मैनेज किया जा सकता है. हमने इस बारे में गहराई से चर्चा की है कि हर प्रोसेस और थ्रेड में कम्यूनिकेशन होता है, ताकि वेबसाइट दिखाई जा सके.
आइए, वेब ब्राउज़िंग के एक आसान इस्तेमाल के उदाहरण पर नज़र डालें: आपको ब्राउज़र में यूआरएल टाइप करने के बाद ब्राउज़र में इंटरनेट से डेटा फ़ेच करता है और एक पेज दिखाता है. इस पोस्ट में, हम बात करेंगे कि जब उपयोगकर्ता किसी साइट का अनुरोध करता है और ब्राउज़र पेज को रेंडर करने के लिए तैयार होता है. इसे नेविगेशन भी कहा जाता है.
यह ब्राउज़र प्रोसेस से शुरू होता है
जैसा कि हमने इस बारे में पार्ट 1: सीपीयू, जीपीयू, मेमोरी, और मल्टी-प्रोसेस आर्किटेक्चर, टैब के बाहर की सभी चीज़ों को ब्राउज़र प्रोसेस मैनेज करती है. ब्राउज़र प्रोसेस में यूज़र इंटरफ़ेस (यूआई) थ्रेड जैसे थ्रेड होते हैं. ये थ्रेड और इनपुट फ़ील्ड ब्राउज़र है, वह नेटवर्क थ्रेड जो इंटरनेट से डेटा पाने के लिए नेटवर्क स्टैक का इस्तेमाल करता है. स्टोरेज थ्रेड जो फ़ाइलों वगैरह के ऐक्सेस को कंट्रोल करता है. जब पते में कोई यूआरएल टाइप किया जाता है बार पर, आपके इनपुट को ब्राउज़र प्रोसेस के यूज़र इंटरफ़ेस (यूआई) थ्रेड से मैनेज किया जाता है.
आसान नेविगेशन
पहला चरण: इनपुट मैनेज करना
जब कोई उपयोगकर्ता पता बार में टाइप करना शुरू करता है, तो सबसे पहले यूज़र इंटरफ़ेस (यूआई) थ्रेड में पूछा जाता है कि "क्या यह खोज क्वेरी या यूआरएल?". Chrome में, पता बार एक खोज इनपुट फ़ील्ड भी होता है. इसलिए, यूज़र इंटरफ़ेस (यूआई) थ्रेड को पार्स करने और तय करने की आवश्यकता है कि आपको किसी खोज इंजन पर भेजना है या आपके अनुरोध की साइट पर.
दूसरा चरण: नेविगेशन शुरू करें
जब कोई उपयोगकर्ता Enter दबाएं, तब यूज़र इंटरफ़ेस (यूआई) थ्रेड, साइट का कॉन्टेंट पाने के लिए नेटवर्क कॉल शुरू कर देता है. स्पिनर लोड हो रहा है टैब के कोने में दिखता है और नेटवर्क थ्रेड सही प्रोटोकॉल से गुज़रती है, जैसे कि डीएनएस लुकअप और अनुरोध के लिए TLS कनेक्शन स्थापित करना.
इस समय, नेटवर्क थ्रेड को एचटीटीपी 301 जैसा सर्वर रीडायरेक्ट हेडर मिल सकता है. ऐसी स्थिति में, नेटवर्क थ्रेड, यूज़र इंटरफ़ेस (यूआई) थ्रेड के साथ यह जानकारी देती है कि सर्वर रीडायरेक्ट करने का अनुरोध कर रहा है. इसके बाद, यूआरएल के लिए कोई दूसरा अनुरोध किया जाएगा.
तीसरा चरण: जवाब पढ़ें
रिस्पॉन्स का मुख्य हिस्सा (पेलोड) आने के बाद, नेटवर्क थ्रेड शुरुआती कुछ बाइट का पता लगाता है स्ट्रीम की ज़रूरत हो. रिस्पॉन्स के कॉन्टेंट-टाइप हेडर में यह बताया जाना चाहिए कि यह किस तरह का डेटा है, हालाँकि, यह जानकारी मौजूद नहीं है या गलत है, इसलिए MIME टाइप स्निफ़िंग यहां किया जाता है. यह एक "मुश्किल कारोबार" है जैसा कि सोर्स कोड में टिप्पणी की गई है. टिप्पणी पढ़कर जानें कि अलग-अलग ब्राउज़र, कॉन्टेंट-टाइप/पेलोड पेयर का इस्तेमाल कैसे करते हैं.
अगर रिस्पॉन्स कोई एचटीएमएल फ़ाइल है, तो अगला चरण रेंडरर को डेटा भेजना होगा प्रोसेस नहीं करते, लेकिन अगर यह एक ZIP फ़ाइल या कोई अन्य फ़ाइल है, तो इसका मतलब है कि यह एक डाउनलोड अनुरोध है, तो उन्हें डेटा डाउनलोड मैनेजर को भेजना होता है.
SafeBrowsing की जांच भी यहीं होती है. अगर डोमेन और रिस्पॉन्स का डेटा, नुकसान पहुंचाने वाली किसी जानी-पहचानी साइट से मेल खाता है, तो नेटवर्क थ्रेड अलर्ट का इस्तेमाल करें. इसके अलावा, रॉस ऑरिजिन आरईड बीलॉकिंग (CORB) की जांच की जाएगी, ताकि यह पक्का किया जा सके कि संवेदनशील क्रॉस-साइट डेटा को रेंडर करने की प्रोसेस में शामिल नहीं किया जा सकता.
चौथा चरण: रेंडरर बनाने की प्रोसेस ढूंढना
सभी जांच पूरी होने और नेटवर्क थ्रेड को भरोसा हो जाए कि ब्राउज़र को अनुरोध की गई साइट पर, नेटवर्क थ्रेड यूज़र इंटरफ़ेस (यूआई) थ्रेड को बताता है कि डेटा तैयार है. इसके बाद, यूज़र इंटरफ़ेस (यूआई) थ्रेड किसी वेब पेज की रेंडरिंग प्रोसेस को जारी रखने के लिए रेंडरर प्रोसेस करता है.
नेटवर्क अनुरोध को जवाब देने में कई सौ मिलीसेकंड लग सकते हैं, इसलिए इस प्रोसेस को तेज़ करने के लिए ऑप्टिमाइज़ेशन लागू किया जाता है. जब यूज़र इंटरफ़ेस (यूआई) थ्रेड किसी यूआरएल के लिए अनुरोध भेज रहा हो तो उसे पहले से पता है कि वह किस साइट पर नेविगेट कर रहा है. यूज़र इंटरफ़ेस (यूआई) थ्रेड नेटवर्क अनुरोध के साथ रेंडरर की प्रोसेस खोजने या शुरू करने की कोशिश करता है. इस तरह, अगर सब कुछ उम्मीद के मुताबिक रहता है, तो नेटवर्क थ्रेड के दौरान रेंडरर प्रोसेस पहले से ही स्टैंडबाय मोड में रहेगी मिला डेटा. अगर नेविगेशन किसी दूसरी साइट पर रीडायरेक्ट करता है, तो शायद इस स्टैंडबाय प्रोसेस का इस्तेमाल न किया जाए, इस मामले में, किसी और प्रोसेस की ज़रूरत पड़ सकती है.
पांचवां चरण: नेविगेशन शुरू करना
अब जब डेटा और रेंडरर प्रोसेस तैयार है, तो आईपीसी को ब्राउज़र प्रोसेस से रेंडर करने की प्रोसेस पूरी करता है. यह डेटा स्ट्रीम को भी पास करता है, ताकि रेंडरर प्रक्रिया HTML डेटा प्राप्त करती रह सकती है. ब्राउज़र प्रोसेस को इसकी पुष्टि सुनाई देने के बाद कि जो रेंडर करने की प्रोसेस में हो गए हों, नेविगेशन पूरा हो गया हो, और दस्तावेज़ लोड हो जाए शुरू होता है.
यहां पर, पता बार अपडेट होता है. सुरक्षा इंडिकेटर और साइट सेटिंग का यूज़र इंटरफ़ेस (यूआई), नए पेज की साइट की जानकारी. टैब के लिए सेशन के इतिहास को अपडेट किया जाएगा, ताकि बैक-फ़ॉरवर्ड बटन उस साइट पर आगे बढ़ेंगे जिस पर अभी-अभी नेविगेट किया गया है. टैब/सेशन को पहले जैसा करने के लिए किसी टैब या विंडो को बंद करने पर, सेशन का इतिहास डिस्क पर सेव हो जाता है.
अतिरिक्त चरण: शुरुआती लोड पूरा हुआ
नेविगेशन के पूरा हो जाने के बाद, रेंडरर प्रोसेस, रिसॉर्स लोड होने पर प्रोसेस होती है और
करें. इस चरण में क्या होता है, इसके बारे में हम अगली पोस्ट में विस्तार से बताएंगे. रेंडरर होने के बाद
"पूरी" प्रोसेस करो रेंडर करना शुरू करता है, तो यह एक IPC को वापस ब्राउज़र प्रोसेस पर भेज देता है (यह सब
पेज में सभी फ़्रेम पर onload इवेंट ट्रिगर हो गया है और एक्ज़ीक्यूट हो गया है). इस स्थिति में,
यूज़र इंटरफ़ेस (यूआई) थ्रेड, टैब पर लोड होने वाले स्पिनर को रोकता है.
मेरा कहना है, "खत्म", क्योंकि क्लाइंट साइड का JavaScript अब भी लोड हो सकता है और नए व्यू बनाने से जुड़ी ज़्यादा जानकारी चाहिए.
किसी दूसरी साइट पर जाना
इस्तेमाल में आसान नेविगेशन पूरा हुआ! लेकिन अगर कोई उपयोगकर्ता पता बार में अलग यूआरएल डाल दे, तो क्या होगा
फिर से? दूसरी साइट पर जाने के लिए, ब्राउज़र प्रोसेस एक ही चरण से गुज़रती है.
हालांकि, ऐसा करने से पहले, रेंडर की गई मौजूदा साइट की जांच करनी होगी.
beforeunload इवेंट.
beforeunload "इस साइट को छोड़ें?" बना सकता है. जब आप टैब से बाहर जाने या उसे बंद करने की कोशिश करें, तो चेतावनी पाएं.
आपके JavaScript कोड के साथ टैब के अंदर की सभी चीज़ों को रेंडरर प्रक्रिया प्रबंधित करती है, इसलिए
नया नेविगेशन अनुरोध आने पर, ब्राउज़र प्रोसेस को मौजूदा रेंडरर प्रोसेस की जांच करनी पड़ती है.
अगर नेविगेशन रेंडरर प्रोसेस से शुरू किया गया था (जैसे कि उपयोगकर्ता ने किसी लिंक पर क्लिक किया या
क्लाइंट-साइड JavaScript ने window.location = "https://newsite.com") रेंडरर प्रोसेस को चलाया है
पहली बार beforeunload हैंडलर की जांच करता है. इसके बाद, यह ब्राउज़र प्रोसेस जैसी ही प्रोसेस से गुज़रता है
नेविगेशन का अनुरोध किया जा सकता है. अंतर सिर्फ़ यह है कि नेविगेशन का अनुरोध
रेंडरर प्रोसेस में ट्रांसफ़र हो जाता है.
जब नया नेविगेशन, रेंडर की गई मौजूदा साइट के बजाय किसी दूसरी साइट पर किया जाता है, तो एक अलग रेंडर किया जाता है
नया नेविगेशन मैनेज करने के लिए प्रोसेस को कॉल किया जाता है और रेंडर करने की मौजूदा प्रोसेस को
unload जैसे इवेंट हैंडल करता है. ज़्यादा जानकारी के लिए, पेज लाइफ़साइकल की स्थितियों की खास जानकारी देखें
साथ ही, अलग-अलग इवेंट में हिस्सा लेने
Page Lifecycle API.
सर्विस वर्कर के मामले में
इस नेविगेशन प्रोसेस में हाल ही में हुआ एक बदलाव है सर्विस वर्कर. सर्विस वर्कर, लिखने का एक तरीका है आपके ऐप्लिकेशन कोड में नेटवर्क प्रॉक्सी; इससे वेब डेवलपर को यह तय करने में मदद मिलती है कि कैश मेमोरी में सेव करने की सुविधा मिलती है और नेटवर्क से नया डेटा कब मिलेगा. अगर सर्विस वर्कर को पेज लोड करने के लिए सेट किया गया है का है, तो नेटवर्क से डेटा के लिए अनुरोध करने की कोई ज़रूरत नहीं है.
याद रखने वाली ज़रूरी बात यह है कि सर्विस वर्कर एक JavaScript कोड होता है, जो रेंडरर में चलता है प्रोसेस. लेकिन जब नेविगेशन का अनुरोध आता है, तो ब्राउज़र प्रोसेस को यह कैसे पता चलता है कि साइट में सर्विस वर्कर?
सर्विस वर्कर के रजिस्टर होने पर, सर्विस वर्कर के दायरे को रेफ़रंस के तौर पर रखा जाता है (यहां स्कोप के बारे में ज़्यादा जानकारी दी गई है सर्विस वर्कर का लाइफ़साइकल लेख). नेविगेशन के दौरान, नेटवर्क थ्रेड, रजिस्टर किए गए सर्विस वर्कर के साथ डोमेन की जांच करती है स्कोप का इस्तेमाल करता है, तो अगर उस यूआरएल के लिए कोई सर्विस वर्कर रजिस्टर किया गया है, तो यूज़र इंटरफ़ेस (यूआई) थ्रेड में रेंडरर प्रोसेस सर्विस वर्कर कोड को एक्ज़ीक्यूट करने के लिए किया जा सकता है. सर्विस वर्कर, कैश मेमोरी से डेटा लोड कर सकता है और नेटवर्क से डेटा का अनुरोध करने की ज़रूरत है या वह नेटवर्क से नए संसाधनों का अनुरोध कर सकता है.
नेविगेशन पहले से लोड
आप देख सकते हैं कि ब्राउज़र प्रोसेस और रेंडरर प्रोसेस के बीच दोतरफ़ा यात्रा की वजह से देरी हो सकती है अगर सर्विस वर्कर आखिर में नेटवर्क से डेटा के लिए अनुरोध करने का फ़ैसला लेता है. नेविगेशन पेजों को पहले से लोड करने की सुविधा का इस्तेमाल करके, सर्विस वर्कर स्टार्टअप के साथ-साथ संसाधन लोड करके प्रोसेस को पूरा करता है. यह इन अनुरोधों को एक हेडर के साथ मार्क करता है. इससे सर्वर, ये अनुरोध; उदाहरण के लिए, पूरे दस्तावेज़ के बजाय हाल ही में अपडेट किया गया डेटा.
आखिर में खास जानकारी
इस पोस्ट में, हमने देखा कि नेविगेशन के दौरान क्या होता है और आपका वेब ऐप्लिकेशन कोड कैसे रिस्पॉन्स हेडर और क्लाइंट-साइड JavaScript, ब्राउज़र के साथ इंटरैक्ट करते हैं. ब्राउज़र के चरण जानना इससे नेटवर्क का डेटा हासिल किया जाता है. इससे यह समझने में आसानी होती है कि नेविगेशन जैसे एपीआई का इस्तेमाल क्यों किया गया है प्रीलोड डेवलप किया गया. अगले पोस्ट में, हम जानेंगे कि ब्राउज़र हमारी एचटीएमएल/सीएसएस/JavaScript का इस्तेमाल करें.
क्या आपको पोस्ट पसंद आई? अगर आपको आगे की पोस्ट के बारे में कोई सवाल पूछना है या सुझाव देना है, तो हमें बताएं नीचे टिप्पणी वाले सेक्शन में अपनी राय या Twitter पर @kosamari का इस्तेमाल करें.