🚜 🤳🏾 ⛑️ जावास्क्रिप्ट इंजन मूल बातें: प्रोटोटाइप अनुकूलन। भाग २ 🗼 ☸️ 🏴󠁧󠁢󠁥󠁮󠁧󠁿

शुभ दोपहर दोस्तों! पाठ्यक्रम "सूचना प्रणालियों की सुरक्षा" को लॉन्च किया गया है , इस संबंध में हम आपके साथ लेख के अंतिम भाग "जावास्क्रिप्ट इंजनों के मूल तत्व: प्रोटोटाइप का अनुकूलन" साझा कर रहे हैं, जिसका पहला भाग यहां पढ़ा जा सकता है ।

हम आपको यह भी याद दिलाते हैं कि वर्तमान प्रकाशन इन दो लेखों की एक निरंतरता है: “जावास्क्रिप्ट इंजन के मूल तत्व: सामान्य रूप और इनलाइन कैशिंग। भाग 1 " , " जावास्क्रिप्ट इंजन की मूल बातें: सामान्य रूप और इनलाइन कैशिंग। भाग 2 ” ।

कक्षाएं और प्रोटोटाइप प्रोग्रामिंग

अब जब हम जानते हैं कि जावास्क्रिप्ट वस्तुओं के गुणों का त्वरित उपयोग कैसे किया जाता है, तो हम जावास्क्रिप्ट कक्षाओं की अधिक जटिल संरचना पर एक नज़र डाल सकते हैं। जावास्क्रिप्ट में क्लास सिंटैक्स कैसा दिखता है:

class Bar { constructor(x) { this.x = x; } getX() { return this.x; } }

यद्यपि यह जावास्क्रिप्ट के लिए एक अपेक्षाकृत नई अवधारणा की तरह लगता है, यह प्रोटोटाइप प्रोग्रामिंग के लिए सिर्फ "सिंटैक्टिक चीनी" है जो हमेशा जावास्क्रिप्ट में उपयोग किया गया है:

 function Bar(x) { this.x = x; } Bar.prototype.getX = function getX() { return this.x; };

यहां हम getX प्रॉपर्टी को getX ऑब्जेक्ट को असाइन करते हैं। यह किसी अन्य ऑब्जेक्ट की तरह ही काम करेगा, क्योंकि जावास्क्रिप्ट में प्रोटोटाइप समान ऑब्जेक्ट हैं। जावास्क्रिप्ट जैसे प्रोटोटाइप प्रोग्रामिंग भाषाओं में, विधियों को प्रोटोटाइप के माध्यम से एक्सेस किया जाता है, जबकि फ़ील्ड विशिष्ट उदाहरणों में संग्रहीत की जाती हैं।

आइए Bar एक नए उदाहरण को बनाते समय क्या होता है, जिस पर हम foo कहेंगे।

 const foo = new Bar(true);

इस कोड का उपयोग करके बनाई गई एक आवृत्ति में एक एकल 'x' गुण है। foo प्रोटोटाइप Bar.prototype , जो Bar क्लास से संबंधित है।

इस Bar.prototype का स्वयं का रूप है, जिसमें एकमात्र गुण 'getX' , जिसका मान फ़ंक्शन 'getX' द्वारा निर्धारित किया जाता है, जिसे जब रिटर्न कहा जाता है। this.x प्रोटोटाइप Bar.prototype है, जो जावास्क्रिप्ट भाषा का हिस्सा है। Object.prototype प्रोटोटाइप पेड़ की जड़ है, जबकि इसका प्रोटोटाइप null ।

जब आप एक ही वर्ग का एक नया उदाहरण बनाते हैं, तो दोनों उदाहरणों का एक ही रूप होता है, जैसा कि हम पहले ही समझ चुके हैं। दोनों उदाहरण एक ही Bar.prototype ऑब्जेक्ट को इंगित करेंगे।

प्रोटोटाइप गुण तक पहुँचें

खैर, अब हम जानते हैं कि जब हम एक वर्ग को परिभाषित करते हैं और एक नया उदाहरण बनाते हैं तो क्या होता है। लेकिन क्या होता है अगर हम उदाहरण पर विधि कहते हैं, जैसा कि हमने निम्नलिखित उदाहरण में किया है?

 class Bar { constructor(x) { this.x = x; } getX() { return this.x; } } const foo = new Bar(true); const x = foo.getX(); // ^^^^^^^^^^

आप किसी भी विधि कॉल को दो अलग-अलग चरणों के रूप में मान सकते हैं:

 const x = foo.getX(); // is actually two steps: const $getX = foo.getX; const x = $getX.call(foo);

पहला कदम विधि को लोड करना है, जो वास्तव में प्रोटोटाइप की संपत्ति है (जिसका मूल्य एक फ़ंक्शन है)। एक उदाहरण के साथ एक फ़ंक्शन को कॉल करने के लिए दूसरा चरण है, उदाहरण के लिए, इस का मूल्य। आइए पहले चरण पर एक करीब से नज़र डालें जहाँ getX विधि को foo उदाहरण से getX किया गया है।

इंजन foo का एक उदाहरण शुरू करता है और महसूस करता है कि फार्म foo में कोई 'getX' , इसलिए इसे खोजने के लिए प्रोटोटाइप श्रृंखला से गुजरना पड़ता है। हम Bar.prototype , प्रोटोटाइप फॉर्म को देखते हैं, देखते हैं कि इसमें शून्य ऑफसेट पर 'getX' संपत्ति है। हम Bar.prototype में इस ऑफ़सेट का मान Bar.prototype और JSFunction getX को JSFunction getX जिसे हम खोज रहे थे।

जावास्क्रिप्ट का लचीलापन प्रोटोटाइप चेन लिंक को बदलने की अनुमति देता है, उदाहरण के लिए:

 const foo = new Bar(true); foo.getX(); // → true Object.setPrototypeOf(foo, null); foo.getX(); // → Uncaught TypeError: foo.getX is not a function

इस उदाहरण में, हम कहते हैं

 foo.getX()

दो बार, लेकिन हर बार इसके पूरी तरह से अलग अर्थ और परिणाम होते हैं। इसीलिए, इस तथ्य के बावजूद कि प्रोटोटाइप जावास्क्रिप्ट में केवल वस्तुएं हैं, एक प्रोटोटाइप के गुणों तक पहुंच को तेज करना नियमित इंजन के गुणों की अपनी पहुंच को गति देने की तुलना में जावास्क्रिप्ट इंजनों के लिए एक और भी अधिक महत्वपूर्ण कार्य है।

हर रोज़ अभ्यास में, प्रोटोटाइप गुण लोड करना एक काफी सामान्य ऑपरेशन है: ऐसा हर बार होता है जब आप एक विधि कहते हैं!

 class Bar { constructor(x) { this.x = x; } getX() { return this.x; } } const foo = new Bar(true); const x = foo.getX(); // ^^^^^^^^^^

इससे पहले, हमने इस बारे में बात की थी कि इंजन कैसे रूपों और इनलाइन कैश का उपयोग करके नियमित संपत्तियों के लोडिंग का अनुकूलन करते हैं। मैं एक ही आकार की वस्तुओं के लिए प्रोटोटाइप गुणों के लोडिंग को कैसे अनुकूलित कर सकता हूं? ऊपर से हमने देखा कि कैसे संपत्तियों को लोड किया जाता है।

इस विशेष मामले में बार-बार डाउनलोड के साथ जल्दी से ऐसा करने के लिए, आपको निम्नलिखित तीन चीजों को जानना होगा:

फॉर्म foo में 'getX' नहीं होता है और यह नहीं बदला है। इसका मतलब यह है कि किसी ने संपत्ति को जोड़कर या हटाकर या संपत्ति के गुणों में से एक को बदलकर फू वस्तु को नहीं बदला है।
फू प्रोटोटाइप अभी भी मूल Bar.prototype । इसलिए किसी ने Object.setPrototypeOf() का उपयोग करके या विशेष _proto_ गुण को असाइन करने के लिए प्रोटोटाइप foo को नहीं बदला।
Bar.prototype फॉर्म में 'getX' Bar.prototype 'getX' और यह परिवर्तित नहीं हुआ है। इसका मतलब यह है कि किसी ने संपत्ति को जोड़कर या हटाकर या संपत्ति गुणों में से एक को बदलकर Bar.prototype को नहीं बदला है।

सामान्य स्थिति में, इसका मतलब है कि आपको उदाहरण के एक चेक को स्वयं बनाने की जरूरत है और प्रत्येक प्रोटोटाइप के लिए दो और चेक को प्रोटोटाइप में शामिल करना होगा जिसमें वांछित संपत्ति शामिल है। 1 + 2 एन चेक, जहां एन उपयोग किए जाने वाले प्रोटोटाइप की संख्या है, इस मामले में इतना बुरा नहीं लगता है, क्योंकि प्रोटोटाइप श्रृंखला अपेक्षाकृत उथली है। हालांकि, इंजनों को अक्सर बहुत अधिक प्रोटोटाइप श्रृंखलाओं से निपटना पड़ता है, जैसा कि नियमित डोम कक्षाओं के साथ होता है। उदाहरण के लिए:

 const anchor = document.createElement('a'); // → HTMLAnchorElement const title = anchor.getAttribute('title');

हमारे पास एक HTMLAnchorElement और हम getAttribute() विधि को कॉल करते हैं। इस सरल तत्व के लिए श्रृंखला में पहले से ही 6 प्रोटोटाइप शामिल हैं! DOM के अधिकांश तरीके जो हमें रूचि देते हैं, वे HTMLAnchorElement प्रोटोटाइप में HTMLAnchorElement , बल्कि कहीं न कहीं श्रृंखला में हैं।

Element.prototype getAttribute() पद्धति Element.prototype । इसका मतलब है कि हर बार जब हम anchor.getAttribute() , तो जावास्क्रिप्ट इंजन की जरूरत है:

जाँच लें कि 'getAttribute' प्रति 'getAttribute' वस्तु नहीं है;
सत्यापित करें कि अंतिम प्रोटोटाइप HTMLAnchorElement.prototype ;
वहां 'getAttribute' की अनुपस्थिति की पुष्टि करें;
सत्यापित करें कि अगला प्रोटोटाइप HTMLElement.prototype ;
'getAttribute' से 'getAttribute' की अनुपस्थिति की पुष्टि 'getAttribute' ;
सत्यापित करें कि अगला प्रोटोटाइप Element.prototype ;
जांचें कि इसमें 'getAttribute' मौजूद है।

कुल 7 चेक। चूंकि इस प्रकार का कोड वेब पर काफी सामान्य है, इसलिए प्रोटोटाइप गुणों को लोड करने के लिए आवश्यक चेकों की संख्या को कम करने के लिए इंजन विभिन्न ट्रिक्स का उपयोग करते हैं।

पुराने उदाहरण पर लौटना जिसमें हमने केवल तीन चेक किए थे जब foo लिए 'getX' अनुरोध किया गया था:

 class Bar { constructor(x) { this.x = x; } getX() { return this.x; } } const foo = new Bar(true); const $getX = foo.getX;

प्रत्येक ऑब्जेक्ट के लिए जो वांछित संपत्ति वाले प्रोटोटाइप से पहले होता है, इस संपत्ति की अनुपस्थिति के लिए रूपों की जांच करना आवश्यक है। यह अच्छा होगा अगर हम किसी संपत्ति की अनुपस्थिति के लिए चेक के रूप में प्रोटोटाइप चेक पेश करके चेक की संख्या कम कर सकते हैं। संक्षेप में, यह वही है जो इंजन एक साधारण चाल के साथ करते हैं: उदाहरण के लिए प्रोटोटाइप लिंक को स्वयं संग्रहीत करने के बजाय, इंजन इसे रूप में संग्रहीत करते हैं।

प्रत्येक फॉर्म एक प्रोटोटाइप को इंगित करता है। इसका मतलब यह है कि हर बार प्रोटोटाइप foo बदलाव होने पर इंजन एक नए रूप में चला जाता है। अब हमें कुछ गुणों की अनुपस्थिति की पुष्टि करने के लिए ऑब्जेक्ट के केवल आकार की जांच करने की आवश्यकता है, साथ ही प्रोटोटाइप लिंक (प्रोटोटाइप लिंक की रक्षा) की रक्षा करना चाहिए।

इस दृष्टिकोण के साथ, हम पहुंच को गति देने के लिए आवश्यक जांचों की संख्या 2N + 1 से 1 + N तक कम कर सकते हैं। यह अभी भी एक काफी महंगा ऑपरेशन है, क्योंकि यह अभी भी श्रृंखला में प्रोटोटाइप की संख्या का एक रैखिक कार्य है। इंजन विशेष रूप से समान गुणों के अनुक्रमिक लोडिंग के मामले में चेक की संख्या को एक निश्चित स्थिर मान को कम करने के लिए विभिन्न चाल का उपयोग करते हैं।

वैधता कोशिकाएं

V8 इस उद्देश्य के लिए विशेष रूप से प्रोटोटाइप रूपों को संसाधित करता है। प्रत्येक प्रोटोटाइप का एक विशिष्ट रूप होता है जिसे अन्य वस्तुओं (विशेष रूप से, अन्य प्रोटोटाइप के साथ) के साथ साझा नहीं किया जाता है, और इनमें से प्रत्येक प्रोटोटाइप में एक विशेष ValidityCell होती है जो इसके साथ जुड़ी होती है।

यह ValidityCell हर बार अक्षम होती है जब कोई इसके साथ जुड़े प्रोटोटाइप या इसके ऊपर किसी अन्य प्रोटोटाइप को बदलता है। आइए देखें कि यह कैसे काम करता है।
बाद के प्रोटोटाइप डाउनलोड को तेज करने के लिए, V8 इनलाइन कैश को चार-फ़ील्ड स्थान पर रखता है:

जब इनलाइन कैश को पहली बार कोड को चलाने पर गर्म किया जाता है, तो V8 ऑफसेट को याद करता है, जिस पर प्रॉपर्टी को प्रोटोटाइप में पाया गया था, यह प्रोटोटाइप (उदाहरण के लिए, Bar.prototype ), उदाहरण स्वरूप (हमारे मामले में, फ़ॉर्म foo ), और वर्तमान ValidityCell को भी प्रोटोटाइप को बाइंड करता है। प्रपत्र के उदाहरण से (हमारे मामले में, Bar.prototype लिया गया है)।

अगली बार जब आप इनलाइन कैश का उपयोग करते हैं, तो इंजन को इंस्टेंस फॉर्म और ValidityCell जांच करने की आवश्यकता होती है। यदि यह अभी भी मान्य है, तो इंजन सीधे प्रोटोटाइप पर ऑफसेट का उपयोग करता है, अतिरिक्त खोज चरणों को छोड़ देता है।

जब आप प्रोटोटाइप बदलते हैं, तो एक नया फ़ॉर्म हाइलाइट किया जाता है, और पिछली ValidityCell सेल अक्षम होती है। इसकी वजह से, अगली बार शुरू होने पर इनलाइन कैश छोड़ दिया जाता है, जिससे खराब प्रदर्शन होता है।

आइए DOM तत्व के साथ उदाहरण पर वापस जाते हैं। Object.prototype में प्रत्येक परिवर्तन न केवल Object.prototype लिए इनलाइन कैश को अमान्य करता है, बल्कि इसके नीचे की श्रृंखला में किसी भी प्रोटोटाइप के लिए, सहित EventTarget.prototype , Node.prototype , Element.prototype , आदि को भी HTMLAnchorElement.prototype करता है।

वास्तव में, कोड निष्पादित करते समय Object.prototype को संशोधित करना एक भयानक प्रदर्शन हानि है। यह मत करो!

आइए, यह समझने के लिए एक विशिष्ट उदाहरण देखें कि यह कैसे काम करता है। कहें कि हमारे पास एक Bar वर्ग और एक loadX फ़ंक्शन है जो टाइप Bar की वस्तुओं पर एक विधि कहता है। हम एक ही वर्ग के उदाहरणों के साथ loadX फ़ंक्शन को कई बार कहते हैं।

 class Bar { /* … */ } function loadX(bar) { return bar.getX(); // IC for 'getX' on `Bar` instances. } loadX(new Bar(true)); loadX(new Bar(false)); // IC in `loadX` now links the `ValidityCell` for // `Bar.prototype`. Object.prototype.newMethod = y => y; // The `ValidityCell` in the `loadX` IC is invalid // now, because `Object.prototype` changed.

loadX में इनलाइन कैश अब loadX लिए ValidityCell को Bar.prototype । यदि आप तब संशोधित करते हैं ( Object.prototype ) Object.prototype , जो जावास्क्रिप्ट में सभी प्रोटोटाइप की जड़ है, तो ValidityCell अमान्य हो जाता है और मौजूदा इनलाइन कैश का उपयोग अगली बार नहीं किया जाएगा, जिसके परिणामस्वरूप खराब प्रदर्शन होगा।

Object.prototype को बदलना। Object.prototype हमेशा एक बुरा विचार है, क्योंकि यह परिवर्तन के समय लोड किए गए प्रोटोटाइप के लिए किसी भी इनलाइन कैश को अमान्य करता है। यहाँ एक उदाहरण है कि कैसे नहीं करना है:

 Object.prototype.foo = function() { /* … */ }; // Run critical code: someObject.foo(); // End of critical code. delete Object.prototype.foo;

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

आपको लगता है कि सफाई एक अच्छा विचार है, है ना? खैर, इस मामले में, यह स्थिति को और खराब करेगा! संपत्तियों को हटाने से Object.prototype परिवर्तन Object.prototype , इसलिए सभी इनलाइन कैश फिर से अक्षम हो जाते हैं, और इंजन को बहुत शुरुआत से फिर से काम शुरू करना पड़ता है।

संक्षेप में देना । इस तथ्य के बावजूद कि प्रोटोटाइप सिर्फ ऑब्जेक्ट हैं, उन्हें प्रोटोटाइप द्वारा विधि खोजों के प्रदर्शन को अनुकूलित करने के लिए जावास्क्रिप्ट इंजन द्वारा विशेष रूप से संसाधित किया जाता है। प्रोटोटाइप को अकेला छोड़ दें! या यदि आपको वास्तव में उनसे निपटने की आवश्यकता है, तो कोड को निष्पादित करने से पहले करें, इसलिए आप कम से कम इसके निष्पादन के दौरान अपने कोड को अनुकूलित करने के सभी प्रयासों को अमान्य नहीं करेंगे!

हम सामान्यीकरण

हमने सीखा कि जावास्क्रिप्ट कैसे वस्तुओं और वर्गों को संग्रहीत करता है, और कैसे फार्म, इनलाइन कैश और वैधता कोशिकाएं प्रोटोटाइप संचालन को अनुकूलित करने में मदद करती हैं। इस ज्ञान के आधार पर, हम समझ गए कि व्यावहारिक दृष्टिकोण से प्रदर्शन में सुधार कैसे किया जाए: प्रोटोटाइप को स्पर्श न करें! (या यदि आपको वास्तव में इसकी आवश्यकता है, तो कोड को निष्पादित करने से पहले करें)।

Part पहला भाग

क्या प्रकाशनों की यह श्रृंखला आपके लिए सहायक थी? टिप्पणियों में लिखें।

जावास्क्रिप्ट इंजन मूल बातें: प्रोटोटाइप अनुकूलन। भाग २

More articles: