मैं ईवेंट श्रोता को कहां जोड़ा जा रहा हूं, इस पर कैसे ट्रैक करूं?

Question

मेरे पास एक वेबपैप के लिए एक अच्छा आकार का जावास्क्रिप्ट (प्रतिक्रिया/रेडक्स लेकिन कोई jQuery नहीं है) कोडबेस है, और मैंने देखा है कि जब मैं यूआई के भीतर एक निश्चित पैनल को बार-बार खोलता और बंद करता हूं, श्रोताओं की संख्या क्रोम के प्रदर्शन समयरेखा के अनुसार बढ़ता रहता है।

ग्राफ इस तरह दिखता है:

मैं पेज के साथ एक अच्छा या दो मिनट बैठने के लिए क्रोम के प्रदर्शन पर नजर रखने रन की अनुमति दी है बेकार (सिर्फ उद्घाटन के बाद/पैनल एक गुच्छा बंद करने), उम्मीद है कि शायद श्रोताओं को कचरा इकट्ठा किया जाएगा, लेकिन वे नहीं हैं। मैंने इस प्रक्रिया के दौरान अन्य टैब पर स्विच किया है, यह भी उम्मीद करते हुए कि जब टैब पृष्ठभूमि की जाती है तो श्रोताओं को कचरा मिल जाएगा, लेकिन दुर्भाग्यवश वे नहीं हैं।

इसलिए मुझे संदेह है कि कुछ श्रोताओं को पंजीकृत किया जा रहा है जो कभी भी अनियंत्रित नहीं होते हैं।

यह मैं दो मुख्य सवाल की ओर जाता है:

1. मेरी परिकल्पना है कि श्रोताओं जोड़ा जा रहा है करता है और कभी नहीं अनबाउंड समझदार लगता है, या नहीं है और मैं पुष्टि करने के लिए इस संदेह कर किया जा सकता है?
2. मेरा संदेह मानना ​​सही है, मैं कोड को ट्रैक करने के बारे में कैसे जा सकता हूं, जहां ईवेंट श्रोता (0) जोड़े जा रहे हैं? मैंने पहले से ही निम्नलिखित कोशिश की है:
   • प्रश्न में पैनल खोलने के लिए जिम्मेदार कोड को देखते हुए, यह देखकर कि यह कहां श्रोताओं को जोड़ता है, और प्रदर्शन भागों में कोई बदलाव देखने के लिए उन भागों को टिप्पणी कर रहा है। कोई बदलाव नहीं है।
   • तो जैसे addEventListener प्रोटोटाइप ओवरराइड:

 

var f = EventTarget.prototype.addEventListener; 
EventTarget.prototype.addEventListener = function(type, fn, capture) { 
    this.f = f; 
    this.f(type, fn, capture); 
    console.trace("Added event listener on" + type); 
} 

यहां तक ​​कि यह कर, तो सभी कोड अंश है, जिनके कारण इस console.trace निष्पादित करने के लिए बाहर टिप्पणी (देखें # के बाद 1) जैसे कि console.trace अब पैनल के खुले/बंद होने पर मुद्रित नहीं है, मुझे प्रदर्शन ग्राफ में श्रोताओं में समान वृद्धि दिखाई देती है। कुछ और श्रोताओं को बढ़ने का कारण बन रहा है। मैं समझता हूं कि श्रोताओं को जोड़ा जा सकता है कि अन्य तरीके भी हैं, लेकिन यह मुझे स्पष्ट नहीं है कि उन सभी संभावनाओं को कैसे रोकें या उन्हें क्रोम के डीबगर में लॉग इन करने का कारण बनें ताकि मैं बता सकूं कि कौन सा कोड उन्हें जोड़ने के लिए ज़िम्मेदार है ।

संपादित: -

function printListenerCount() { 
    var eles = document.getElementsByTagName("*"); 
    var numListeners = 0; 
    for (idx in eles) { let listeners = getEventListeners(eles[idx]); 
     for(eIdx in listeners) 
     { 
      numListeners += listeners[eIdx].length; 
     } 
     console.log("ele", eles[idx], "listeners", getEventListeners(eles[idx])); 
    } 
    console.log("numListeners", numListeners) 
} 

मैं इस पर अमल: https://developers.google.com/web/tools/chrome-devtools/console/events

मैं उसके बाद निम्न समारोह बना टिप्पणी में cowbert के सुझाव पर, मैं इस पृष्ठ पर एक दृष्टि डाली पैनल को खोलने/बंद करने के बाद कार्य का समय गुच्छा, लेकिन दुर्भाग्य से "numListeners" आंकड़ा नहीं बदलता है। यदि numListeners आंकड़ा बदल गया है, तो मैं पैनल को खोलने/बंद करने के पहले पैनल को पहले/बंद करने में सक्षम होगा, यह जानने के लिए कि कौन सा तत्व में अतिरिक्त ईवेंट श्रोता पंजीकृत है, लेकिन दुर्भाग्यवश numListeners नहीं बदलते हैं।

https://developers.google.com/web/tools/chrome-devtools/console/events पर वर्णित मॉनीटर एवेन्ट्स() एपीआई भी है, लेकिन फ़ंक्शन कॉल की आवश्यकता है कि आप एक डोम तत्व निर्दिष्ट करें जिसे आप मॉनिटर करना चाहते हैं। इस स्थिति में, मुझे यकीन नहीं है कि कौन से डीओएम तत्व में अतिरिक्त श्रोताओं हैं, इसलिए मुझे यकीन नहीं है कि मॉनिटर एवेन्ट्स() कॉल वास्तव में मेरी मदद कैसे करेगी। मैं इसे सभी डीओएम तत्वों से जोड़ सकता हूं, जैसा कि मैंने को ऊपर प्रिंट प्रिंटरकाउंट फ़ंक्शन लिखा है, लेकिन मुझे लगता है कि मैं एक ही समस्या में भाग लेगा कि मैं प्रिंट लिस्टनरकाउंट() - के साथ किसी भी कारण से भाग गया, यह नहीं है प्रश्न में श्रोता (ओं) के लिए लेखांकन।

अन्य नोट्स: यह कुछ जटिल प्रतिक्रियाएं (प्रीक्ट, तकनीकी रूप से) आधारित एप्लिकेशन है। अधिकांश रिस्पॉन्स आधारित ऐप्स की तरह, फ्लाई पर घटकों को घुमाया जाता है/अनमाउंट किया जाता है (डीओएम से डाला जाता है)। मुझे लगता है कि यह "थोड़ा घटना घटना हैंडलर पंजीकरण" को ट्रैक कर रहा है जैसे यह थोड़ा मुश्किल है। तो मैं वास्तव में उम्मीद कर रहा हूं कि इस तरह की बड़ी/जटिल परियोजनाओं में "स्ट्रै इवेंट हैंडलर" को ट्रैक करने के तरीके के बारे में कुछ सामान्य डीबगिंग सलाह है। एक सी प्रोग्रामर के रूप में, मैं gdb खोलूंगा और प्रदर्शन ग्राफ में बढ़ने के लिए संभावित रूप से "श्रोताओं" संख्या का कारण बनने वाले सभी चीज़ों पर ब्रेकपॉइंट सेट करूँगा। मुझे यकीन नहीं है कि जावास्क्रिप्ट दुनिया में इसका एक एनालॉग है, और यहां तक ​​कि अगर वहां भी है, तो मुझे यकीन नहीं है कि इसे कैसे किया जाए। कोई भी सलाह काफी सराही जाएगी!

Answer 1

आपकी टिप्पणियों के लिए धन्यवाद, हर कोई। मैं इसे समझने के लिए समाप्त हो गया।

मेरी ओपी से:

1. अधिक मैं इस संदेह की पुष्टि करने के कर किया जा सकता है मेरी परिकल्पना है कि श्रोताओं जोड़ा जा रहा है करता है और कभी नहीं अनबाउंड समझदार लगता है, या नहीं है?

ऐसा लगता है कि इस सवाल का जवाब है: परिकल्पना समझदार नहीं है। श्रोताओं को अभी तक कचरा इकट्ठा करने का मौका नहीं मिला है। आपको लगता है कि इससे कुछ और समय लग सकता है।

यहां बताया गया है कि मैंने इसे कैसे समझा: मुझे यह महसूस करने में असफल रहा कि प्रदर्शन समयरेखा रिकॉर्ड करते समय, प्रदर्शन टैब में ट्रैश कैन आइकन पर क्लिक करके कचरा संग्रह को मजबूर करना संभव है (उसी टैब को रिकॉर्डिंग शुरू करने के लिए उपयोग किया जाता है)। यूआई पैनल के बार-बार बंद/खोलने के बाद इस आइकन पर क्लिक करके, अतिरिक्त श्रोताओं पूरी तरह से चले गए। कचरा संग्रहण के लिए जाहिरा तौर पर

, टैब backgrounding और कुछ मिनटों के इंतजार कर रहे है कि मैं ओ पी में उल्लेख बस है पर्याप्त नहीं समय: ग्राफ अब इस तरह दिखता है, डुबकी क्षणों जहाँ मैं कचरा आइकन पर क्लिक कर होने के साथ अपने आप पर होने के लिए; इसमें उससे कुछ और समय लगता है।

मुझे ओपी लिखने पर कचरे के आइकन के साथ मैन्युअल रूप से कचरा इकट्ठा करने की क्षमता से अवगत नहीं था ... मैं दृढ़ता से किसी भी जंगली हंस के पीछा करने से पहले इसका उपयोग करने की सलाह देता हूं कि पहले क्या हो सकता है प्रदर्शन समस्या