कोणीयज पाचन चक्र की अवधि को मापने का एक सरल तरीका क्या है? पाचन चक्र के प्रदर्शन का विश्लेषण करने के लिए विभिन्न तरीके मौजूद हैं, हालांकि प्रत्येक अपने स्वयं के पिटफल्स के साथ आता है:
... एक बेहतर तरीका होना चाहिए? 1!
जवाबों:
यहाँ एक रहस्य है। क्रोम देव उपकरणों में, एक सीपीयू प्रोफ़ाइल चलाएं। आपके द्वारा कैप्चर करने से रोकने के बाद, स्क्रीन के निचले भाग में "हैवी (बॉटम अप)" के बगल में एक नीचे त्रिकोण है। त्रिकोण पर क्लिक करें और "ज्वाला चार्ट" चुनें। एक बार जब आप फ्लेम चार्ट मोड में होते हैं, तो आप डाइजेस्ट साइकल को देखने के लिए ज़ूम और पैन कर सकते हैं कि वे कितनी देर लगते हैं, और वास्तव में क्या फ़ंक्शन कहा जा रहा है। ज्वाला चार्ट पृष्ठ लोड समस्याओं, एनजी-दोहराने प्रदर्शन समस्याओं, चक्र समस्याओं को पचाने के लिए अविश्वसनीय रूप से उपयोगी है! मैं वास्तव में नहीं जानता कि मैं फ्लेम चार्ट से पहले कैसे डिबग और प्रोफ़ाइल करने में सक्षम था। यहाँ एक उदाहरण है:
निम्नलिखित उत्तर आपको $ डाइजेस्ट लूप के निष्क्रिय प्रदर्शन को बताएगा , अर्थात, आपके किसी भी घड़ी के भाव में परिवर्तन होने पर पाचन का प्रदर्शन। यह तब मददगार होता है जब दृश्य बदलने पर भी आपका एप्लिकेशन सुस्त लगता है। अधिक जटिल स्थितियों के लिए, aet का उत्तर देखें।
कंसोल में निम्न टाइप करें:
angular.element(document).injector().invoke(function($rootScope) {
var a = performance.now();
$rootScope.$apply();
console.log(performance.now()-a);
})
परिणाम आपको पाचन चक्र की अवधि, मिलीसेकंड में देगा। जितनी छोटी संख्या, उतना अच्छा।
ध्यान दें:
डॉमी ने टिप्पणियों में नोट किया:
angular.element(document)यदि आपng-appआरंभीकरण के लिए निर्देश का उपयोग करते हैं तो ज्यादा उपज नहीं होगी । उस स्थिति में,ng-appइसके बजाय तत्व प्राप्त करें । जैसे करकेangular.element('#ng-app')
आप भी आजमा सकते हैं:
angular.element(document.querySelector('[ng-app]')).injector().invoke(function($rootScope) {
var a = performance.now();
$rootScope.$apply();
console.log(performance.now()-a);
})
The listener is called only when the value from the current watchExpression and the previous call to watchExpression are not equal। आपका कोड किसी भी श्रोता को ध्यान में नहीं रखता है। और कोणीय श्रोताओं के बहुत सारे बनाता है। $apply()जब कुछ भी नहीं बदला है तो आप कभी भी फोन नहीं करेंगे , इसलिए आपके परिणाम केवल कहानी का आधा हिस्सा बताते हैं। परिस्थितियों के आधार पर यह कम दिलचस्प हो सकता है;)
angular.element(document)यदि आप ng-appआरंभीकरण के लिए निर्देश का उपयोग करते हैं तो अधिक उपज नहीं होगी । उस स्थिति में, ng-appइसके बजाय तत्व प्राप्त करें । जैसे कि angular.element('#ng-app')...
यहाँ एक नया उपकरण मिला है जो पाचन में मदद करता है: डाइजेस्ट-एचयूडी
आप कोणीय-प्रदर्शन का भी उपयोग कर सकते हैं
यह एक्सटेंशन दर्शकों की संख्या, डाइजेस्ट टाइमिंग और डाइजेस्ट रेट की रियल टाइम मॉनिटरिंग चार्ट प्रदान करता है। आपको पाचन का समय वितरण भी मिलता है ताकि आप अधिक पुनरावर्ती पितरों से असाधारण रूप से लंबे समय तक पचने का समय बना सकें और सभी रीयलटाइम डेटा को घटनाओं से जोड़ा जाता है ताकि आप यह निर्धारित कर सकें कि किन कार्यों ने अनुप्रयोग प्रदर्शनों को बदल दिया है। अंत में, आप सेवाओं की विधि का समय निर्धारित कर सकते हैं और अपने निष्पादन को गिन सकते हैं ताकि यह निर्धारित किया जा सके कि आपके ऐप के रनिंग समय पर अधिक प्रभाव है या नहीं।
विस्मयादिबोधक: मैं विस्तार का लेखक हूं
पाचन चक्र पर नज़र रखने के लिए एक आसान उपकरण @kentcdodds द्वारा उत्कृष्ट एनजी-आँकड़े उपकरण के माध्यम से पाया जा सकता है । यह थोड़ा दृश्य तत्व जैसा बनाता है, और इसे बुकमार्कलेट के माध्यम से भी लागू किया जा सकता है। इसे jsfiddle जैसे iFrames के अंदर भी इस्तेमाल किया जा सकता है।
अपने पृष्ठ के कोणीय पाचन / घड़ियों के बारे में आँकड़े दिखाने के लिए थोड़ी सी उपयोगिता। इस लाइब्रेरी में वर्तमान में चार्ट बनाने के लिए एक सरल स्क्रिप्ट है (नीचे देखें)। यह एक मॉड्यूल भी बनाता है जिसे
angularStatsएक निर्देश कहा जाता हैangular-statsजिसका उपयोग आपके द्वारा निर्दिष्ट पृष्ठ पर एक विशिष्ट स्थान पर कोणीय आँकड़े लगाने के लिए किया जा सकता है।
आप UX Profiler का उपयोग कर सकते हैं
सख्त मोड के लिए, एक पचाने का नाभिक, इसे क्रोम में f12 कंसोल में चलाएं
angular.element(document).injector().invoke(['$rootScope',function($rootScope) { var a = performance.now(); $rootScope.$apply(); return performance.now()-a; }])
ऊपर वर्णित उपकरण पहले से ही आपको पाचन लूप के प्रदर्शन को मापने का विचार देते हैं अधिकांश आयातकों ने पाचन चक्र के प्रदर्शन को बढ़ाने के लिए अंक दिए हैं
सभी अदृश्य तत्वों को छिपाने के लिए बारीकी से स्क्रॉल घटनाओं की निगरानी करें और देखने
वालों की संख्या को कम करें।
अन्य सभी घटनाओं के लिए प्रबंधनीय $ पचाने वाले चक्र हैं।