AngularJS
प्रदर्शन प्रोफाइलिंग

सभी प्रोफाइलिंग के बारे में

प्रोफाइलिंग क्या है?

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

क्यों जरूरी है?

प्रोफाइलिंग महत्वपूर्ण है क्योंकि आप तब तक प्रभावी ढंग से अनुकूलन नहीं कर सकते जब तक आप यह नहीं जानते कि आपका कार्यक्रम अपना अधिकांश समय क्या कर रहा है। अपने कार्यक्रम के निष्पादन समय (प्रोफाइलिंग) को मापने के बिना, आपको नहीं पता होगा कि क्या आपने वास्तव में इसे सुधार लिया है।

उपकरण और तकनीक:

1. क्रोम का इन-बिल्ट देव टूल

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

   एक समयरेखा रिकॉर्डिंग करें और संदेहास्पद लंबी घटनाओं का मूल्यांकन करें। यदि आपको कोई भी मिलता है, तो आप जेएस प्रोफाइलर को सक्षम कर सकते हैं और अपनी रिकॉर्डिंग को फिर से कर सकते हैं ताकि जेएस फ़ंक्शन को कॉल किया गया और प्रत्येक को कितना समय लगा। अधिक पढ़ें...

2. FireBug (फ़ायरफ़ॉक्स के साथ उपयोग)

3. डायनाट्रेस (IE के साथ उपयोग)

4. बतरंग (क्रोम के साथ उपयोग)

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

5. चौकीदार (क्रोम के साथ उपयोग)

   एक कोणीय ऐप में देखने वालों की संख्या गिनने के लिए अच्छा और सरल यूआई।

6. अपने कोणीय ऐप में वॉचर्स की संख्या का मैन्युअल रूप से पता लगाने के लिए निम्न कोड का उपयोग करें ( क्रेडिट्स के @ इंक्रिप्शन की तरह जेरेड नंबर )

(function() {
    var root = angular.element(document.getElementsByTagName('body')),
        watchers = [],
        f = function(element) {
        angular.forEach(['$scope', '$isolateScope'], function(scopeProperty) {
            if(element.data() && element.data().hasOwnProperty(scopeProperty)) {
                angular.forEach(element.data()[scopeProperty].$$watchers, function(watcher) {
                watchers.push(watcher);
                });
            }
        });

        angular.forEach(element.children(), function(childElement) {
            f(angular.element(childElement));
        });
    };
 
    f(root);
 
    // Remove duplicate watchers
    var watchersWithoutDuplicates = [];
    angular.forEach(watchers, function(item) {
        if(watchersWithoutDuplicates.indexOf(item) < 0) {
            watchersWithoutDuplicates.push(item);
        }
    });
    console.log(watchersWithoutDuplicates.length);
})();

7. कई ऑनलाइन टूल / वेबसाइट उपलब्ध हैं जो आपके एप्लिकेशन की एक प्रोफ़ाइल बनाने के लिए कई प्रकार की कार्यक्षमता प्रदान करते हैं।

   ऐसी ही एक साइट है: https://www.webpagetest.org/

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

अगला कदम:

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

हैप्पी कोडिंग :)