jQuery या जावास्क्रिप्ट पेज की मेमोरी उपयोग खोजने के लिए

Question

क्या यह पता लगाने का एक तरीका है कि किसी वेब पेज या मेरे jquery एप्लिकेशन द्वारा कितनी मेमोरी का उपयोग किया जा रहा है?

यहाँ मेरी स्थिति है:

मैं एक jquery frontend और JSON में डेटा परोसने वाले एक आरामदायक बैकएंड का उपयोग करके एक डेटा हैवी वेबपॉइंट बना रहा हूं। पृष्ठ को एक बार लोड किया जाता है, और फिर सब कुछ अजाक्स के माध्यम से होता है।

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

उत्तरों के आधार पर, मैं कुछ स्पष्ट करना चाहूंगा:

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

Comments

आपको यह निर्धारित करने के लिए कि आपके पास वेबपेज का उपयोग करते समय मेमोरी इश्यू हैं या नहीं, यह निर्धारित करने के लिए आपको अपने वेबऐप के उपयोगकर्ताओं के प्रकार की जांच करनी चाहिए। या क्या आप अपने वेबैप के साथ मेमोरी / परफॉरमेंस की समस्याएँ हैं?

— प्रुतसुन्दर

@Prutswonder: नहीं, मुझे कोई परेशानी नहीं हो रही है, लेकिन मैं इस तरह के उपकरण मौजूद होने पर बहुत उत्सुक था। सिर्फ यह सोचा कि टैब पर केवल एक निश्चित सीमा निर्धारित करने के बजाय, यह एक गतिशील तरीका शांत हो सकता है।

— टॉरेन

मैंने प्रश्न को स्पष्ट करने में मदद के लिए कुछ अतिरिक्त विवरण जोड़े हैं कि मैं एक रनटाइम समाधान की तलाश कर रहा हूं, न कि बिल्ड-टाइम समाधान।

— टॉरन

बस एक सवाल, अगर कुछ पहले से ही कैश था, तो क्या अब भी गिना जाएगा?

— अजाक्स333221

Answer 1

2015 अपडेट

2012 में यह संभव नहीं था, यदि आप सभी प्रमुख ब्राउज़रों का उपयोग करना चाहते थे। दुर्भाग्य से, अभी यह अभी भी केवल क्रोम (एक गैर-मानक एक्सटेंशन window.performance) सुविधा है।

window.performance.memory

ब्राउज़र समर्थन: क्रोम 6+

---

2012 उत्तर

क्या यह पता लगाने का एक तरीका है कि किसी वेब पेज या मेरे jquery एप्लिकेशन द्वारा कितनी मेमोरी का उपयोग किया जा रहा है? मैं एक रनटाइम सॉल्यूशन (केवल डेवलपर टूल नहीं) की तलाश कर रहा हूं, ताकि मेरा एप्लिकेशन उपयोगकर्ता के ब्राउज़र में मेमोरी उपयोग के आधार पर क्रियाओं को निर्धारित कर सके।

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

DOM तत्वों या दस्तावेज़ के आकार की गणना एक अच्छा अनुमान हो सकता है, लेकिन यह काफी गलत हो सकता है क्योंकि इसमें इवेंट बाइंडिंग, डेटा (), प्लगइन्स और अन्य इन-मेमोरी डेटा संरचना शामिल नहीं होगी।

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

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

लेकिन उन्हें सारांशित करने का कोई आसान तरीका नहीं है। आप एक ट्रैकिंग सिस्टम लागू कर सकते हैं जो इन सभी सूचनाओं को एकत्रित करता है। सभी ऑपरेशनों को उपयुक्त ट्रैकिंग विधियों को कॉल करना चाहिए। उदाहरण के लिए:

अपने डेटा आवंटन के बारे jQuery.dataमें ट्रैकिंग सिस्टम को सूचित करने के लिए लपेटें या अधिलेखित करें।

HTML जोड़तोड़ लपेटें ताकि सामग्री को जोड़ना या निकालना भी ट्रैक हो ( innerHTML.lengthयह सबसे अच्छा अनुमान है)।

यदि आप बड़े-इन-मेमोरी ऑब्जेक्ट रखते हैं, तो उनकी निगरानी भी की जानी चाहिए।

ईवेंट बाइंडिंग के लिए आपको इवेंट डेलिगेशन का उपयोग करना चाहिए और फिर इसे कुछ हद तक निश्चित कारक भी माना जा सकता है।

एक अन्य पहलू जो आपकी मेमोरी आवश्यकताओं को सही ढंग से अनुमान लगाने में कठिन बनाता है, वह यह है कि विभिन्न ब्राउज़र मेमोरी को अलग तरह से आवंटित कर सकते हैं (जावास्क्रिप्ट ऑब्जेक्ट्स और डोम तत्वों के लिए)।

Comments

innerHTML.lengthस्मृति या रैम या सीपीयू (या कुछ और, मुझे नहीं पता है) को भी संसाधित करने के लिए नहीं लेता है?

— 22

इस सुविधा के लिए ब्राउज़र समर्थन IE9 + या क्रोम के अलावा कुछ भी नहीं है। Window.performance.memory केवल Chrome है। docs.webplatform.org/wiki/apis/timing/properties/memory

— Blunderfest

आप सही हैं, मुझे लगा कि मेमोरी नेविगेशन टाइमिंग स्टैंडर्ड और window.performanceऑब्जेक्ट का हिस्सा है । पुरानी "समर्थित" प्रविष्टियाँ उस मानक के लिए लागू थीं। Chrome द्वारा window.performance.memoryएक गैर-मानक एक्सटेंशन माना जाता है ।

— gblazex

Window.performance.memory के माध्यम से वास्तविक समय मेमोरी मॉनिटरिंग को सक्षम करने के लिए, आपको Chrome को --enable- सटीक-मेमोरी-इंफॉर्मेशन फ्लैग के साथ शुरू करना होगा।

— kluverua

अपडेट: ओपेरा भी इसका समर्थन करता है। स्रोत: मोज़िला developer.mozilla.org/en-US/docs/Web/API/…

— HoldOffHunger

Answer 2

आप नेविगेशन टाइमिंग एपीआई का उपयोग कर सकते हैं ।

नेविगेशन टाइमिंग वेब पर प्रदर्शन को सही ढंग से मापने के लिए एक जावास्क्रिप्ट एपीआई है। एपीआई सटीक और विस्तृत समय आँकड़े प्राप्त करने के लिए एक सरल तरीका प्रदान करता है - मूल रूप से पेज नेविगेशन और लोड घटनाओं के लिए।

window.performance.memory जावास्क्रिप्ट मेमोरी उपयोग डेटा तक पहुँच देता है।

अनुशंसित पाठ

• नेविगेशन समय के साथ पृष्ठ लोड गति को मापने

Comments

शानदार सुझाव। धन्यवाद।

— मैक्सिमोर्लोव्स्की

Answer 3

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

मेमोरी-स्टैटिस्टिक्स.जेएस: https://github.com/paulirish/memory-stats.js/tree/master

यह स्क्रिप्ट (जिसे आप किसी भी समय किसी भी पृष्ठ पर चला सकते हैं) पृष्ठ की वर्तमान मेमोरी को प्रदर्शित करेगी:

var script=document.createElement('script');
script.src='https://rawgit.com/paulirish/memory-stats.js/master/bookmarklet.js';
document.head.appendChild(script);

Comments

ऐसा लगता है कि जेएस मेमोरी उपयोग और पेज मेमोरी उपयोग की सूचना नहीं है, क्रोम के अंतर्निहित टास्क मैनेजर का कहना है कि जीमेल 250 एमबी का उपयोग कर रहा है, जबकि मेमोरी-स्टैटिस्टिक्स। रिपोर्ट्स 33.7 एमबी

— ब्रैंडिटो

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

— होल्डऑफ ह्यूंगर

Answer 4

मैं किसी भी तरह से नहीं जानता कि आप वास्तव में यह पता लगा सकते हैं कि ब्राउज़र द्वारा कितनी मेमोरी का उपयोग किया जा रहा है, लेकिन आप पृष्ठ पर तत्वों की संख्या के आधार पर एक अनुमानी का उपयोग करने में सक्षम हो सकते हैं। Uinsg jQuery, आप कर सकते हैं $('*').lengthऔर यह आपको DOM तत्वों की संख्या की गिनती देगा। ईमानदारी से, हालांकि, यह शायद कुछ प्रयोज्य परीक्षण करना आसान है और समर्थन करने के लिए निश्चित संख्या में टैब के साथ आते हैं।

Comments

@tvanfosson: एक बुरा विचार नहीं है, लेकिन यह मुझे गैर-DOM मेमोरी, जैसे .data () और मेमोरी डेटा संरचनाओं के बारे में जानकारी देने वाला नहीं है। लेकिन यह समग्र वजन का एक अच्छा अनुमान दे सकता है जिसका मैं उपयोग कर सकता हूं।

— टॉरेन

Answer 5

क्रोम हीप स्नैपशॉट टूल का उपयोग करें

मेमोरीबग नामक एक फायरबग टूल भी है लेकिन ऐसा लगता है कि यह अभी तक बहुत परिपक्व नहीं है।

Comments

@ पाब्लो: धन्यवाद। मैं निश्चित रूप से देव टूल्स का उपयोग कर रहा हूं, लेकिन मैं कुछ ऐसा खोजने की उम्मीद कर रहा था जिसे मैं प्रत्येक उपयोगकर्ता के ब्राउज़र में मेमोरी उपयोग के लिए रनटाइम के दौरान उपयोग कर सकता हूं।

— टॉरन

Answer 6

यदि आप परीक्षण के लिए बस देखना चाहते हैं तो मेमोरी उपयोग को ट्रैक करने के लिए डेवलपर पृष्ठ के माध्यम से Chrome में एक तरीका है, लेकिन यह सुनिश्चित नहीं है कि इसे सीधे जावास्क्रिप्ट में कैसे किया जाए।

Comments

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

— टॉरन

अगर आपको पता है कि मुझे पता है, तो मुझे एक काम करना पसंद होगा

— Zachary K

Answer 7

मैं अन्य उत्तरों से एक पूरी तरह से अलग समाधान का सुझाव देना चाहता हूं, अर्थात् आपके आवेदन की गति का निरीक्षण करने के लिए और एक बार जब यह निर्धारित स्तर से नीचे चला जाता है, तो उपयोगकर्ता को टैब बंद करने, या खोलने से नए टैब को अक्षम करने के लिए सुझाव दिखाता है। एक साधारण वर्ग जो इस तरह की जानकारी प्रदान करता है, उदाहरण के लिए https://github.com/mrdoob/stats.js है । उस के अलावा, इस तरह के एक गहन आवेदन के लिए यह बुद्धिमान नहीं हो सकता है कि सभी टैब को पहले स्थान पर रखें। उदाहरण के लिए, केवल उपयोगकर्ता की स्थिति (स्क्रॉल) और हर बार सभी डेटा लोड करते हुए, लेकिन अंतिम दो टैब खोल रहे हैं, एक सुरक्षित विकल्प हो सकता है।

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

Answer 8

मेरे साथ एक समान प्रोजेक्ट शुरू करने के लिए एकदम सही सवाल!

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

यह एक आर्किटेक्चर मुद्दा होगा यदि मेमोरी लीक प्रकट होती है या अप्रयुक्त तत्व बनी रहती है। यह सुनिश्चित करना कि बंद टैब की सामग्री को पूरी तरह से हटा दिया जाए बिना घटना संचालकों आदि को सही किया जाएगा; यह मानते हुए कि आपने ऐसा किया है कि आप किसी ब्राउज़र में भारी उपयोग का अनुकरण कर सकते हैं और मेमोरी मॉनिटरिंग से परिणामों को एक्सट्रपलेट कर सकते हैं (टाइप करें: एड्रेस बार में मेमोरी )

Protip: यदि आप IE, FF, Safari ... और Chrome में एक ही पृष्ठ खोलते हैं; और Chrome में मेमोरी करने के लिए : Chrome में मेमोरी , यह अन्य सभी ब्राउज़रों में मेमोरी उपयोग की रिपोर्ट करेगा । साफ!

Answer 9

आप क्या करना चाहते हो सकता है कि सर्वर उस सत्र के लिए अपने बैंडविड्थ का ट्रैक रखता है (उन्हें कितने बाइट डेटा भेजे गए हैं)। जब वे सीमा से अधिक हो जाते हैं, तो अजाक्स के माध्यम से डेटा भेजने के बजाय, सर्वर को एक त्रुटि कोड भेजना चाहिए जो जावास्क्रिप्ट का उपयोग उपयोगकर्ता को यह बताने के लिए करेगा कि उन्होंने बहुत अधिक डेटा का उपयोग किया है।

Comments

@incrediman: यह एक अच्छा विचार है, लेकिन मुझे नहीं लगता कि यह बहुत सारे ट्रैकिंग सुविधाओं के निर्माण के बिना काम करेगा - बस एक बाइट गिनती काम नहीं करेगी। समस्या यह है कि टैब में डेटा एक सूची है जिसे उपयोगकर्ता कई अलग-अलग तरीकों से फ़िल्टर और सॉर्ट करेगा। हर बार जब वे परिवर्तन करते हैं, तो नया डेटा सर्वर से पुनर्प्राप्त किया जाएगा और वर्तमान डोम तत्वों को बदल देगा। इसके अलावा, क्या कहते हैं कि वे "पुनः लोड" नहीं करते हैं, और एक नए पृष्ठ से शुरू करते हैं? मुझे 304 और उसके बाद भी ट्रैक करना होगा, लेकिन मैं सिर्फ स्थैतिक html की सेवा करने का इरादा रखता हूं, सभी डेटा एक REST सेवा से आता है।

— टॉरेन

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

— होल्डऑफ ह्यूंगर

Answer 10

आप document.documentElement.innerHTML प्राप्त कर सकते हैं और इसकी लंबाई की जांच कर सकते हैं। यह आपको अपने वेब पेज द्वारा उपयोग किए जाने वाले बाइट्स की संख्या देगा।

यह सभी ब्राउज़रों में काम नहीं कर सकता है। तो आप एक विशाल div में अपने सभी शरीर तत्वों को संलग्न कर सकते हैं और उस div पर इनरबुक को कॉल कर सकते हैं। कुछ इस तरह<body><div id="giantDiv">...</div></body>

Comments

उत्पन्न innerHTMLस्ट्रिंग की लंबाई उस HTML को रेंडर करने के लिए ब्राउज़र द्वारा उपयोग की जाने वाली मेमोरी (जैसे, इसके आंतरिक ऑब्जेक्ट मॉडल में) के साथ उपयोगी रूप से संबद्ध होने की संभावना नहीं है ।

— टीजे क्राउडर

और यही वजह है कि? मेरा तर्क यह है कि यदि ब्राउज़र में कुछ टेक्स्ट लोड किया गया है, तो उसे मेमोरी में स्टोर करना होगा। तो यह पेज को रेंडर करने के लिए ब्राउज़र द्वारा उपयोग की जाने वाली मेमोरी का कुछ माप देता है।

— मिडट

इस तरह से इसके बारे में सोचो। अगर आप कहते हैं, "मैं आपको 10 मिलियन डॉलर देना चाहूंगा", तो यह 8 शब्द हैं। दूसरी ओर, अगर आपने कहा कि "मैं आपके नैपकिन पर छींक मारना चाहूंगा", तो यह 7. क्या पहले केवल 8/7 दूसरे से अधिक मूल्यवान है?

— अंतर्वासित

यह DOM तत्वों की गिनती प्राप्त करने के @tvanfosson सुझाव के समान है। आपका शायद थोड़ा अधिक सटीक है क्योंकि विभिन्न डोम तत्वों में अलग-अलग मात्रा में पाठ हो सकते हैं। लेकिन यह अभी भी डेटा () के बारे में कोई जानकारी नहीं प्राप्त करता है, हैंडर्स पर क्लिक करें, मेमोरी डेटा संरचनाओं और ऑब्जेक्ट्स में, और इसके आगे। मेरा ऐप इन सुविधाओं का बहुत उपयोग करता है।

— टॉरेन

इस दायरे में JS वैरिएबल हो सकते हैं जो DOM नोड को अलग करने के लिए इंगित करते हैं, जो दस्तावेज़ तत्व का हिस्सा नहीं होगा। इसके अलावा, आप पृष्ठ पर पाठ को प्रभावित किए बिना, एक बहुत लंबी स्ट्रिंग को एक चर में लोड करने के लिए, मेमोरी की गीगाबाइट का उपभोग करने के लिए कोड लिख सकते हैं।

— जोश रिबाकोफ