आप क्या हैं, इवेंट लूप? या क्रोम ब्राउज़र में ईवेंट लूप कैसे काम करता है

आपको क्या लगता है अगर आप इस कोड कोड को ब्राउज़र कंसोल में चलाते हैं तो क्या होगा?

function foo() { setTimeout(foo, 0); } foo(); 

और यह एक?

 function foo() { Promise.resolve().then(foo); } foo(); 

यदि आप, मेरी तरह, इवेंट लूप, मेन थ्रेड, कार्यों, माइक्रोटेक और अधिक के बारे में लेखों का एक गुच्छा पढ़ चुके हैं, लेकिन ऊपर दिए गए प्रश्नों का उत्तर देना मुश्किल है - यह लेख आपके लिए है।

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

इसका पता लगाने का सबसे आसान तरीका आरेख को देखकर है:


चित्र 1

हम देखते हैं कि एकमात्र स्थान जिसके माध्यम से कॉल स्टैक में कार्य पूरा हो सकता है और इवेंट लूप है। कल्पना कीजिए कि आप उसकी जगह पर थे। और आपका काम कार्यों के साथ तालमेल रखना है। कार्य दो प्रकार के हो सकते हैं:

1. व्यक्तिगत - साइट पर मुख्य जावास्क्रिप्ट कोड का निष्पादन (इसके बाद हम यह मान लेंगे कि यह पहले ही निष्पादित हो चुका है)
2. ग्राहक कार्य - रेंडर, माइक्रोट्रूक्स और टास्क

सबसे अधिक संभावना है, आपके व्यक्तिगत कार्यों को प्राथमिकता दी जाएगी। ईवेंट लूप इससे सहमत है :) यह ग्राहक से कार्यों को सुव्यवस्थित करने के लिए बना हुआ है।

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

इस चित्र पर एक नज़र डालें:


चित्र 2

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

यदि ग्राहकों में से एक के पास कार्य नहीं था, तो इवेंट लूप सिर्फ अगले में जाता है। और, इसके विपरीत, यदि ग्राहक के कार्यों में बहुत समय लगता है, तो शेष ग्राहक अपनी बारी का इंतजार करेंगे। और अगर कुछ ग्राहक के कार्य अंतहीन हो गए, तो कॉल स्टैक ओवरफ्लो हो जाता है, और ब्राउज़र शपथ लेना शुरू कर देता है:


चित्र 3

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

 function foo() { setTimeout(foo, 0); } foo(); 

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

आइए इस स्क्रिप्ट को Google Chrome ब्राउज़र में चलाने का प्रयास करें। ऐसा करने के लिए, मैंने एक साधारण HTML डॉक्यूमेंट और कनेक्टेड स्क्रिप्ट बनाया। js इस कोड के टुकड़े के साथ। दस्तावेज़ खोलने के बाद, डेवलपर टूल पर जाएं और परफ़ॉर्मेंस टैब खोलें और 'स्टार्ट प्रोफाइल और रीलोड पेज' पर क्लिक करें:


चित्र 4

हम देखते हैं कि टास्क से कार्यों को एक बार में किया जाता है, लगभग हर 4ms पर।

दूसरी पहेली पर विचार करें:

 function foo() { Promise.resolve().then(foo); } foo(); 

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

विकास उपकरण में इस पर एक नज़र डालें:


चित्र 5

हम देखते हैं कि हर ०.१ सेमी में एक बार माइक्रोट्स्क को निष्पादित किया जाता है, और यह टास्क कतार की तुलना में ४० गुना तेज है। सभी क्योंकि वे एक ही बार में किए जाते हैं। हमारे उदाहरण में, कतार अंतहीन चलती है। विज़ुअलाइज़ेशन के लिए, मैंने इसे 100,000 पुनरावृत्तियों में घटा दिया।

वह सब है!

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

अलविदा :) और जल्द ही मिलते हैं। अगर आपको यह पसंद आया, तो मेरे चैनल को लाइक और सबस्क्राइब करें :)