कैसे जावास्क्रिप्ट दृश्य के पीछे काम करता है?

आइए गहराई में जाएं और ब्राउज़र इंजन के अंदर जावास्क्रिप्ट के निष्पादन को समझें:

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

और यह दिन-ब-दिन अधिक से अधिक लोकप्रिय हो रहा है, इस लेख का उद्देश्य जावास्क्रिप्ट में गहरी खोज करना है और यह वास्तव में कैसे काम करता है।

अवलोकन

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

इस पोस्ट में, हम निष्पादन संदर्भ (मेमोरी-निर्माण चरण और कोड-निष्पादन चरण), कॉलस्टैक निष्पादन और जावास्क्रिप्ट इंजन और इसके रनटाइम वातावरण पर चर्चा करेंगे। साथ ही, इवेंट लूप और स्टैक फ़्लो की अवधारणा को समझें।

यह स्क्रिप्ट के निष्पादन में शामिल सभी मुख्य घटकों का अवलोकन वॉक-थ्रू होगा।
यहां हम निम्नलिखित घटकों पर चर्चा करेंगे:

1. जावास्क्रिप्ट इंजन।
2. जावास्क्रिप्ट रनटाइम पर्यावरण।
3. निष्पादन प्रसंग।
4. कॉल स्टैक एक्ज़ीक्यूशन और स्टैक फ्लो।
5. इवेंट लूप।

जैसा कि आप पहले सुन सकते हैं, जावास्क्रिप्ट एक व्याख्या की गई प्रोग्रामिंग भाषा है । इसका अर्थ है कि निष्पादन से पहले स्रोत कोड को बाइनरी कोड में संकलित नहीं किया जाता है।
इसका मतलब है कि यह लाइन से लाइन निष्पादित करता है, लेकिन यह 100% सच नहीं है।
JS जस्ट इन टाइम (JIT) संकलित भाषा है, यह आधुनिक व्यवहार इसे वेब अनुप्रयोगों में तेज़ बनाता है, अन्यथा, व्याख्या किए गए प्रकार के अनुसार, यह एप्लिकेशन को प्रस्तुत करने में धीमा कर देता है। इसलिए हम मानते हैं कि JS जस्ट-इन-टाइम (JIT) संकलन भाषा है।

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

जैसे: (कुछ इंजन हैं)
# V8 क्रोम के लिए जावास्क्रिप्ट इंजन है।
# मोज़िला फ़ायरफ़ॉक्स के लिए स्पाइडर बंदर।
# माइक्रोसॉफ्ट एज के लिए चक्र।
# सफारी आदि के लिए जावास्क्रिप्ट कोर।

जैसा कि हम जानते हैं कि क्रोम ब्राउज़र इंजन "V8" जावास्क्रिप्ट के लिए बहुत लोकप्रिय है,
इसमें दो मुख्य घटक शामिल हैं:
1: कॉल स्टैक ( बाद में विस्तार से चर्चा करें, धैर्य रखें .. )
2: हीप : यह एक असंरचित मेमोरी स्पेस है जहां सभी उपयोगी वस्तुएं हैं संग्रहीत।

था जावास्क्रिप्ट रनटाइम एनवायरनमेंट (JRE):

जैसा कि हमने JS इंजन के बारे में चर्चा की, लेकिन JS इंजन- कुछ अन्य घटकों के साथ JRE के अंदर चलता है। कुछ एसिंक्रोनस अनुरोधों और कॉलों की तरह।
घटक इस प्रकार सूचीबद्ध हैं:

1. जेएस इंजन
2. वेब एपीआई
3. कॉलबैक कतार या संदेश कतार
4. इवेंट लूप

जब जेएस कोड चलाया जाता है तो वैश्विक निष्पादन संदर्भ (जीईसी) बनाया जाता है।
यह निष्पादन 2 चरणों में बनाया गया है:
1: मेमोरी-निर्माण चरण और
2: कोड-निष्पादन चरण।

एक उदाहरण लेते हैं;

इस उपरोक्त कोड स्निपेट के लिए,
सबसे पहले, जीईसी बनाया गया है और जिसमें मेमोरी चरण बनाया गया है और सभी चर के लिए अपरिभाषित मान असाइन करें और पूरे फ़ंक्शन ब्लॉक {} को इसके मेमोरी स्पेस में fnxn मान के रूप में रखें।

दूसरा, अब दूसरे चरण में, यानी कोड-निष्पादन चरण, यह पूरे कोड लाइन से लाइन के माध्यम से जाना शुरू कर देता है।
और इसे var a = 3 मिला, इसलिए यह 3 को एक वेरिएबल को असाइन करता है जो अपरिभाषित था , और
अगली पंक्ति में जाता है और 4 से b वेरिएबल असाइन करता है जो अपरिभाषित था। अब फ़ंक्शन ऐड () के लिए अगली पंक्ति पर जाएं, निष्पादित करने के लिए कुछ भी नहीं है, इसलिए यह वही रहता है, और var c के लिए अगली पंक्ति में जाता है।

इस पंक्ति पर, एक नया निष्पादन संदर्भ बनाया गया है, फ़ंक्शन ऐड (3,4) के लिए स्थानीय निष्पादन संदर्भ के रूप में नाम, अब फिर से 2 चरण बनाए गए हैं, स्मृति निर्माण चरण
के लिए , यह चर num1, num2 और परिणाम के लिए अपरिभाषित असाइन करता है। फिर कोड निष्पादन चरण में, यह ऐड () के फंक्शन ब्लॉक {} में लाइन द्वारा लाइन शुरू करता है। इसने अंक 1 के लिए 3 और अंक 2 के लिए 4 असाइन किया, और फिर var परिणाम के लिए = num1 + num2, और परिणाम चर के रूप में 7 असाइन किया। उसके बाद वापसी परिणाम, और निष्पादन का नियंत्रण var c = 7 पर पंक्ति 9 पर वापस चला जाता है।

जब वापसी कीवर्ड का सामना करना पड़ता है, तो यह कॉल की गई रेखा पर नियंत्रण लौटाता है और फ़ंक्शन निष्पादन संदर्भ भी हटा दिया जाता है।
यह अगली पंक्ति में जाता है, पंक्ति 10: यह c के मान को सांत्वना देता है।

इस प्रकार निष्पादन संदर्भ वास्तव में दृश्य के पीछे काम करता है।

जावास्क्रिप्ट कॉल स्टैक की मदद से कोड निष्पादन संदर्भ निर्माण और विलोपन का प्रबंधन करता है ( हम बाद में कॉल स्टैक पर चर्चा करेंगे )

कॉल स्टैक :

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

उपरोक्त कोड संदर्भ लेना और समझाना कि कॉल स्टैक समान कोड स्निपेट के लिए कैसे काम करता है।

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

इवेंट लूप :

जावास्क्रिप्ट भाषा को भी दो तरह से देखा जा सकता है - सिंक्रोनस और एसिंक्रोनस।

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

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

जेएस में इवेंट लूप एक फीचर है जो लगातार जांच करता है कि मेन स्टैक खाली है या नहीं। और जब यह खाली होता है, तो यह Callback Queue को check करता है। यदि निष्पादित करने के लिए कतार में कोड हैं, तो उन्हें एक-एक करके कॉल स्टैक में स्थानांतरित कर दिया जाता है। कोड निष्पादित होने के बाद, यह ढेर छोड़ देता है और कतार खाली होने तक कतार में अगला आता है।

दोस्तों, चलिए बात खत्म करते हैं और आपको आने वाली पोस्ट्स में मिलते हैं ………।