जावास्क्रिप्ट इंजन में प्रोटोटाइप के साथ काम का अनुकूलन

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

कोड अनुकूलन स्तर और ट्रेड-ऑफ

निष्पादन के लिए उपयुक्त कोड में जावास्क्रिप्ट में लिखे गए कार्यक्रमों के ग्रंथों को परिवर्तित करने की प्रक्रिया लगभग विभिन्न इंजनों में समान दिखती है।स्रोत JS कोड को निष्पादन योग्य कोड में परिवर्तित करने की प्रक्रिया

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

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

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

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

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

आइए एक विशिष्ट उदाहरण देखें और देखें कि विभिन्न इंजनों की पाइपलाइनें कोड को कैसे संभालती हैं। यहां प्रस्तुत उदाहरण में, एक "हॉट" लूप है जिसमें कोड है जो कई बार दोहराता है।

let result = 0; for (let i = 0; i < 4242424242; ++i) {    result += i; } console.log(result); 

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

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

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

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

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

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

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

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

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

 function add(x, y) {   return x + y; } add(1, 2); 

यहाँ V8 में इग्निशन दुभाषिया द्वारा उत्पन्न add फंक्शन का बायटेकोड है:

 StackCheck Ldar a1 Add a0, [0] Return 

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

जब इस तरह का एक कोड "गर्म" होता है, तो टर्बोफैन को लिया जाता है, जो निम्नलिखित अत्यधिक अनुकूलित मशीन कोड उत्पन्न करता है:

 leaq rcx,[rip+0x0] movq rcx,[rcx-0x37] testb [rcx+0xf],0x1 jnz CompileLazyDeoptimizedCode push rbp movq rbp,rsp push rsi push rdi cmpq rsp,[r13+0xe88] jna StackOverflow movq rax,[rbp+0x18] test al,0x1 jnz Deoptimize movq rbx,[rbp+0x10] testb rbx,0x1 jnz Deoptimize movq rdx,rbx shrq rdx, 32 movq rcx,rax shrq rcx, 32 addl rdx,rcx jo Deoptimize shlq rdx, 32 movq rax,rdx movq rsp,rbp pop rbp ret 0x18 

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

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

ऑब्जेक्ट प्रोटोटाइप गुणों तक पहुंच का अनुकूलन

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

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

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

अब जब हम जानते हैं कि जावास्क्रिप्ट में ऑब्जेक्ट प्रॉपर्टी की पहुंच कैसे बढ़ाई जाए, तो हाल ही के जावास्क्रिप्ट इनोवेशन में से एक पर एक नज़र डालें - कक्षाएं। यहाँ वर्ग घोषणा क्या दिखती है:

 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 संपत्ति में getX । यह ऑपरेशन ठीक उसी तरह से काम करता है जैसे किसी अन्य ऑब्जेक्ट की प्रॉपर्टी बनाते समय, क्योंकि जावास्क्रिप्ट में प्रोटोटाइप ऑब्जेक्ट हैं। प्रोटोटाइप के उपयोग पर आधारित भाषाओं में, जैसे कि जावास्क्रिप्ट, एक निश्चित प्रकार की सभी वस्तुओं द्वारा साझा किए जा सकने वाले तरीकों को प्रोटोटाइप में संग्रहीत किया जाता है, और व्यक्तिगत वस्तुओं के क्षेत्र उनके उदाहरणों में संग्रहीत किए जाते हैं।

आइए देखें कि क्या होता है, इसलिए बोलने के लिए, पर्दे के पीछे जब हम Bar ऑब्जेक्ट का एक नया उदाहरण बनाते हैं, इसे निरंतर foo को निर्दिष्ट करते हैं।

 const foo = new Bar(true); 

इस तरह के कोड को निष्पादित करने के बाद, यहां बनाई गई वस्तु के उदाहरण में एक एकल गुण x । foo ऑब्जेक्ट का प्रोटोटाइप Bar.prototype , जो क्लास Bar ।
ऑब्जेक्ट और उसके प्रोटोटाइप

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

अब देखते हैं कि यदि आप Bar का दूसरा ऑब्जेक्ट बनाते हैं तो क्या होता है।
एक ही प्रकार की कई वस्तुएँ

जैसा कि आप देख सकते हैं, foo ऑब्जेक्ट और qux ऑब्जेक्ट, जो कि Bar क्लास के उदाहरण हैं, जैसा कि हमने पहले ही कहा है, ऑब्जेक्ट के समान रूप का उपयोग करें। दोनों एक ही प्रोटोटाइप - 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(); //         : const $getX = foo.getX; const x = $getX.call(foo); 

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

इंजन foo ऑब्जेक्ट का विश्लेषण करता है और यह पता लगाता है कि foo ऑब्जेक्ट के रूप में कोई getX प्रॉपर्टी नहीं है। इसका मतलब है कि इस विधि को खोजने के लिए इंजन को ऑब्जेक्ट की प्रोटोटाइप श्रृंखला को देखना होगा। इंजन Bar.prototype प्रोटोटाइप का उपयोग करता है और इस प्रोटोटाइप के ऑब्जेक्ट आकार को देखता है। वह ऑफसेट 0. पर वांछित संपत्ति पाता है। इसके बाद, Bar.prototype में इस ऑफसेट पर संग्रहीत मूल्य Bar.prototype , JSFunction का पता लगाया जाता है - और यह वही है जो हम खोज रहे हैं। यह विधि के लिए खोज को पूरा करता है।

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

 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 विधि लोड हो रही है

हमारे द्वारा इस मामले में बार-बार कॉल करने की विधि तक पहुंच को गति देने के लिए, आपको निम्नलिखित जानने की आवश्यकता है:

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

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

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

यहां हमारे पास HTMLAnchorElement और हम इसकी getAttribute() विधि कहते हैं। HTML लिंक का प्रतिनिधित्व करने वाले इस सरल तत्व की प्रोटोटाइप श्रृंखला में 6 प्रोटोटाइप शामिल हैं! अधिकांश दिलचस्प DOM विधियाँ अपने स्वयं के प्रोटोटाइप HTMLAnchorElement । वे श्रृंखला के नीचे स्थित प्रोटोटाइप में हैं।
प्रोटोटाइप श्रृंखला

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

1. anchor ऑब्जेक्ट को getAttribute लिए स्वयं चेक करता है।
2. सत्यापित किया जा रहा है कि ऑब्जेक्ट का सीधा प्रोटोटाइप HTMLAnchorElement.prototype ।
3. यह पता लगाना कि HTMLAnchorElement.prototype में एक HTMLAnchorElement.prototype विधि नहीं है।
4. सत्यापित किया जा रहा है कि अगला प्रोटोटाइप HTMLElement.prototype ।
5. यह पता लगाना कि यहां कोई आवश्यक विधि नहीं है।
6. अंत में, यह पता लगाना कि अगला प्रोटोटाइप Element.prototype ।
7. यह पता लगाना कि एक getAttribute विधि है।

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

यदि हम पिछले उदाहरणों में से एक पर लौटते हैं, तो हम याद कर सकते हैं कि जब हम getX ऑब्जेक्ट के getX विधि को कॉल करते हैं, तो हम 3 जांच करते हैं:

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

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

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

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

वैधता संपत्ति

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

फॉर्म से जुड़े प्रोटोटाइप को बदलते समय, या किसी भी ओवर प्रोटोटाइप को बदलने पर इस प्रॉपर्टी को अमान्य घोषित कर दिया जाता है। इस तंत्र पर अधिक विस्तार से विचार करें।

प्रोटोटाइप से लोडिंग संपत्तियों के अनुक्रमिक संचालन को गति देने के लिए, V8 एक इनलाइन कैश का उपयोग करता है जिसमें चार फ़ील्ड होते हैं: ValidityCell , Prototype , Shape , Offset ।
इनलाइन कैश फ़ील्ड्स

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

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

जब प्रोटोटाइप बदलता है, तो एक नया रूप बनाया जाता है, और पिछली ValidityCell संपत्ति को अमान्य घोषित किया जाता है। नतीजतन, अगली बार जब आप इनलाइन कैश का उपयोग करने की कोशिश करते हैं, तो इससे कोई लाभ नहीं होता है, जिससे खराब प्रदर्शन होता है।
प्रोटोटाइप को बदलने के परिणाम

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

वास्तव में, कोड निष्पादन के दौरान Object.prototype को संशोधित करने का अर्थ है गंभीर प्रदर्शन को नुकसान पहुंचाना। यह मत करो।

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

 function loadX(bar) {   return bar.getX(); // IC  'getX'   `Bar`. } loadX(new Bar(true)); loadX(new Bar(false)); // IC  `loadX`    `ValidityCell`  // `Bar.prototype`. Object.prototype.newMethod = y => y; // `ValidityCell`  IC `loadX`   //    `Object.prototype`  . 

loadX में loadX कैश अब loadX लिए ValidityCell को Bar.prototype । , , Object.prototype — JavaScript, ValidityCell , - , .

Object.prototype — , - , . , :

 Object.prototype.foo = function() { /* … */ }; //    : someObject.foo(); //     . delete Object.prototype.foo; 

Object.prototype , - , . , . - , . , « », , .

, , . . Object.prototype , , - .

, — , JS- - , . . , , . , , , .

परिणाम

, JS- , , , -, ValidityCell , . JavaScript, , ( , , , ).

प्रिय पाठकों! , - , JS, ?