जावास्क्रिप्ट मेमोरी लीक: अलग डोम पेड़

Question

मैंने देखा है कि ब्राउज़र की याद में वृद्धि शुरू होती है जब तक कि मैं एक रूप में हूं (यह कार्य प्रबंधक से ध्यान देने योग्य है)। आईई 9 में, कुछ उपयोग के बाद यह 500 एमबी से अधिक आसानी से चला जाता है, जबकि क्रोम अधिक लचीला होता है (उसी परीक्षण का उपयोग करके 200 एमबी तक जाता है)।

मैं इस समस्या को डीबग करने के लिए क्रोम डेवलपर टूल का उपयोग कर रहा हूं। मैंने देखा है वहाँ अलग डोम पेड़ की एक बड़ी संख्या है:

मैं इस एक स्मृति रिसाव है कि वहाँ की पुष्टि कर सकते हैं कि यह सोचते हैं रहा हूँ। क्या यह सही होगा? दूसरा, मुझे यह पता लगाना होगा कि समस्या के मूल कारण को कैसे पहचानें। मुझे पता है कि आपको उन वस्तुओं को पुनः प्राप्त करने से रोकने के लिए बनाए रखने वाले पेड़ का उपयोग करना चाहिए। लेकिन मुझे पता नहीं चल रहा है कि बनाए रखने वाले पेड़ का उपयोग कैसे करें। उदाहरण के लिए, उपरोक्त स्क्रीनशॉट में बनाए रखने वाले पेड़ का क्या अर्थ है?

किसी भी सहायता की सराहना की जाएगी।

Answer 1

जब आप कोड लिखते हैं तो डीओएम तत्वों को संदर्भित करते समय ध्यान में रखने के लिए कई विचार हैं। लेकिन यह सब मूल रूप से कुछ साधारण बिंदुओं तक उबाल जाता है -

ए। अपने स्थानीय कार्यों में हमेशा संदर्भ

var menu = $('body #menu'); 
// do something with menu 
. 
. 
. 
menu = null; 

बी साफ़ करें। तत्व डेटा .data()

सी के हिस्से के रूप में संदर्भों को कभी भी संग्रहीत न करें। बंद/इनलाइन संचालकों के अंदर डोम संदर्भ का उपयोग न करने का प्रयास, बजाय पारित पहचानकर्ता

function attachClick(){ 
     var someDiv = $('#someDiv'); 

     someDiv.click(function(){ 
     var a = someDiv....; 
     //Wrong. Instead of doing this.. 
     }); 


     someDiv.click(function(){ 
     var a = $('#someDiv'); 
     //Pass the identifier/selector and then use it to find the element 
     });  


     var myFunc = function(){ 
     var a = someDiv; 
     //using a variable from outside scope here - big DON'T!    
     } 
    } 

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

अद्यतन

डी। अज्ञात कार्यों से बचें - अपने ईवेंट हैंडलर और स्थानीय फ़ंक्शंस का नामकरण हेप स्नैपशॉट्स को प्रोफाइलिंग/देखकर आपको बहुत मदद करेगा।

Answer 2

ऐसा लगता है कि आपका कोड कई डॉम सबट्री बनाता है और जावास्क्रिप्ट से इसका संदर्भ रखता है। आपको एक अलग डोम पेड़ से तत्व चुनने की आवश्यकता है। स्नैपशॉट के अनुसार आपको टेक्स्ट तत्व का चयन करना चाहिए। और retainers पेड़ में देखो।

यह पेड़ आपको उन सभी पथों को दिखाता है जो वस्तु को जीवित रखता है। कम से कम एक पथ, आमतौर पर सबसे छोटा, आपको विंडो ऑब्जेक्ट पर ले जाएगा। यदि आप कोड से परिचित हैं तो आप आसानी से उस पथ में ऑब्जेक्ट पा सकते हैं जिसे हटाया जाना है लेकिन ऐसा नहीं है। पथ में ऐसी कई वस्तुएं हो सकती हैं। छोटी दूरी के साथ वस्तु अधिक दिलचस्प है।