🌎 🧀 🌚 जावास्क्रिप्ट इंजन मूल बातें: सामान्य रूप और इनलाइन कैशिंग। भाग 1 🙇🏻 🌂 🤵🏾

नमस्कार दोस्तों। अप्रैल के अंत में, हम एक नया पाठ्यक्रम "सूचना प्रणाली सुरक्षा" शुरू कर रहे हैं। और अब हम आपके साथ लेख का अनुवाद साझा करना चाहते हैं, जो निश्चित रूप से पाठ्यक्रम के लिए बहुत उपयोगी होगा। मूल लेख यहां पाया जा सकता है ।

लेख प्रमुख नींव का वर्णन करता है, वे सभी जावास्क्रिप्ट इंजनों के लिए आम हैं, और न केवल वी 8 के लिए , जिस पर इंजन ( बेनेडिक्ट और मटिया ) के लेखक काम कर रहे हैं। एक जावास्क्रिप्ट डेवलपर के रूप में, मैं कह सकता हूं कि जावास्क्रिप्ट इंजन कैसे काम करता है, इसकी एक गहरी समझ आपको कुशल कोड लिखने में मदद करेगी।

नोट : यदि आप पढ़े गए लेखों की तुलना में प्रस्तुतियाँ देखना पसंद करते हैं, तो इस वीडियो को देखें । यदि नहीं, तो इसे छोड़ें और पढ़ें।

पाइपलाइन (पाइपलाइन) जावास्क्रिप्ट इंजन

यह सब इस तथ्य से शुरू होता है कि आप जावास्क्रिप्ट कोड लिखते हैं। उसके बाद, जावास्क्रिप्ट इंजन स्रोत कोड को संसाधित करता है और इसे सार सिंटैक्स ट्री (एएसटी) के रूप में प्रस्तुत करता है। निर्मित एएसटी के आधार पर, दुभाषिया अंततः काम करने के लिए नीचे उतर सकता है और बायटेकोड उत्पन्न करना शुरू कर सकता है। बहुत बढ़िया! यह वह क्षण है जब इंजन जावास्क्रिप्ट कोड निष्पादित करता है।

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

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

जावास्क्रिप्ट इंजन में दुभाषिया पाइपलाइन / संकलक

अब आइए पाइपलाइन के उन हिस्सों पर करीब से नज़र डालें जो आपके जावास्क्रिप्ट कोड को निष्पादित करते हैं, अर्थात् जहाँ कोड की व्याख्या और अनुकूलन किया जाता है, और मुख्य जावास्क्रिप्ट इंजनों के बीच कुछ अंतरों को भी देखते हैं।

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

अगला एक पाइपलाइन है जो दिखाता है कि V8 कैसे काम करता है, क्रोम और नोड द्वारा उपयोग किए गए जावास्क्रिप्ट इंजन।

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

उदाहरण के लिए, मोज़िला का स्पाइडरमॉन्क जावास्क्रिप्ट इंजन, जो फ़ायरफ़ॉक्स और स्पाइडरनोड में उपयोग किया जाता है, थोड़ा अलग तरीके से काम करता है। इसमें एक नहीं, बल्कि दो अनुकूलन करने वाले कंपाइलर हैं। दुभाषिया एक बुनियादी संकलक (बेसलाइन संकलक) में अनुकूलित होता है, जो कुछ अनुकूलित कोड का उत्पादन करता है। कोड निष्पादन के दौरान एकत्र किए गए प्रोफाइलिंग डेटा के साथ, IonMonkey संकलक भारी-अनुकूलित कोड उत्पन्न कर सकता है। यदि सट्टा अनुकूलन विफल रहता है, तो IonMonkey बेसलाइन कोड पर वापस आ जाता है।

चक्र - एज और नोड- चक्र में उपयोग किया जाने वाला माइक्रोसॉफ्ट का जावास्क्रिप्ट इंजन, एक समान संरचना है और दो अनुकूलन कंपाइलर का उपयोग करता है। दुभाषिया SimpleJIT में अनुकूलित है (जहाँ JIT का अर्थ है “जस्ट-इन-टाइम कंपाइलर”, जो कि कुछ हद तक अनुकूलित कोड है। प्रोफाइलिंग डेटा के साथ, FullJIT और भी अधिक अनुकूलित कोड बना सकता है।

JavaScriptCore (संक्षिप्त रूप में JSC), Apple का जावास्क्रिप्ट इंजन जिसका उपयोग सफारी और रिएक्ट नेटिव द्वारा किया जाता है, में आमतौर पर तीन अलग-अलग अनुकूलन कंपाइलर होते हैं। LLInt एक निम्न-स्तर का दुभाषिया है जो बेस कंपाइलर के अनुकूल होता है, जो बदले में DFG (डेटा फ्लो ग्राफ) कंपाइलर के अनुकूल होता है, और यह पहले से ही FTL (फास्टर थान लाइट) कंपाइलर के अनुकूल होता है।

कुछ इंजनों में दूसरों की तुलना में अधिक अनुकूलन संकलक क्यों होते हैं? यह सभी समझौता है। दुभाषिया बायटेकोड को जल्दी से संसाधित कर सकता है, लेकिन अकेले बायोटेक विशेष रूप से कुशल नहीं है। दूसरी ओर, अनुकूलन करने वाला संकलन, थोड़ी देर काम करता है, लेकिन अधिक कुशल मशीन कोड का उत्पादन करता है। यह जल्दी से कोड (दुभाषिया) प्राप्त करने या अधिकतम प्रतीक्षा करने और अधिकतम प्रदर्शन के साथ कोड चलाने के बीच एक समझौता है (संकलक का अनुकूलन)। कुछ इंजन समय और दक्षता की विभिन्न विशेषताओं के साथ कई अनुकूलन करने वाले कंपाइलरों को जोड़ना चुनते हैं, जो आपको इस समझौता समाधान पर सबसे अच्छा नियंत्रण प्रदान करने और आंतरिक डिवाइस की अतिरिक्त जटिलता की लागत को समझने की अनुमति देता है। एक और व्यापार-बंद स्मृति उपयोग है, एक बेहतर समझ के लिए इस लेख को देखें ।

हमने विभिन्न जावास्क्रिप्ट इंजनों के लिए इंटरप्रेटर और ऑप्टिमाइज़र कंपाइलर पाइपलाइनों के बीच मुख्य अंतर की जांच की है। इन उच्च-स्तरीय अंतरों के बावजूद, सभी जावास्क्रिप्ट इंजनों की वास्तुकला समान है: इन सभी में एक पार्सर और किसी प्रकार का इंटरप्रेटर / कंपाइलर पाइपलाइन है।

जावास्क्रिप्ट वस्तु मॉडल

आइए देखें कि जावास्क्रिप्ट इंजन में और क्या-क्या चीजें हैं और जावास्क्रिप्ट ऑब्जेक्ट्स के गुणों तक पहुंच को गति देने के लिए वे कौन-सी तरकीबें इस्तेमाल करते हैं? यह पता चला है कि सभी मुख्य इंजन एक समान तरीके से ऐसा करते हैं।

ECMAScript विनिर्देश स्ट्रिंग ऑब्जेक्ट्स से मेल खाते के रूप में सभी ऑब्जेक्ट्स को गुण विशेषताओं से मेल खाता है ।

[[Value]] , विनिर्देश निम्नलिखित गुणों को परिभाषित करता है:

[[Writable]] यह निर्धारित करता है कि क्या किसी संपत्ति को फिर से सौंपा जा सकता है;
[[Enumerable]] यह निर्धारित करता है कि संपत्ति को लूप में प्रदर्शित किया गया है या नहीं;
[[Configurable]] यह निर्धारित करता है कि क्या किसी संपत्ति को हटाया जा सकता है।

अंकन [[ ]] अजीब लग रहा है, लेकिन यह है कि विनिर्देश जावास्क्रिप्ट में गुणों का वर्णन करता है। आप किसी भी दी गई वस्तु और संपत्ति के लिए अभी भी जावास्क्रिप्ट में Object.getOwnPropertyDescriptor का उपयोग करके ये गुण प्राप्त कर सकते हैं:

 const object = { foo: 42 }; Object.getOwnPropertyDescriptor(object, 'foo'); // → { value: 42, writable: true, enumerable: true, configurable: true }

ठीक है, इसलिए जावास्क्रिप्ट वस्तुओं को परिभाषित करता है। सरणियों के बारे में क्या?

आप विशेष वस्तुओं के रूप में सरणियों की कल्पना कर सकते हैं। अंतर केवल इतना है कि सरणियों में विशेष सूचकांक प्रसंस्करण होता है। यहाँ, एक सरणी इंडेक्स ECMAScript विनिर्देश में एक विशेष शब्द है। जावास्क्रिप्ट में सरणी में तत्वों की संख्या की सीमा है - 2 1 - 1 तक। एक सरणी इंडेक्स इस रेंज से कोई भी उपलब्ध इंडेक्स है, जो कि 0 से 2 is - 2 तक किसी भी पूर्णांक मूल्य है।

एक और अंतर यह है कि सरणियों में length की जादुई संपत्ति length ।

 const array = ['a', 'b']; array.length; // → 2 array[2] = 'c'; array.length; // → 3

इस उदाहरण में, सृजन के समय सरणी की लंबाई 2 है। फिर हम 2 को इंडेक्स करने के लिए एक और तत्व देते हैं और लंबाई अपने आप बढ़ जाती है।

जावास्क्रिप्ट सरणियों के साथ ही वस्तुओं को परिभाषित करता है। उदाहरण के लिए, सरणी सूचकांकों सहित सभी कुंजियों को स्ट्रिंग के रूप में स्पष्ट रूप से दर्शाया जाता है। सरणी का पहला तत्व कुंजी '0' के तहत संग्रहीत किया जाता है।

length संपत्ति सिर्फ एक और संपत्ति है जो गैर-गणना योग्य और गैर-विन्यास योग्य है।

जैसे ही किसी तत्व को सरणी में जोड़ा जाता है, जावास्क्रिप्ट स्वचालित रूप से length संपत्ति [[Value]] की विशेषता को अद्यतन करता है।

सामान्य तौर पर, हम कह सकते हैं कि सरणियाँ वस्तुओं के समान व्यवहार करती हैं।

गुणों तक पहुंच का अनुकूलन

अब जब हम जानते हैं कि ऑब्जेक्ट्स को जावास्क्रिप्ट में कैसे परिभाषित किया जाता है, तो आइए एक नज़र डालते हैं कि जावास्क्रिप्ट इंजन आपको वस्तुओं के साथ कुशलता से काम करने की अनुमति कैसे देते हैं।

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

 const object = { foo: 'bar', baz: 'qux', }; // Here, we're accessing the property `foo` on `object`: doSomething(object.foo); // ^^^^^^^^^^

आकार

जावास्क्रिप्ट कार्यक्रमों में, कई वस्तुओं के लिए समान संपत्ति कुंजी निर्दिष्ट करना काफी आम बात है। वे कहते हैं कि ऐसी वस्तुओं का आकार एक जैसा होता है ।

 const object1 = { x: 1, y: 2 }; const object2 = { x: 3, y: 4 }; // `object1` and `object2` have the same shape.

इसके अलावा आम यांत्रिकी एक ही रूप की वस्तुओं की संपत्ति तक पहुंच है:

 function logX(object) { console.log(object.x); // ^^^^^^^^ } const object1 = { x: 1, y: 2 }; const object2 = { x: 3, y: 4 }; logX(object1); logX(object2);

यह जानते हुए, जावास्क्रिप्ट इंजन अपने आकार के आधार पर किसी वस्तु की संपत्ति तक पहुंच का अनुकूलन कर सकते हैं। देखें कि यह कैसे काम करता है।

मान लीजिए कि हमारे पास गुण x और y के साथ कोई ऑब्जेक्ट है, तो यह शब्दकोश डेटा संरचना का उपयोग करता है, जिसके बारे में हमने पहले बात की थी; इसमें मुख्य तार होते हैं जो उनके संबंधित गुणों की ओर इशारा करते हैं।

यदि आप किसी संपत्ति का उपयोग करते हैं, जैसे कि object.y, जावास्क्रिप्ट इंजन कुंजी 'y' साथ एक JSObject की खोज करता है, तो इस क्वेरी से मेल खाने वाली संपत्ति विशेषताओं को लोड करता है और अंत में [[Value]] लौटाता है।

लेकिन इन संपत्ति विशेषताओं को स्मृति में कहाँ संग्रहीत किया जाता है? क्या हमें उन्हें JSObject के भाग के रूप में संग्रहीत करना चाहिए? यदि हम ऐसा करते हैं, तो हम बाद में इस फॉर्म के और ऑब्जेक्ट देखेंगे, जिस स्थिति में, JSObject में गुणों और विशेषताओं के नामों से युक्त एक संपूर्ण शब्दकोश को स्टोर करने के लिए जगह की बर्बादी होती है, क्योंकि संपत्ति के नाम एक ही फॉर्म की सभी वस्तुओं के लिए दोहराए जाते हैं। यह बहुत अधिक दोहराव का कारण बनता है और स्मृति की गलत व्याख्या करता है। अनुकूलन के लिए, इंजन ऑब्जेक्ट के आकार को अलग से संग्रहीत करते हैं।

इस Shape में [[Value]] को छोड़कर सभी संपत्ति के नाम और विशेषताएँ हैं। इसके बजाय, फ़ॉर्म में JSObject के अंदर ऑफसेट मान शामिल हैं, इसलिए जावास्क्रिप्ट इंजन को पता है कि मूल्यों को कहां देखना है। एक सामान्य फॉर्म के साथ प्रत्येक JSObject फॉर्म के एक विशिष्ट उदाहरण को इंगित करता है। अब प्रत्येक JSObject को केवल उन मानों को संग्रहीत करना है जो ऑब्जेक्ट के लिए अद्वितीय हैं।

जैसे ही हमारे पास बहुत सारी वस्तुएं होती हैं, फायदा स्पष्ट हो जाता है। उनकी संख्या कोई मायने नहीं रखती है, क्योंकि यदि उनके पास एक फॉर्म है, तो हम फॉर्म और संपत्ति के बारे में केवल एक बार जानकारी सहेजते हैं।

सभी जावास्क्रिप्ट इंजन अनुकूलन के साधन के रूप में रूपों का उपयोग करते हैं, लेकिन वे उन्हें सीधे shapes रूप में नाम नहीं देते shapes :

शैक्षणिक दस्तावेज उन्हें हिडन क्लासेस (जावास्क्रिप्ट कक्षाओं के समान) कहते हैं;
V8 उन्हें मैप्स कहता है;
चक्र उन्हें प्रकार कहता है;
JavaScriptCore उन्हें संरचनाएं कहता है;
स्पाइडरमोंकी उन्हें आकृतियाँ कहता है।

इस लेख में, हम उन्हें shapes देना जारी रखते shapes ।

संक्रमण श्रृंखला और पेड़

यदि आपके पास एक निश्चित आकार की वस्तु है, तो क्या होता है, लेकिन आप इसमें एक नई संपत्ति जोड़ते हैं? जावास्क्रिप्ट इंजन एक नए रूप को कैसे परिभाषित करता है?

 const object = {}; object.x = 5; object.y = 6;

प्रपत्र बनाते हैं जिसे जावास्क्रिप्ट इंजन में संक्रमण श्रृंखला कहा जाता है। यहाँ एक उदाहरण है:

एक वस्तु में शुरू में कोई गुण नहीं होता है; यह एक खाली रूप से मेल खाती है। निम्न अभिव्यक्ति इस ऑब्जेक्ट में मान 5 के साथ संपत्ति 'x' को जोड़ती है, फिर इंजन उस फॉर्म में जाता है जिसमें संपत्ति 'x' और मान 5 को पहली ऑफसेट में JSObject में जोड़ा जाता है। अगली पंक्ति संपत्ति 'y' जोड़ती है, फिर इंजन अगले पर जाता है ऐसा प्रपत्र जिसमें पहले से ही 'x' और 'y' , और ऑफसेट 1 पर JSObject के लिए 6 मान भी जोड़ता है।

नोट : जिस क्रम में गुण जोड़े जाते हैं वह प्रपत्र को प्रभावित करता है। उदाहरण के लिए, {x: 4, y: 5} का परिणाम {y: 5, x: 4} से भिन्न रूप में होगा।

हमें प्रत्येक फॉर्म के लिए संपूर्ण संपत्ति तालिका को संग्रहीत करने की भी आवश्यकता नहीं है। इसके बजाय, प्रत्येक फॉर्म को केवल एक नई संपत्ति जानने की जरूरत है जिसे वे इसमें शामिल करने की कोशिश कर रहे हैं। उदाहरण के लिए, इस मामले में, हमें बाद के रूप में 'x' के बारे में जानकारी संग्रहीत करने की आवश्यकता नहीं है, क्योंकि यह पहले श्रृंखला में पाया जा सकता है। इस कार्य के लिए, प्रपत्र अपने पिछले प्रपत्र के साथ विलीन हो जाता है।

यदि आप अपने जावास्क्रिप्ट कोड में ox लिखते हैं, तो जावास्क्रिप्ट 'x' गुण को संक्रमण श्रृंखला के लिए खोजेगा जब तक कि वह एक ऐसे रूप का पता नहीं लगाता है जिसमें पहले से ही 'x' गुण है।

लेकिन क्या होता है अगर संक्रमण श्रृंखला बनाना असंभव है? उदाहरण के लिए, क्या होता है यदि आपके पास दो खाली वस्तुएं हैं और आप उनमें विभिन्न गुण जोड़ते हैं?

 const object1 = {}; object1.x = 5; const object2 = {}; object2.y = 6;

इस स्थिति में, एक शाखा प्रकट होती है, और संक्रमण श्रृंखला के बजाय हमें एक संक्रमण वृक्ष मिलता है:

हम एक खाली वस्तु बनाते हैं और इसमें 'x' गुण जोड़ते हैं। नतीजतन, हमारे पास एक JSObject जिसमें एक एकल मान और दो रूप हैं: खाली और एकल 'x' गुण वाला एक रूप।

दूसरा उदाहरण इस तथ्य से शुरू होता है कि हमारे पास एक खाली वस्तु b , लेकिन फिर हम एक और गुण 'y' जोड़ते हैं। नतीजतन, यहां हमें रूपों की दो श्रृंखलाएं मिलती हैं, लेकिन अंत में हमें तीन श्रृंखलाएं मिलती हैं।

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

 const object1 = {}; object1.x = 5; const object2 = { x: 6 };

पहले उदाहरण में, हम एक खाली फॉर्म से शुरू करते हैं और एक श्रृंखला में जाते हैं जिसमें x भी होता है, जैसा कि हमने पहले देखा था।

object2 के मामले में object2 यह उन वस्तुओं को सीधे बनाने के लिए समझ में आता है जिनके पास पहले से ही x है, जो एक खाली वस्तु और एक संक्रमण के साथ शुरू करने के बजाय बहुत शुरुआत से है।

किसी ऑब्जेक्ट का शाब्दिक गुण जिसमें 'x' होता है, एक फॉर्म के साथ 'x' से शुरू होता है, और खाली फॉर्म प्रभावी रूप से छोड़ दिया जाता है। यह (कम से कम) क्या V8 और स्पाइडरमोंकी है। अनुकूलन संक्रमण श्रृंखला को छोटा करता है और इसे शाब्दिक से वस्तुओं को इकट्ठा करने के लिए अधिक सुविधाजनक बनाता है।

इस तरह की सूक्ष्मता प्रदर्शन को कैसे प्रभावित कर सकती है, इस बारे में रिएक्ट पर अनुप्रयोगों के अद्भुत बहुरूपता पर बेनेडिक्ट के ब्लॉग पोस्ट।

इसके अलावा आपको गुण 'x' , 'y' , 'z' साथ त्रि-आयामी वस्तु के बिंदुओं का एक उदाहरण दिखाई देगा।

 const point = {}; point.x = 4; point.y = 5; point.z = 6;

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

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

एक सेकंड रुको, अब हम शब्दकोश खोज पर लौटते हैं ... यह वही है जो हमने तब शुरू किया था जब हमने पहले स्थान पर फॉर्म डाले थे! तो हम भी रूपों की परवाह क्यों करते हैं?
तथ्य यह है कि फॉर्म इनलाइन कैश नामक एक अन्य अनुकूलन में योगदान करते हैं ।

हम लेख के दूसरे भाग में इनलाइन कैश या आईसीएस की अवधारणा के बारे में बात करेंगे, लेकिन अब हम आपको एक मुफ्त खुले वेबिनार में आमंत्रित करना चाहते हैं, जो 9 अप्रैल को प्रसिद्ध वायरल विश्लेषक और अंशकालिक शिक्षक, अलेक्जेंडर केलोनिकोव द्वारा आयोजित किया जाएगा।

जावास्क्रिप्ट इंजन मूल बातें: सामान्य रूप और इनलाइन कैशिंग। भाग 1

More articles: