V8 के बारे में एक कहानी, प्रतिक्रिया और प्रदर्शन में गिरावट। भाग २

आज हम V8 के आंतरिक तंत्र को समर्पित सामग्री के अनुवाद और प्रतिक्रिया प्रदर्शन समस्या की जांच के दूसरे भाग को प्रकाशित कर रहे हैं।



→ पहला भाग

अप्रचलन और वस्तु रूपों का प्रवास

क्या होगा यदि प्रारंभ में फ़ील्ड में एक Smi , और फिर स्थिति बदल गई और इसके लिए एक मान संग्रहीत करने की आवश्यकता हुई जिसके लिए Smi प्रतिनिधित्व उपयुक्त नहीं है? उदाहरण के लिए, निम्नलिखित उदाहरण के रूप में, जब दो वस्तुओं को ऑब्जेक्ट के उसी रूप का उपयोग करके दर्शाया जाता है जिसमें x प्रारंभ में Smi रूप में संग्रहीत किया जाता है:

 const a = { x: 1 }; const b = { x: 2 }; //  `x`       `Smi` bx = 0.2; //  `bx`     `Double` y = ax; 

उदाहरण की शुरुआत में, हमारे पास दो ऑब्जेक्ट हैं, जिसके प्रतिनिधित्व के लिए हम ऑब्जेक्ट के उसी रूप का उपयोग करते हैं जिसमें x को संग्रहीत करने के लिए Smi स्वरूप का उपयोग किया जाता है।


वस्तुओं का प्रतिनिधित्व करने के लिए उसी रूप का उपयोग किया जाता है

जब bx संपत्ति में परिवर्तन होता है और आपको इसे दर्शाने के लिए Double प्रारूप का उपयोग करना पड़ता है, तो V8 ऑब्जेक्ट के नए आकार के लिए मेमोरी स्पेस आवंटित करता है, जिसमें x को Double प्रतिनिधित्व सौंपा गया है, और जो एक खाली फॉर्म को इंगित करता है। V8 भी MutableHeapNumber एक इकाई बनाता है, जिसका उपयोग x संपत्ति के मान 0.2 को संग्रहीत करने के लिए किया जाता है। फिर हम ऑब्जेक्ट b अपडेट करते हैं ताकि यह इस नए रूप को संदर्भित करता है और ऑब्जेक्ट में स्लॉट को बदल देता है ताकि यह ऑफसेट 0. पर पहले से बनाई गई MutableHeapNumber इकाई को MutableHeapNumber है। अंत में, हम ऑब्जेक्ट के पुराने रूप को अप्रचलित के रूप में चिह्नित करते हैं और इसे पेड़ से काट देते हैं। संक्रमण। यह हमारे द्वारा बनाए गए खाली फॉर्म से 'x' लिए एक नया संक्रमण बनाकर किया जाता है।


एक वस्तु संपत्ति के लिए एक नया मूल्य असाइन करने के परिणाम

इस समय, हम पुराने फ़ॉर्म को पूरी तरह से हटा नहीं सकते हैं, क्योंकि यह अभी भी ऑब्जेक्ट a द्वारा उपयोग किया जाता है। इसके अलावा, पुराने रूप को संदर्भित करने वाली सभी वस्तुओं की खोज में सभी मेमोरी को बायपास करना बहुत महंगा होगा, और तुरंत इन वस्तुओं की स्थिति को अपडेट करेंगे। इसके बजाय, V8 यहाँ एक "आलसी" दृष्टिकोण का उपयोग करता है। अर्थात्, ऑब्जेक्ट के गुणों को पढ़ने या लिखने के सभी ऑपरेशन पहले एक नए फॉर्म के उपयोग में स्थानांतरित a । इस क्रिया के पीछे का विचार अंततः वस्तु के अप्रचलित रूप को अप्राप्य बनाना है। इससे कचरा संग्रहकर्ता को इससे निपटना होगा।


आउट-ऑफ-फॉर्म मेमोरी कचरा कलेक्टर को मुक्त करती है

हालात उन स्थितियों में अधिक जटिल हैं जहां दृश्य बदलने वाला क्षेत्र श्रृंखला में अंतिम नहीं है:

 const o = {  x: 1,  y: 2,  z: 3, }; oy = 0.1; 

इस मामले में, V8 को तथाकथित विभाजन आकार खोजने की आवश्यकता है। यह श्रृंखला में अंतिम रूप है, जो उस रूप से पहले स्थित है जिसमें संबंधित संपत्ति दिखाई देती है। यहां हम y बदलते हैं, y - हमें अंतिम रूप खोजने की आवश्यकता है जिसमें कोई y नहीं था। हमारे उदाहरण में, यह वह रूप है जिसमें x प्रकट होता है।


अंतिम रूप के लिए खोजें जिसमें कोई परिवर्तित मूल्य नहीं था

यहां, इस फॉर्म के साथ शुरू करते हुए, हम y लिए एक नई संक्रमण श्रृंखला बनाते हैं जो पिछले सभी बदलावों को पुन: पेश करती है। केवल अब संपत्ति 'y' को एक Double रूप में दर्शाया जाएगा। अब हम इस नई परिवर्तन श्रृंखला का उपयोग y , इसे अप्रचलित पुराने सबट्री के रूप में चिह्नित करते हैं। अंतिम चरण में, हम एक नए रूप में o ऑब्जेक्ट के उदाहरण को माइग्रेट करते हैं, अब y MutableHeapNumber स्टोर करने के लिए MutableHeapNumber इकाई का उपयोग करते हैं। इस दृष्टिकोण के साथ, नई वस्तु पुराने संक्रमण के पेड़ के टुकड़े का उपयोग नहीं करेगी और, पुराने रूप के सभी संदर्भ गायब हो जाने के बाद, पेड़ का अप्रचलित भाग भी गायब हो जाएगा।

एक्स्टेंसिबिलिटी एंड ट्रांजिशन इंटीग्रिटी

Object.preventExtensions() कमांड आपको किसी ऑब्जेक्ट में नए गुणों को जोड़ने से पूरी तरह से रोकने की अनुमति देता है। यदि आप इस आदेश के साथ ऑब्जेक्ट को संसाधित करते हैं और इसमें एक नई संपत्ति जोड़ने का प्रयास करते हैं, तो एक अपवाद फेंक दिया जाएगा। (सही है, यदि कोड को सख्त मोड में निष्पादित नहीं किया गया है, तो एक अपवाद नहीं फेंका जाएगा, हालांकि, संपत्ति जोड़ने का प्रयास बस किसी भी परिणाम को जन्म नहीं देगा)। यहाँ एक उदाहरण है:

 const object = { x: 1 }; Object.preventExtensions(object); object.y = 2; // TypeError: Cannot add property y; //      object is not extensible 

Object.seal() विधि ऑब्जेक्ट पर उसी तरह से कार्य करती है जैसे Object.preventExtensions() , लेकिन यह सभी गुणों को भी कॉन्फ़िगर करने योग्य नहीं के रूप में चिह्नित करता है। इसका मतलब है कि उन्हें हटाया नहीं जा सकता है, न ही उनके गुणों को सूचीबद्ध करने, उन्हें स्थापित करने या फिर से लिखने की संभावनाओं के बारे में बदला जा सकता है।

 const object = { x: 1 }; Object.seal(object); object.y = 2; // TypeError: Cannot add property y; //      object is not extensible delete object.x; // TypeError: Cannot delete property x 

Object.freeze() विधि Object.freeze() के समान कार्य करती है, लेकिन इसके उपयोग के अलावा, इस तथ्य की ओर जाता है कि मौजूदा गुणों के मूल्यों को नहीं बदला जा सकता है। उन्हें उन गुणों के रूप में चिह्नित किया जाता है जिनमें नए मूल्य नहीं लिखे जा सकते हैं।

 const object = { x: 1 }; Object.freeze(object); object.y = 2; // TypeError: Cannot add property y; //      object is not extensible delete object.x; // TypeError: Cannot delete property x object.x = 3; // TypeError: Cannot assign to read-only property x 

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

 const a = { x: 1 }; const b = { x: 2 }; Object.preventExtensions(b); 

इस कोड का प्रसंस्करण उन कार्यों से शुरू होता है जो हम पहले से जानते हैं। अर्थात्, एक परिवर्तन वस्तु के खाली रूप से नए रूप में किया जाता है, जिसमें संपत्ति 'x' (एक इकाई Smi रूप में प्रतिनिधित्व) होती है। जब हम ऑब्जेक्ट b के विस्तार पर रोक लगाते हैं, तो यह एक विशेष संक्रमण को एक नए रूप में ले जाता है, जिसे गैर-विस्तार योग्य के रूप में चिह्नित किया जाता है। यह विशेष संक्रमण कुछ नई संपत्ति की उपस्थिति का कारण नहीं बनता है। यह वास्तव में, सिर्फ एक मार्कर है।


Object.preventExtensions () विधि का उपयोग करके किसी ऑब्जेक्ट को संसाधित करने का परिणाम

कृपया ध्यान दें कि हम मौजूदा फॉर्म को केवल मूल्य x साथ नहीं बदल सकते हैं, क्योंकि इसे किसी अन्य ऑब्जेक्ट, अर्थात् ऑब्जेक्ट a , की आवश्यकता a , जो अभी भी विस्तार योग्य है।

प्रतिक्रिया प्रदर्शन मुद्दा

अब हम अपने बारे में बात की गई सभी चीज़ों को इकट्ठा करते हैं और हाल ही के रिएक्ट प्रदर्शन समस्या के सार को समझने के लिए हमारे द्वारा प्राप्त ज्ञान का उपयोग करते हैं। जब रिएक्ट टीम ने वास्तविक अनुप्रयोगों को प्रोफाइल किया, तो उन्होंने V8 के प्रदर्शन में एक अजीब गिरावट देखी, जो रिएक्ट कोर पर काम करती थी। यहाँ कोड का समस्या भाग का सरलीकृत प्रजनन है:

 const o = { x: 1, y: 2 }; Object.preventExtensions(o); oy = 0.2; 

हमारे पास दो क्षेत्रों के साथ एक वस्तु है, जिसे Smi संस्थाओं के रूप में दर्शाया गया है। हम ऑब्जेक्ट के आगे विस्तार को रोकते हैं, और फिर एक कार्रवाई करते हैं जो इस तथ्य की ओर जाता है कि दूसरे क्षेत्र को Double प्रारूप में दर्शाया जाना चाहिए।

हमने पहले ही पाया है कि वस्तु के विस्तार का निषेध लगभग निम्न स्थिति की ओर ले जाता है।


वस्तु विस्तार के निषेध के परिणाम

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

अब हमें उस तरीके को बदलने की जरूरत है जिस तरह से y संपत्ति को Double द्वारा दर्शाया गया है। इसका मतलब है कि हमें अलगाव के एक रूप की तलाश शुरू करनी होगी। इस स्थिति में, यह वह रूप है जिसमें x गुण प्रकट होता है। लेकिन अब V8 उलझन में है। तथ्य यह है कि पृथक्करण रूप एक्स्टेंसिबल था, और वर्तमान फॉर्म को गैर-एक्स्टेंसिबल के रूप में चिह्नित किया गया था। V8 एक समान स्थिति में संक्रमण प्रक्रिया को पुन: पेश करने का तरीका नहीं जानता है। नतीजतन, इंजन बस इसे बाहर निकालने की कोशिश करने से इनकार करता है। इसके बजाय, यह बस एक अलग रूप बनाता है जो वर्तमान प्रपत्र ट्री से जुड़ा नहीं है और अन्य वस्तुओं के साथ साझा नहीं किया गया है। यह एक वस्तु के अनाथ रूप की तरह कुछ है।


अनाथ रूप

यह अनुमान लगाना आसान है कि यह, यदि यह कई वस्तुओं के साथ होता है, तो बहुत बुरा है। तथ्य यह है कि इससे V8 ऑब्जेक्ट का पूरा सिस्टम बेकार हो जाता है।

जब हाल ही में रिएक्ट की समस्या हुई, तो निम्नलिखित हुआ। FiberNode क्लास के प्रत्येक ऑब्जेक्ट में फ़ील्ड्स थे जो कि प्रोफाइलिंग सक्षम होने पर टाइमस्टैम्प्स को स्टोर करने के लिए थे।

 class FiberNode {  constructor() {    this.actualStartTime = 0;    Object.preventExtensions(this);  } } const node1 = new FiberNode(); const node2 = new FiberNode(); 

इन फ़ील्ड्स (उदाहरण के लिए, actualStartTime ) को 0 या -1 पर प्रारंभ किया गया था। यह इस तथ्य के कारण था कि Smi संस्थाओं का उपयोग Smi उनके अर्थों का प्रतिनिधित्व करने के लिए किया गया था। लेकिन बाद में, उन्होंने प्रदर्शन.वन () विधि द्वारा लौटाए गए फ्लोटिंग-पॉइंट नंबरों के प्रारूप में वास्तविक समय के टिकटों को बचाया । इससे यह तथ्य सामने आया कि इन मूल्यों का अब Smi के रूप में प्रतिनिधित्व नहीं किया जा सकता है। इन क्षेत्रों का प्रतिनिधित्व करने के लिए, अब Double संस्थाओं की आवश्यकता थी। इस सब के शीर्ष पर, रिएक्ट ने FiberNode वर्ग के उदाहरणों के विस्तार को भी रोक दिया।

प्रारंभ में, हमारे सरलीकृत उदाहरण को निम्नलिखित रूप में प्रस्तुत किया जा सकता है।


प्रणाली की प्रारंभिक स्थिति

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


V8 उलझन में है

V8 नोड 1 को एक नया अनाथ रूप प्रदान करता है। वही बात node2 ऑब्जेक्ट के साथ थोड़ी देर बाद होती है। परिणामस्वरूप, अब हमारे पास दो "अनाथ" रूप हैं, जिनमें से प्रत्येक का उपयोग केवल एक ऑब्जेक्ट द्वारा किया जाता है। कई वास्तविक रिएक्ट अनुप्रयोगों में, ऐसी वस्तुओं की संख्या दो से अधिक है। ये FiberNode वर्ग के दसियों या हजारों ऑब्जेक्ट हो सकते हैं। यह समझना आसान है कि यह स्थिति V8 प्रदर्शन को बहुत अच्छी तरह से प्रभावित नहीं करती है।

सौभाग्य से, हमने V8 v7.4 में इस समस्या को ठीक किया , और हम वस्तुओं के क्षेत्रों के प्रतिनिधित्व को कम संसाधन-गहन बनाने के संचालन के संचालन की संभावना तलाश रहे हैं। यह हमें ऐसी स्थितियों में उत्पन्न होने वाली शेष प्रदर्शन समस्याओं को हल करने की अनुमति देगा। V8, फिक्स के लिए धन्यवाद, अब ऊपर वर्णित समस्या की स्थिति में सही ढंग से व्यवहार करता है।


प्रणाली की प्रारंभिक स्थिति

यहाँ है कि यह कैसा दिखता है। FiberNode वर्ग के दो उदाहरण एक गैर-एक्स्टेंसिबल फॉर्म का संदर्भ देते हैं। इस स्थिति में, 'actualStartTime' को एक Smi फ़ील्ड के रूप में दर्शाया जाता है। जब node1.actualStartTime . node1.actualStartTime गुण के लिए मान असाइन करने का पहला ऑपरेशन node1.actualStartTime , तो एक नई संक्रमण श्रृंखला बनाई जाती है, और पिछली श्रृंखला अप्रचलित के रूप में चिह्नित की जाती है।


Node1.actualStartTime संपत्ति के लिए एक नया मान असाइन करने के परिणाम

कृपया ध्यान दें कि गैर-विस्तार योग्य फ़ॉर्म में परिवर्तन अब नई श्रृंखला में सही ढंग से पुन: प्रस्तुत किया गया है। यह वही है जो node2.actualStartTime के मूल्य को बदलने के बाद सिस्टम में हो जाता है node2.actualStartTime ।


नोड 2.actualStartTime गुण के लिए एक नया मान असाइन करने के परिणाम

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

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

यह ध्यान दिया जाना चाहिए कि रिएक्ट टीम ने अपने दम पर इस समस्या को हल किया , यह सुनिश्चित करते हुए कि FiberNodes वर्ग की वस्तुओं में फ़ील्ड FiberNodes शुरू में दोहरे मान द्वारा दर्शाया FiberNodes था:

 class FiberNode {  constructor() {    //     `Double`   .    this.actualStartTime = Number.NaN;    //       ,  :    this.actualStartTime = 0;    Object.preventExtensions(this);  } } const node1 = new FiberNode(); const node2 = new FiberNode(); 

यहां, Number.NaN बजाय, कोई भी फ़्लोटिंग-पॉइंट मान जो Smi श्रेणी में फिट नहीं है, का उपयोग किया जा सकता है। इन मानों में 0.000001, Number.MIN_VALUE , -0 और Infinity ।

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

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

 //   ! class Point {  x = null;  y = null; } const p = new Point(); px = 0.1; py = 402; 

दूसरे शब्दों में - पठनीय कोड लिखें, और प्रदर्शन खुद ही आ जाएगा!

परिणाम

इस लेख में, हमने निम्नलिखित महत्वपूर्ण मुद्दों की जांच की:

• जावास्क्रिप्ट "आदिम" और "ऑब्जेक्ट" मूल्यों के बीच अंतर करता है, और typeof परिणाम पर भरोसा नहीं किया जा सकता है।
• यहां तक ​​कि समान जावास्क्रिप्ट प्रकार के मानों को इंजन के आंतों में अलग-अलग तरीकों से दर्शाया जा सकता है।
• वी 8 जेएस कार्यक्रमों में उपयोग की जाने वाली वस्तु की प्रत्येक संपत्ति का प्रतिनिधित्व करने का सबसे अच्छा तरीका खोजने की कोशिश कर रहा है।
• कुछ स्थितियों में, V8 ऑब्जेक्ट के रूपों को अप्रचलित के रूप में चिह्नित करने पर संचालन करता है और रूपों के प्रवास को निष्पादित करता है। सहित - वस्तुओं के विस्तार के निषेध के साथ जुड़े संक्रमणों को लागू करता है।

पूर्वगामी के आधार पर, हम कुछ व्यावहारिक जावास्क्रिप्ट प्रोग्रामिंग युक्तियां प्रदान कर सकते हैं जो कोड प्रदर्शन को बेहतर बनाने में मदद कर सकते हैं:

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

प्रिय पाठकों! क्या आपने कभी कुछ जावास्क्रिप्ट इंजनों की आंतरिक विशेषताओं के आधार पर अपने कोड को अनुकूलित किया है?