👩‍🎤 🦇 🧛🏽 एक उदाहरण के रूप में Yandex.Mail का उपयोग करके मेमोरी लीक को कैसे ढूंढें और ठीक करें 👩🏻‍🤝‍👨🏿 🤙🏾 💈

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

हम एक जटिल और बड़े पैमाने पर परियोजना Yandex.Mail पर, इस तरह की लीक को खोजने और ठीक करने में काफी अनुभव प्राप्त कर चुके हैं, और हम इसे साझा करना चाहते हैं।

थोड़ा मैटरियल

जैसा कि हम जानते हैं, जेएस में ऑब्जेक्ट और प्राइमिटिव हैं। वस्तुओं के गुण अन्य वस्तुओं को संदर्भित कर सकते हैं, या इनमें प्राइमिटिव्स हो सकते हैं। JSHeap संबंधित वस्तुओं का सिर्फ एक ग्राफ है। इस ग्राफ की जड़ आमतौर पर वैश्विक वस्तु (जीसी रूट्स) है। इस ग्राफ़ में नोड्स के दो प्रकार हैं: उथले आकार और बनाए हुए आकार। उथला आकार - वस्तु द्वारा कब्जा की गई स्मृति की शुद्ध राशि। सेवानिवृत्त आकार मेमोरी की कुल मात्रा है जिसे कचरा संग्रह के दौरान मुक्त किया जाएगा यदि आप ऑब्जेक्ट और सभी संदर्भों को ग्राफ की जड़ से हटाते हैं। आपको केवल ऐरो या प्राइमेटिव के लिए उथले आकार को देखना चाहिए (जो वास्तव में आकार === उथले आकार को बनाए रखा है)। जिस मार्ग से वस्तु को ग्राफ के मूल से प्राप्त किया जा सकता है उसे रिटेनिंग पथ कहा जाता है। जिन वस्तुओं के लिए एक रख-रखाव पथ प्राप्त करना असंभव है, उन्हें कचरा इकट्ठा होने के बाद अगली बार हटा दिया जाता है।

उपकरण

यहां प्रोफाइलिंग रेंडरिंग से स्थिति और भी खराब है। सामान्य उपकरण केवल क्रोम (क्रोम डेवलपर टूल) पर ब्राउज़रों में उपलब्ध हैं और भविष्य में IE 11. मैं क्रोम डेवलपर टूल का उपयोग करूंगा।

प्रोफाइलिंग की स्थिति

फिर:

आपके पास अन्य प्रोग्राम नहीं होने चाहिए;
क्रोमियम को डिफ़ॉल्ट सेटिंग्स के साथ शुरू किया जाना चाहिए (यदि कुछ प्रयोगात्मक सुविधाओं का उपयोग करके, उन्हें क्रोम पर डिफ़ॉल्ट रूप से रीसेट करें: // झंडे पृष्ठ);
परीक्षण किए गए साइट के साथ केवल एक टैब खुला छोड़ा जाना चाहिए (यह सीमा इस तथ्य के कारण है कि क्रोमियम एक प्रक्रिया में कई टैब प्रस्तुत कर सकता है, और, तदनुसार, रूपरेखा परिणामों में अतिरिक्त ऑब्जेक्ट होंगे);
प्लगइन्स को स्थापित नहीं किया जाना चाहिए (या उन्हें बंद कर दिया जाना चाहिए)। निजी मोड में या किसी अलग प्रोफ़ाइल के साथ क्रोमियम लॉन्च करके सबसे अच्छा है: < > --user-data-dir=< , > ।

हम उन मामलों की पहचान करते हैं जिनमें लीक हो सकते हैं

सामान्य तौर पर, ऐसा करने के लिए, आप window.performance.memory (केवल क्रोमियम> 22 में) से जानकारी लॉग इन करने का प्रयास कर सकते हैं और देख सकते हैं कि उपयोगकर्ताओं द्वारा कौन से कार्य किए गए थे जिनका usedJSHeapSize किया गया usedJSHeapSize (उपयोग की गई मेमोरी का आकार) totalJSHeapSize (प्रक्रिया में आवंटित JS मेमोरी का कुल आकार) के करीब है , या totalJSHeapSize में सिर्फ एक बड़ी संख्या। लेकिन मुझे यह लगता है कि यह बात गलत संख्या दिखाती है, क्योंकि लॉगिंग के बाद हमारे पास केवल 5% उपयोगकर्ता हैं, मेल का उपयोग करने के 7+ घंटे के बाद, जिसके साथ totalJSHeapSize 100 एमबी आ रहा है।

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

परीक्षण साइट खोलें (मेरे मामले में mail.yandex.ru पर) और रिकॉर्डिंग शुरू करें (Cmd + E)। फिर हम कई बार एक क्रिया करते हैं, जो हमारी राय में, स्मृति रिसाव को जन्म दे सकती है। मैंने अभी टूलबार में "चेक" पर क्लिक किया है। रिकॉर्डिंग के दौरान, हमें कुछ ऐसा मिलता है:

यह बहुत शीर्ष पैनल में ग्राफ पर ध्यान देना और "काउंटर" पैनल में आंकड़ों के साथ ग्राफ पर ध्यान देना महत्वपूर्ण है। ऊपरी ग्राफ़ में, हम देखते हैं कि स्मृति और वास्तव में, JSHeap का आकार अलग-अलग समय पर कैसे आवंटित किया जाता है। सामान्य तौर पर, एक छोटे बर्तन में विकास सामान्य है, क्योंकि अभी तक कचरा संग्रह नहीं हुआ है। यह समय के साथ होगा, और फिर अधिग्रहित मेमोरी का मूल्य सामान्य पर वापस आना चाहिए (हमारे मामले में - 8.4 एमबी)। आप जीसी के लिए इंतजार नहीं कर सकते हैं और कचरा संग्रह को मजबूर कर सकते हैं, अगर आप निचले बाएं हिस्से में बाल्टी पर क्लिक करते हैं। काउंटर पैनल में तीन संकेतक हैं:

दस्तावेज़ गणना - HTML दस्तावेज़ों की संख्या (इसमें फ़्रेम शामिल हैं);
डोम नोड गणना - डोम नोड की संख्या;
ईवेंट श्रोता गणना - ईवेंट हैंडलर की संख्या,

और समय की उपरोक्त अवधि में इन संकेतकों को बदलने के लिए एक कार्यक्रम है। ये संकेतक महत्वपूर्ण हैं क्योंकि उन्हें शीर्ष पर व्याप्त मेमोरी के ग्राफ पर ध्यान नहीं दिया जाता है। इसलिए, यदि कचरा इकट्ठा करने के बाद मटर बेसलाइन पर नहीं गिरता है, या काउंटरर्स पैनल में संकेतक पिछले वाले पर वापस नहीं आते हैं, तो हमें एक मामला मिला जो रिसाव की ओर जाता है।

रिसाव का कारण ज्ञात करें

ठीक है, हमें क्रियाओं का एक क्रम मिला है जो एक रिसाव की ओर जाता है। रिसाव के कारण का पता लगाने के लिए, इसमें प्रोफाइल पैनल और टेक हीप स्नैपशॉट आइटम का उपयोग करें।

टेक स्नैपशॉट बटन पर क्लिक करके, आप वर्तमान JSHeap स्नैपशॉट प्राप्त कर सकते हैं:

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

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

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

सारांश मोड में, सुविधा के लिए, आप शीर्ष पर खोज बार के माध्यम से निर्माता नाम से ऑब्जेक्ट फ़िल्टर कर सकते हैं। यदि आप समूह से एक वस्तु का चयन करते हैं, तो तल पर आप एक पेड़ के रूप में बनाए रखने का मार्ग देख सकते हैं:

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

तीन स्नैपशॉट की तकनीक

हमारे पास एक मामला है जिसमें समय पर हमने एक रिसाव को देखा:

इनबॉक्स में जाएं।
एक निश्चित टूलबार पर थोड़ा स्क्रॉल करें।
कई बार "चेक" दबाएँ।

उन वस्तुओं को खोजने के लिए जिन्हें हटाया नहीं गया है, हम तीन स्नैपशॉट की तकनीक का उपयोग करेंगे। मैं मेल के विकास संस्करण पर यह करूंगा ताकि संपत्तियों और चरों के नाम को अनफॉलो किया जा सके।

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

तो हम सभी लीक वस्तुओं को मिला। ऑब्जेक्ट्स की गणना कॉलम के परिणामों को क्रमबद्ध करें:

कैश्ड अक्षरों के सिस्टम डिजाइनरों और सरणियों के साथ शीर्ष के बाद, हम कुछ संदिग्ध डिव, स्पैन, लिंक और इनपुट देखते हैं। और उनमें से 7 बिल्कुल सही हैं - बस कई बार मैंने "चेक" बटन पर क्लिक किया। यदि हम HTMLInputElement का विस्तार करते हैं, तो हम देखेंगे कि सभी 7 ऑब्जेक्ट b-mail-dropdown__search__input _search__input क्लास के साथ संवेदनशील इनपुट हैं, जो केवल JS में संदर्भित रहते हैं:

यह स्क्रीनशॉट में दिखाई नहीं देता है, लेकिन कक्षा का पता लगाने के लिए, मैंने अभी एक इनपुट पर हॉवर किया है। रिटेनिंग पथ का उपयोग करते हुए, आप जल्दी से समझ सकते हैं कि यह एक ड्रॉपडाउन से इनपुट है (पहले HTMLDivElement में एक b-mail-dropdown क्लास है), जो बदले में एक ईवेंट हैंडलर में संदर्भित होता है (आप मानक _____ संरचना $ - कैश द्वारा समझ सकते हैं - []। ।] - संभाल - हाथी हमारा तत्व है)। टूलबार में लोडर के साथ अभी भी एक समस्या है - कचरा संग्रहण के बाद लोडर के साथ विभाजन को मंजूरी नहीं दी गई है।

रिसाव को ठीक करें

इसे ठीक करने के लिए, पहले हम अपने प्रोजेक्ट के JS कोड में b-mail-dropdown__search__input संदर्भ पाते हैं। हम दो फ़ाइलों "मेल / ब्लॉक / फ़ोल्डर-एक्शन / फ़ोल्डर्स-एक्शन.जेएस" और "ब्लॉक / लेबल-एक्शन / लेबल-एक्शन.जेएस" में पाते हैं। हाँ, उन पॉपअप फ़ोल्डर और टैग फिल्टर के साथ। फ़ोल्डर्स-एक्शन में b-mail-dropdown-disabled लिए एक डॉक्यूमेंट हैंडलर होता है, जो अंदर b-mail-dropdown-disabled जेकरी ऑब्जेक्ट को संदर्भित करता है। हैंडलर में जेन.ईवेंट action-move-status.change भी होता है, जिसे _toggle मेथड कहा जाता है, जो अंदर ड्रॉपडाउन jquery ऑब्जेक्ट को भी संदर्भित करता है। रिसाव से छुटकारा पाने के लिए, हम बस इन हैंडलर को onhtmldestroy में बांधते हैं और इस लिंक को nullify करते हैं this.$searchInput और this.$dropdown :

 Block.FoldersActions.prototype.onhtmldestroy = function() { $(document).off('click.newFolderClick') .off('b-mail-dropdown-disabled', this._dropdownHideHandler); Jane.events.unbind('action-move-status.change', this._moveStatusHandler); if (this.$searchInput) { this.$searchInput.off(); this.$searchInput = null; } if (this.$dropdown) { this.$dropdown.off(); this.$dropdown = null; } };

हम लेबल-क्रियाओं में भी ऐसा ही करते हैं। जाँच के बाद, ड्रॉपडाउन से सभी प्रभावित डिव, लिंक और इनपुट गायब हो जाते हैं। और टूलबार में लोडर के साथ, सब कुछ थोड़ा अलग है। "Neo2 / js / Components / loader.js" में ऐसा कोड है:

 var $toolbarSpinner = $('<div class="b-toolbar__spinner"/>'); var toolbarLoaderActive = false; Jane.Loader.createToolbarLoader = function(actionOpts, toolbarNode) { var $spinner = $toolbarSpinner.clone(); var $toolbarBtn = $(actionOpts.event && actionOpts.event.currentTarget); ... }

यह एक स्व-चालित फ़ंक्शन में है। जब हमें टूलबार में लोडर को जोड़ने की आवश्यकता होती है तो हम जेन.लॉडर.क्रीट। टूलबारलॉडर कहते हैं। वह $ टूलबारस्पिनर क्लोन करता है और क्लोन को HOUSE में सम्मिलित करता है। जैसा कि आप पहले से ही अनुमान लगा सकते हैं, $ टूलबारस्पिनर खुद अचेत रहता है और कभी भी साफ नहीं करता है। यह तय किया जा सकता है, यदि क्लोनिंग के बजाय, आप स्पिनर तत्व को फिर से बनाते हैं।

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

रिकॉर्ड ढेर आवंटन

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

एक उदाहरण के रूप में Yandex.Mail का उपयोग करके मेमोरी लीक को कैसे ढूंढें और ठीक करें