जावास्क्रिप्ट का निष्पादन मॉडल सूक्ष्म है और इसे गलत समझना आसान है। इवेंट लूप के मूल में इसके बारे में सीखने से मदद मिल सकती है।
जावास्क्रिप्ट एक एकल-थ्रेडेड भाषा है, जिसे एक समय में एक कार्य को संभालने के लिए बनाया गया है। हालाँकि, इवेंट लूप जावास्क्रिप्ट को एक साथ प्रोग्रामिंग सिस्टम का अनुकरण करके घटनाओं और कॉलबैक को अतुल्यकालिक रूप से संभालने देता है। यह आपके जावास्क्रिप्ट अनुप्रयोगों के प्रदर्शन को सुनिश्चित करता है।
जावास्क्रिप्ट इवेंट लूप क्या है?
जावास्क्रिप्ट का इवेंट लूप एक तंत्र है जो प्रत्येक जावास्क्रिप्ट एप्लिकेशन की पृष्ठभूमि में चलता है। यह जावास्क्रिप्ट को उसके मुख्य निष्पादन थ्रेड को अवरुद्ध किए बिना अनुक्रम में कार्यों को संभालने की अनुमति देता है। इसे कहा जाता है अतुल्यकालिक प्रोग्रामिंग.
इवेंट लूप चलाने के लिए कार्यों की एक कतार रखता है और उन कार्यों को दाईं ओर फीड करता है वेब एपीआई एक समय में एक निष्पादन के लिए. जावास्क्रिप्ट इन कार्यों पर नज़र रखता है और कार्य की जटिलता के स्तर के अनुसार प्रत्येक को संभालता है।
जावास्क्रिप्ट इवेंट लूप और एसिंक्रोनस प्रोग्रामिंग की आवश्यकता को समझने के लिए। आपको यह समझने की आवश्यकता है कि यह मूलतः किस समस्या का समाधान करता है।
उदाहरण के लिए, यह कोड लें:
functionlongRunningFunction() {
// This function does something that takes a long time to execute.
for (var i = 0; i < 100000; i++) {
console.log("Hello")
}
}functionshortRunningFunction(a) {
return a * 2 ;
}functionmain() {
var startTime = Date.now();
longRunningFunction();
var endTime = Date.now();// Prints the amount of time it took to execute functions
console.log(shortRunningFunction(2));
console.log("Time taken: " + (endTime - startTime) + " milliseconds");
}
main();
यह कोड सबसे पहले नामक फ़ंक्शन को परिभाषित करता है लॉन्गरनिंगफंक्शन(). यह फ़ंक्शन किसी प्रकार का जटिल समय लेने वाला कार्य करेगा। इस मामले में, यह एक कार्य करता है के लिए लूप 100,000 से अधिक बार पुनरावृत्त हो रहा है। इस का मतलब है कि कंसोल.लॉग("हैलो") 100,000 बार दौड़ता है।
कंप्यूटर की गति के आधार पर, इसमें लंबा समय लग सकता है और ब्लॉक हो सकता है शॉर्टरनिंगफंक्शन() तत्काल निष्पादन से लेकर पिछला कार्य पूरा होने तक।
संदर्भ के लिए, यहां दोनों कार्यों को चलाने में लगने वाले समय की तुलना की गई है:
और फिर सिंगल शॉर्टरनिंगफंक्शन():
जब आप एक परफॉर्मेंट ऐप बनाने का लक्ष्य रखते हैं तो 2,351-मिलीसेकंड ऑपरेशन और 0-मिलीसेकंड ऑपरेशन के बीच अंतर स्पष्ट होता है।
इवेंट लूप ऐप के प्रदर्शन में कैसे मदद करता है
इवेंट लूप में विभिन्न चरण और भाग होते हैं जो सिस्टम को काम करने में योगदान देते हैं।
कॉल स्टैक
जावास्क्रिप्ट कॉल स्टैक इस बात के लिए आवश्यक है कि जावास्क्रिप्ट आपके एप्लिकेशन से फ़ंक्शन और ईवेंट कॉल को कैसे संभालता है। जावास्क्रिप्ट कोड ऊपर से नीचे तक संकलित होता है। हालाँकि, Node.js, कोड को पढ़ने पर, Node.js नीचे से ऊपर तक फ़ंक्शन कॉल असाइन करेगा। जैसे ही यह पढ़ता है, यह परिभाषित कार्यों को फ़्रेम के रूप में कॉल स्टैक में एक-एक करके धकेलता है।
कॉल स्टैक निष्पादन संदर्भ और कार्यों के सही क्रम को बनाए रखने के लिए जिम्मेदार है। यह लास्ट-इन-फर्स्ट-आउट (LIFO) स्टैक के रूप में कार्य करके ऐसा करता है।
इसका मतलब यह है कि आपका प्रोग्राम कॉल स्टैक पर जिस अंतिम फ़ंक्शन फ़्रेम को धकेलता है, वह स्टैक से बाहर निकलने और चलने वाला पहला फ़ंक्शन फ़्रेम होगा। यह सुनिश्चित करेगा कि जावास्क्रिप्ट फ़ंक्शन निष्पादन का सही क्रम बनाए रखे।
जावास्क्रिप्ट प्रत्येक फ्रेम को स्टैक से तब तक पॉप करेगा जब तक वह खाली न हो जाए, जिसका अर्थ है कि सभी फ़ंक्शन चलना समाप्त हो गए हैं।
लिबुव वेब एपीआई
जावास्क्रिप्ट के एसिंक्रोनस प्रोग्राम के मूल में है libuv. लिबुव लाइब्रेरी सी प्रोग्रामिंग भाषा में लिखी गई है, जो ऑपरेटिंग सिस्टम के साथ इंटरैक्ट कर सकती है निम्न-स्तरीय एपीआई। लाइब्रेरी कई एपीआई प्रदान करेगी जो जावास्क्रिप्ट कोड को अन्य के साथ समानांतर में चलने की अनुमति देती है कोड. थ्रेड बनाने के लिए एपीआई, थ्रेड के बीच संचार करने के लिए एक एपीआई और थ्रेड सिंक्रोनाइज़ेशन के प्रबंधन के लिए एक एपीआई।
उदाहरण के लिए, जब आप उपयोग करते हैं निष्पादन को रोकने के लिए Node.js में सेटटाइमआउट. टाइमर को libuv के माध्यम से सेट किया गया है, जो निर्दिष्ट विलंब बीत जाने के बाद कॉलबैक फ़ंक्शन को निष्पादित करने के लिए इवेंट लूप का प्रबंधन करता है।
इसी तरह, जब आप नेटवर्क संचालन अतुल्यकालिक रूप से करते हैं, तो libuv उन परिचालनों को गैर-अवरुद्ध तरीके से संभालता है यह सुनिश्चित करते हुए कि अन्य कार्य इनपुट/आउटपुट (आई/ओ) ऑपरेशन की प्रतीक्षा किए बिना प्रसंस्करण जारी रख सकते हैं अंत।
कॉलबैक और इवेंट कतार
कॉलबैक और ईवेंट कतार वह जगह है जहां कॉलबैक फ़ंक्शन निष्पादन की प्रतीक्षा करते हैं। जब एक एसिंक्रोनस ऑपरेशन libuv से पूरा हो जाता है, तो उसका संबंधित कॉलबैक फ़ंक्शन इस कतार में जुड़ जाता है।
यहां बताया गया है कि अनुक्रम कैसे चलता है:
- जावास्क्रिप्ट एसिंक्रोनस कार्यों को संभालने के लिए libuv में ले जाता है, और अगले कार्य को तुरंत संभालना जारी रखता है।
- जब एसिंक्रोनस कार्य समाप्त हो जाता है, तो जावास्क्रिप्ट अपने कॉलबैक फ़ंक्शन को कॉलबैक कतार में जोड़ता है।
- जावास्क्रिप्ट कॉल स्टैक में अन्य कार्यों को तब तक निष्पादित करता रहता है जब तक कि यह वर्तमान क्रम में सब कुछ पूरा नहीं कर लेता।
- एक बार कॉल स्टैक खाली हो जाने पर, जावास्क्रिप्ट कॉलबैक कतार को देखता है।
- यदि कतार में कोई कॉलबैक है, तो यह पहले वाले को कॉल स्टैक पर धकेलता है और उसे निष्पादित करता है।
इस तरह, अतुल्यकालिक कार्य मुख्य थ्रेड को अवरुद्ध नहीं करते हैं, और कॉलबैक कतार यह सुनिश्चित करती है कि उनके संबंधित कॉलबैक उनके पूरा होने के क्रम में निष्पादित हों।
इवेंट लूप साइकिल
इवेंट लूप में माइक्रोटास्क कतार नामक कुछ चीज़ भी होती है। इवेंट लूप में यह विशेष कतार कॉल स्टैक में वर्तमान कार्य पूरा होते ही निष्पादित करने के लिए निर्धारित माइक्रोटास्क रखती है। यह निष्पादन अगले रेंडरिंग या ईवेंट लूप पुनरावृत्ति से पहले होता है। माइक्रोटास्क उच्च प्राथमिकता वाले कार्य हैं जिन्हें इवेंट लूप में नियमित कार्यों पर प्राथमिकता दी जाती है।
प्रॉमिस के साथ काम करते समय आमतौर पर एक माइक्रोटास्क बनाया जाता है। जब भी कोई वादा हल हो जाता है या अस्वीकार हो जाता है, तो यह उसके अनुरूप होता है ।तब() या ।पकड़ना() कॉलबैक माइक्रोटास्क कतार में शामिल हो जाता है। आप उस कतार का उपयोग उन कार्यों को प्रबंधित करने के लिए कर सकते हैं जिन्हें वर्तमान ऑपरेशन के बाद तत्काल निष्पादन की आवश्यकता है, जैसे कि आपके एप्लिकेशन के यूआई को अपडेट करना या राज्य परिवर्तनों को संभालना।
उदाहरण के लिए, एक वेब एप्लिकेशन जो डेटा फ़ेचिंग करता है और पुनर्प्राप्त डेटा के आधार पर यूआई को अपडेट करता है। उपयोगकर्ता बार-बार एक बटन पर क्लिक करके इस डेटा फ़ेच को ट्रिगर कर सकते हैं। प्रत्येक बटन क्लिक एक अतुल्यकालिक डेटा पुनर्प्राप्ति ऑपरेशन आरंभ करता है।
माइक्रोटास्क के बिना, इस कार्य के लिए इवेंट लूप निम्नानुसार काम करेगा:
- उपयोगकर्ता बार-बार बटन क्लिक करता है।
- प्रत्येक बटन क्लिक एक एसिंक्रोनस डेटा फ़ेच ऑपरेशन को ट्रिगर करता है।
- जैसे ही डेटा फ़ेच ऑपरेशन पूरा हो जाता है, जावास्क्रिप्ट उनके संबंधित कॉलबैक को नियमित कार्य कतार में जोड़ देता है।
- इवेंट लूप नियमित कार्य कतार में कार्यों को संसाधित करना शुरू करता है।
- जैसे ही नियमित कार्य इसकी अनुमति देते हैं, डेटा फ़ेच परिणामों के आधार पर यूआई अपडेट निष्पादित हो जाता है।
हालाँकि, माइक्रोटास्क के साथ, इवेंट लूप अलग तरीके से काम करता है:
- उपयोगकर्ता बार-बार बटन पर क्लिक करता है और एक एसिंक्रोनस डेटा फ़ेच ऑपरेशन ट्रिगर करता है।
- जैसे ही डेटा फ़ेच ऑपरेशन पूरा हो जाता है, इवेंट लूप उनके संबंधित कॉलबैक को माइक्रोटास्क कतार में जोड़ देता है।
- ईवेंट लूप वर्तमान कार्य (बटन क्लिक) को पूरा करने के तुरंत बाद माइक्रोटास्क कतार में कार्यों को संसाधित करना शुरू कर देता है।
- डेटा लाने के परिणामों के आधार पर यूआई अपडेट अगले नियमित कार्य से पहले निष्पादित होता है, जो अधिक प्रतिक्रियाशील उपयोगकर्ता अनुभव प्रदान करता है।
यहाँ एक कोड उदाहरण है:
const fetchData = () => {
returnnewPromise(resolve => {
setTimeout(() => resolve('Data from fetch'), 2000);
});
};
document.getElementById('fetch-button').addEventListener('click', () => {
fetchData().then(data => {
// This UI update will run before the next rendering cycle
updateUI(data);
});
});
इस उदाहरण में, "फ़ेच" बटन पर प्रत्येक क्लिक कॉल करता है फ़ेचडेटा(). प्रत्येक डेटा फ़ेच ऑपरेशन एक माइक्रोटास्क के रूप में शेड्यूल होता है। प्राप्त किए गए डेटा के आधार पर, यूआई अपडेट प्रत्येक फ़ेच ऑपरेशन पूरा होने के तुरंत बाद, किसी भी अन्य रेंडरिंग या इवेंट लूप कार्यों से पहले निष्पादित होता है।
यह सुनिश्चित करता है कि उपयोगकर्ता इवेंट लूप में अन्य कार्यों के कारण किसी भी देरी का अनुभव किए बिना अद्यतन डेटा देखें।
इस तरह के परिदृश्यों में माइक्रोटास्क का उपयोग करने से यूआई जंक को रोका जा सकता है और आपके एप्लिकेशन में तेज़ और सुचारू इंटरैक्शन प्रदान किया जा सकता है।
वेब विकास के लिए इवेंट लूप के निहितार्थ
प्रदर्शनशील और प्रतिक्रियाशील अनुप्रयोगों के निर्माण के लिए इवेंट लूप को समझना और इसकी सुविधाओं का उपयोग कैसे करना आवश्यक है। इवेंट लूप अतुल्यकालिक और समानांतर क्षमताएं प्रदान करता है, जिससे आप उपयोगकर्ता अनुभव से समझौता किए बिना अपने एप्लिकेशन में जटिल कार्यों को कुशलतापूर्वक संभाल सकते हैं।
Node.js आपकी ज़रूरत की सभी चीज़ें प्रदान करता है, जिसमें जावास्क्रिप्ट के मुख्य थ्रेड के बाहर और अधिक समानता प्राप्त करने के लिए वेब वर्कर भी शामिल हैं।
