आधुनिक वेब ब्राउज़र के बारे में बेहतर जानकारी (भाग 1)

मैरिको कोसाका

सीपीयू, जीपीयू, मेमोरी, और मल्टी-प्रोसेस आर्किटेक्चर

इस 4-भाग वाली ब्लॉग सीरीज़ में, हम Chrome ब्राउज़र के अंदर हाई-लेवल आर्किटेक्चर से लेकर रेंडरिंग पाइपलाइन की खास बातों पर नज़र डालेंगे. अगर आपने कभी सोचा है कि ब्राउज़र आपके कोड को काम करने वाली वेबसाइट में कैसे बदल देता है या आपको नहीं पता कि परफ़ॉर्मेंस को बेहतर बनाने के लिए किसी खास तकनीक का सुझाव क्यों दिया जाता है, तो यह सीरीज़ आपके लिए है.

इस सीरीज़ के पहले हिस्से के तौर पर, हम कंप्यूटिंग से जुड़ी मुख्य शब्दावली और Chrome की मल्टी-प्रोसेस आर्किटेक्चर पर एक नज़र डालेंगे.

कंप्यूटर के मुख्य हिस्से में सीपीयू और जीपीयू मौजूद होते हैं

ब्राउज़र के काम करने के माहौल को समझने के लिए, हमें कंप्यूटर के कुछ पुर्ज़ों और उनके काम करने के तरीके को समझने की ज़रूरत है.

CPU

CPU
इमेज 1: 4 सीपीयू (CPU) कोर, क्योंकि ऑफ़िस में काम करने वाले लोग, हर डेस्क पर काम करते हुए उन्हें हैंडल कर रहे हैं

पहला है Central Proose Unit - या CPU. CPU को आपके कंप्यूटर का मस्तिष्क माना जा सकता है. सीपीयू कोर की इमेज, जिसमें ऑफ़िस कर्मचारी के तौर पर दिखाया गया है. यह कई तरह के कामों को एक-एक करके मैनेज कर सकता है. यह ग्राहक के कॉल का जवाब देने का तरीका जानते हुए, गणित से लेकर कला तक सब कुछ संभाल सकता है. पुराने समय में, ज़्यादातर सीपीयू में एक चिप होता था. कोर एक ही चिप में मौजूद दूसरे सीपीयू की तरह होता है. आधुनिक हार्डवेयर में, आपको अक्सर एक से ज़्यादा कोर मिलते हैं, जिससे आपके फ़ोन और लैपटॉप को ज़्यादा कंप्यूटिंग पावर मिलती है.

जीपीयू

जीपीयू
इमेज 2: रेंच वाले कई जीपीयू कोर का सुझाव है कि वे सीमित टास्क को पूरा करें

रैफ़िक्स प्रोसेसिंग Unit - या GPU, कंप्यूटर का एक हिस्सा है. सीपीयू से अलग, जीपीयू में आसान काम हैं, लेकिन यह एक साथ कई कोर का काम करता है. जैसा कि इसके नाम से ही पता चलता है कि इसे सबसे पहले ग्राफ़िक की देखरेख के लिए डेवलप किया गया था. यही वजह है कि ग्राफ़िक के संदर्भ में "जीपीयू का इस्तेमाल करना" या "जीपीयू पर आधारित" का मतलब, तेज़ रेंडरिंग और आसानी से इंटरैक्शन करना है. हाल के सालों में, जीपीयू की मदद से चलने वाली कंप्यूटिंग से, सिर्फ़ जीपीयू पर ज़्यादा से ज़्यादा कंप्यूटेशन हासिल किए जा रहे हैं.

जब कंप्यूटर या फ़ोन पर कोई ऐप्लिकेशन चलाया जाता है, तो सीपीयू और जीपीयू का इस्तेमाल करके ऐप्लिकेशन चलाया जाता है. आम तौर पर, ऑपरेटिंग सिस्टम के तरीके इस्तेमाल करके, ऐप्लिकेशन सीपीयू और जीपीयू पर चलते हैं.

हार्डवेयर, ओएस, ऐप्लिकेशन
इमेज 3: कंप्यूटर आर्किटेक्चर की तीन लेयर. सबसे नीचे मशीन हार्डवेयर, बीच में ऑपरेटिंग सिस्टम, और सबसे ऊपर ऐप्लिकेशन.

प्रोसेस और थ्रेड पर प्रोग्राम चलाएं

प्रोसेस और थ्रेड
इमेज 4: बाउंडिंग बॉक्स की तरह प्रोसेस करना, प्रक्रिया के अंदर तैरती ऐब्स्ट्रैक्ट फ़िश की तरह धागे

ब्राउज़र आर्किटेक्चर के बारे में जानने से पहले, प्रोसेस और थ्रेड एक दूसरा सिद्धांत है. किसी प्रोसेस को ऐप्लिकेशन की ओर से चलाए जाने वाले प्रोग्राम के तौर पर बताया जा सकता है. थ्रेड वह होता है जो प्रोसेस के अंदर रहता है और अपने प्रोसेस के प्रोग्राम के किसी भी हिस्से को पूरा करता है.

जब कोई ऐप्लिकेशन शुरू किया जाता है, तो एक प्रोसेस बन जाती है. प्रोग्राम काम करने के लिए थ्रेड बना सकता है, लेकिन यह वैकल्पिक है. ऑपरेटिंग सिस्टम, प्रक्रिया को मेमोरी का एक "स्लैब" देता है, जिसके साथ काम करना होता है और ऐप्लिकेशन की सभी स्थितियों को उस निजी मेमोरी स्पेस में रखा जाता है. ऐप्लिकेशन बंद करने पर, यह प्रोसेस भी खत्म हो जाती है और ऑपरेटिंग सिस्टम मेमोरी खाली कर देता है.

प्रोसेस और मेमोरी
इमेज 5: मेमोरी स्पेस का इस्तेमाल करने और ऐप्लिकेशन डेटा को सेव करने की प्रक्रिया का डायग्राम

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

वर्कर प्रोसेस और IPC
इमेज 6: IPC पर जानकारी देने वाली अलग-अलग प्रोसेस का डायग्राम

ब्राउज़र आर्किटेक्चर

प्रोसेस और थ्रेड का इस्तेमाल करके वेब ब्राउज़र कैसे बनाया जाता है? खैर, यह कई अलग-अलग थ्रेड या कई अलग-अलग प्रोसेस वाली एक प्रोसेस हो सकती है, जिसमें IPC के बारे में कुछ थ्रेड होती हों.

ब्राउज़र आर्किटेक्चर
इमेज 7: प्रोसेस में अलग-अलग ब्राउज़र आर्किटेक्चर / थ्रेड डायग्राम

यहां ध्यान देने वाली बात यह है कि ये अलग-अलग आर्किटेक्चर, लागू करने की जानकारी हैं. वेब ब्राउज़र बनाने के लिए कोई मानक निर्देश नहीं है. किसी एक ब्राउज़र का तरीका दूसरे से पूरी तरह अलग हो सकता है.

इस ब्लॉग सीरीज़ को दिखाने के लिए, हम Chrome के नए आर्किटेक्चर का इस्तेमाल कर रहे हैं. इसके बारे में आठवीं इमेज में बताया गया है.

इसमें सबसे ऊपर ब्राउज़र प्रोसेस है, जो ऐप्लिकेशन के अलग-अलग हिस्सों को मैनेज करने वाली अन्य प्रोसेस के साथ मिलकर काम करती है. रेंडर करने की प्रोसेस के लिए, कई प्रोसेस बनाई जाती हैं और हर टैब को असाइन की जाती हैं. हाल के समय तक, Chrome ने हर टैब को अपनी सुविधा के हिसाब से एक प्रोसेस दी थी. अब वह हर साइट को उसकी अपनी प्रोसेस देने की कोशिश करता है, जिसमें iframes भी शामिल है (साइट आइसोलेशन देखें).

ब्राउज़र आर्किटेक्चर
इमेज 8: Chrome की मल्टी-प्रोसेस आर्किटेक्चर का डायग्राम. रेंडरर प्रोसेस में, एक से ज़्यादा लेयर दिखाई जाती हैं. इससे यह पता चलता है कि Chrome पर हर टैब के लिए, रेंडर करने की कई प्रोसेस चल रही हैं.

किस प्रोसेस से क्या कंट्रोल होता है?

यहां दी गई टेबल में, Chrome की हर प्रोसेस के बारे में जानकारी दी गई है. साथ ही, यह भी बताया गया है कि Chrome से किस प्रोसेस को कंट्रोल किया जाता है:

प्रोसेस और इससे क्या कंट्रोल होता है
ब्राउज़र पता बार, बुकमार्क, वापस जाएं और फ़ॉरवर्ड बटन सहित ऐप्लिकेशन के "chrome" भाग को नियंत्रित करता है.
वेब ब्राउज़र के अदृश्य और खास हिस्सों को भी हैंडल करता है, जैसे कि नेटवर्क अनुरोध और फ़ाइल ऐक्सेस.
रेंडर करने वाला टैब में ऐसी किसी भी चीज़ को कंट्रोल करता है, जहां वेबसाइट दिखती है.
प्लग इन यह वेबसाइट के इस्तेमाल किए जाने वाले सभी प्लगिन को कंट्रोल करती है, उदाहरण के लिए, Flash.
जीपीयू जीपीयू के टास्क को दूसरी प्रोसेस से अलग रखता है. इसे अलग प्रोसेस में बांटा जाता है, क्योंकि जीपीयू कई ऐप्लिकेशन से मिलने वाले अनुरोधों को हैंडल करके एक ही प्लैटफ़ॉर्म पर ड्रॉ करते हैं.
Chrome प्रोसेस करता है
इमेज 9: ब्राउज़र के यूज़र इंटरफ़ेस (यूआई) के अलग-अलग हिस्सों को ले जाने वाली अलग-अलग प्रोसेस

एक्सटेंशन प्रोसेस और यूटिलिटी प्रोसेस जैसी और भी कई प्रोसेस हैं. अगर आपको यह देखना है कि आपके Chrome में कितनी प्रोसेस चल रही हैं, तो सबसे ऊपर दाएं कोने में मौजूद, विकल्प मेन्यू आइकॉन पर क्लिक करें. इसके बाद, 'ज़्यादा टूल' चुनें और फिर टास्क मैनेजर को चुनें. इससे एक विंडो खुलेगी, जिसमें वर्तमान में चल रही प्रक्रियाओं की सूची होगी और यह भी कि वे कितने सीपीयू/मेमोरी का इस्तेमाल कर रहे हैं.

Chrome में मल्टी-प्रोसेस आर्किटेक्चर का फ़ायदा

पहले, मैंने बताया था कि Chrome एक से ज़्यादा रेंडरर प्रोसेस का इस्तेमाल करता है. सबसे आसान मामले में, आप कल्पना कर सकते हैं कि हर टैब की अपनी रेंडर करने की प्रक्रिया है. मान लें कि आपने 3 टैब खुले हुए हैं और हर टैब को किसी इंडिपेंडेंट रेंडरर प्रोसेस से चलाया जा रहा है.

अगर एक टैब काम करना बंद कर देता है, तो आप उस टैब को बंद कर सकते हैं और दूसरे टैब को चालू रखते हुए आगे बढ़ सकते हैं. अगर सभी टैब एक ही प्रोसेस पर चल रहे हैं, तो जब एक टैब काम करना बंद कर देता है, तो सभी टैब काम नहीं करते हैं. यह दुख की बात है.

टैब के लिए एक से ज़्यादा रेंडरर
इमेज 10: डायग्राम में, हर टैब पर चलने वाली कई प्रोसेस दिखाई गई हैं

ब्राउज़र के काम को कई प्रोसेस में अलग करने का एक और फ़ायदा सुरक्षा और सैंडबॉक्सिंग है. ऑपरेटिंग सिस्टम, प्रोसेस के खास अधिकारों को सीमित करने का एक तरीका उपलब्ध कराते हैं. इसलिए, ब्राउज़र कुछ खास सुविधाओं से कुछ प्रोसेस को सैंडबॉक्स कर सकता है. उदाहरण के लिए, Chrome ब्राउज़र उन प्रोसेस के लिए आर्बिट्ररी फ़ाइल ऐक्सेस पर पाबंदी लगाता है जो रेंडरर प्रोसेस जैसे आर्बिट्रेरी उपयोगकर्ता इनपुट को हैंडल करती हैं.

प्रोसेस का अपना निजी स्टोरेज होता है. इसलिए, इसमें अक्सर सामान्य इन्फ़्रास्ट्रक्चर (जैसे, Chrome का JavaScript इंजन V8) की कॉपी होती हैं. इसका मतलब है कि मेमोरी का ज़्यादा इस्तेमाल, क्योंकि उन्हें उस तरीके से शेयर नहीं किया जा सकता जैसे वे एक ही प्रोसेस में थ्रेड होने पर शेयर किए जाते. मेमोरी बचाने के लिए, Chrome कितनी प्रोसेस को स्पिन अप कर सकता है, इसकी सीमा तय करता है. यह सीमा इस आधार पर अलग-अलग होती है कि आपके डिवाइस में कितनी मेमोरी और सीपीयू (CPU) की क्षमता है. हालांकि, जब Chrome सीमा तक पहुंच जाता है तो वह एक ही प्रक्रिया में एक ही साइट से कई टैब चलाना शुरू कर देता है.

ज़्यादा मेमोरी सेव की जा रही है - Chrome में सेवाएं उपलब्ध हैं

ब्राउज़र प्रोसेस पर भी यही तरीका लागू किया जाता है. ब्राउज़र प्रोग्राम के हर हिस्से को एक सेवा के रूप में चलाने के लिए, Chrome आर्किटेक्चर में बदलाव कर रहा है ताकि उसे अलग-अलग प्रोसेस में बांटा जा सके या एक साथ जोड़ा जा सके.

सामान्य विचार यह है कि जब Chrome शक्तिशाली हार्डवेयर पर चल रहा हो, तो वह प्रत्येक सेवा को अधिक स्थिरता देने वाली अलग-अलग प्रक्रियाओं में विभाजित कर सकता है, लेकिन अगर यह किसी संसाधन-असीमित डिवाइस पर है, तो Chrome सेवाओं को मेमोरी फ़ुटप्रिंट बचाने वाली एक प्रक्रिया में संगठित करता है. इस बदलाव से पहले, कम मेमोरी के इस्तेमाल को इकट्ठा करने की प्रोसेस Android जैसे प्लैटफ़ॉर्म पर इस्तेमाल की गई है.

Chrome सर्वरिफ़िकेशन
इमेज 11: Chrome के सर्विसिफ़िकेशन का डायग्राम, जिसमें अलग-अलग सेवाओं को एक से ज़्यादा प्रोसेस और एक ब्राउज़र प्रोसेस में शामिल किया गया है

हर फ़्रेम के हिसाब से रेंडर करने की प्रोसेस - साइट आइसोलेशन

साइट आइसोलेशन Chrome में हाल ही में लॉन्च की गई सुविधा है. यह हर क्रॉस-साइट iframe के लिए, रेंडर करने की एक अलग प्रोसेस चलाती है. हम हर टैब मॉडल के लिए एक रेंडरर प्रोसेस के बारे में बात कर रहे हैं. इससे अलग-अलग साइटों के बीच मेमोरी स्पेस शेयर करके, क्रॉस-साइट iframe को एक ही रेंडरर प्रोसेस में चलाया जा सकता है. रेंडर करने की एक ही प्रक्रिया में a.com और b.com चलाना ठीक लग सकता है. एक ही मूल नीति वेब का मुख्य सुरक्षा मॉडल है; इससे पक्का होता है कि एक साइट, सहमति के बिना दूसरी साइटों का डेटा ऐक्सेस नहीं कर सकती. इस नीति को बायपास करना सुरक्षा हमलों का मुख्य लक्ष्य है. प्रोसेस आइसोलेशन, साइटों को अलग करने का सबसे असरदार तरीका है. मेल्टडाउन और स्पेक्टर की मदद से, यह बात साफ़ हो गई कि हमें प्रोसेस का इस्तेमाल करके साइटों को अलग करने की ज़रूरत है. जब Chrome 67 के बाद से डेस्कटॉप पर डिफ़ॉल्ट रूप से 'साइट आइसोलेशन' चालू होता है, तो किसी टैब में मौजूद हर क्रॉस-साइट iframe को रेंडर करने की एक अलग प्रोसेस मिलती है.

साइट आइसोलेशन
इमेज 12: साइट आइसोलेशन का डायग्राम; रेंडर करने की कई प्रोसेस, जो किसी साइट में iframes पर ले जाती हैं

साइट आइसोलेशन को चालू करने के लिए, इंजीनियरिंग की ज़रूरतों के हिसाब से कई सालों का काम किया गया है. साइट आइसोलेशन, रेंडर करने की अलग-अलग प्रोसेस असाइन करने जितना आसान नहीं है. यह iframe के एक-दूसरे से बात करने के तरीके को बुनियादी तौर पर बदल देता है. अलग-अलग प्रोसेस पर चल रहे iframes वाले पेज पर DevTools खोलने का मतलब है कि devtools को पर्दे के पीछे की गतिविधियों वाला काम लागू करना पड़ा, ताकि वे बिना किसी रुकावट के दिखें. यहां तक कि किसी पेज पर किसी शब्द को ढूंढने के लिए Ctrl+F का आसान इस्तेमाल करने का मतलब है कि रेंडर करने की अलग-अलग प्रोसेस में खोज करना. यह देखा जा सकता है कि ब्राउज़र इंजीनियर, 'साइट आइसोलेशन' को रिलीज़ करने की अहमियत को क्यों अहम मानते हैं!

रैप-अप

इस पोस्ट में, हमने ब्राउज़र आर्किटेक्चर के बारे में विस्तार से बताया है और मल्टी-प्रोसेस आर्किटेक्चर के फ़ायदों के बारे में बताया है. हमने Chrome में सेवाओं और साइट आइसोलेशन के बारे में भी जानकारी दी है, जो मल्टी-प्रोसेस आर्किटेक्चर से अच्छी तरह से संबंधित है. अगले पोस्ट में, हम इस बारे में गहराई से जानेंगे कि वेबसाइट दिखाने के लिए इन प्रोसेस और थ्रेड के बीच क्या होता है.

क्या आपको यह पोस्ट पसंद आई? अगर आगे की किसी पोस्ट के बारे में आपका कोई सवाल है या सुझाव है, तो हमें Twitter पर @kosamari से पूछें.

अगला: नेविगेशन में क्या होता है