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

Mariko Kosaka

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

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

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

सीपीयू और जीपीयू मुख्य रूप से कंप्यूटर पर काम करते हैं

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

CPU

CPU
इमेज 1: 4 कोर वाला सीपीयू, जिसमें ऑफ़िस में काम करने वाले कर्मचारी होते हैं. वे हर डेस्क पर बैठकर, उनके काम को मैनेज करते हैं

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

GPU

GPU
इमेज 2: कई जीपीयू कोर, जिनमें रेंच की सुविधा है. इनसे पता चलता है कि वे सीमित काम ही कर सकते हैं

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

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

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

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

प्रोसेस और थ्रेड
इमेज 4: बाउंडिंग बॉक्स के तौर पर प्रोसेस, प्रक्रिया में तैरती ऐब्स्ट्रैक्ट मछली की तरह धागे

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

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

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

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

कर्मचारी प्रक्रिया और IPC
इमेज 6: आईपीसी पर बातचीत करने वाली अलग-अलग प्रोसेस का डायग्राम

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

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

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

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

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

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

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

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

नीचे दी गई टेबल में, Chrome की हर प्रोसेस और उसके कंट्रोल के बारे में बताया गया है:

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

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

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

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

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

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

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

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

ज़्यादा मेमोरी बचाना - Chrome में सेवा की सुविधा

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

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

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

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

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

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

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

आखिर में खास जानकारी

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

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

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