सेन्चा ऐप्स ui थ्रेड

Question

पर प्रतिपादन पर धीमा हो गया है मैं सेन्चा टच 2.2.1 का उपयोग कर सेन्चा वेब ऐप बना रहा हूं। मेरे आवेदन में मेरे पास स्क्रीन है जिसमें एक कंटेनर होता है जहां मैंने एकाधिक पैनल जोड़े। एक पैनल में दो पैनल होते हैं, एक शीर्ष पैनल और आंतरिक पैनल।

पृष्ठ की शुरुआत पर, मैं कंटेनर में प्रत्येक आइटम के शीर्ष पैनल के लिए डेटा की सूची लाने के लिए AJAX api को कॉल कर रहा हूं। और शीर्ष पैनल पर क्लिक किया गया, मैं उस आइटम के लिए एपीआई को आंतरिक पैनल के लिए डेटा लाने के लिए बुला रहा हूं। एपीआई कॉल पर, मैं आंतरिक पैनल में डेटा प्रस्तुत कर रहा हूं और उस पैनल को दृश्यमान बना रहा हूं। शीर्ष कोड पर एक कंटेनर में सभी वस्तुओं के लिए यह कोड समान है।

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

getDetailData:function(params){ 
    var detailStore=Ext.getStore('DetailData'); 

    detailStore.load({ 
     callback:function(data,opt,success) { 
      detailStore.storeDetailData(data); 
      _this.onShowDetailData(data); 

      // now call next api from here until all items data fetched and displayed 
     } 
    }); 
} 

इस मामले में, सभी आइटम डेटा लाने और UI धागे पर प्रतिपादन करने में अधिक समय लग रहा है और ऐप धीमा हो रहा है।

डेटा प्रस्तुत करते समय, मुझे प्रत्येक बार डेटा प्रस्तुत करने से पहले डेटा फ़िल्टर करने के लिए स्टोर पर फ़िल्टर लागू करना होगा।

मैं जानना चाहता था कि मैं इस प्रसंस्करण और काम को कैसे प्रस्तुत करना चाहिए। AJAX एपीआई कॉल और सर्वर से डेटा लाने में अधिक समय नहीं लग रहा है लेकिन प्रसंस्करण और प्रतिपादन में अधिक समय लग रहा है।

इस पर कोई suggessions,

धन्यवाद

Answer 1

मैं अपने डेटा जनसंख्या से अपने पैनल निर्माण को अलग करने के बारे में सोचना होगा। यही है, जब आपका ऐप लोड हो रहा है, तो अपने पैनल बनाएं, फिर जब आप अपना एक्सएचआर बनाते हैं तो आप डेटा को पैनलों में धक्का दे सकते हैं और AJAX कॉल, पैनल निर्माण और विजेट को उसी समय प्रस्तुत करने के बजाय उन्हें दिखा सकते हैं।

आप Chrome डेवलपर टूल का या Compuware के प्रोफाइलर जैसे बाहरी उपकरणों के साथ प्रोफ़ाइल टैब के साथ अपने जावास्क्रिप्ट रूपरेखा द्वारा समस्या जकड़ना की कोशिश कर सकते (मैं इसे इस्तेमाल किया जब यह dynaTrace था):

http://www.compuware.com/en_us/application-performance-management/products/ajax-free-edition/overview.html

हालांकि, मेरे अनुभव से आपको शायद सेन्चा विधियों में बहुत समय लगेगा, जिससे यह देखना मुश्किल हो जाता है कि किन परिवर्तनों की आवश्यकता है।

आखिरकार, पुराने ब्राउज़र इस प्रतिपादन को नए ब्राउज़र की तुलना में बहुत धीमे कर देंगे। यदि आप आईई 6, 7, और 8 का समर्थन करने से बच सकते हैं - तो आपका सेन्चा ऐप अधिक प्रतिक्रियाशील होगा!

Answer 2

सबसे पहले मैं उपरोक्त सुझाव के रूप में प्रोफाइलिंग करता हूं। आपको एपीआई कॉल को गीला करने की आवश्यकता है या लेआउट प्रतिपादन धीमा है।

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

यदि आपको लगता है कि आपका जटिल लेआउट प्रदर्शन समस्याओं का कारण है तो आप या तो अपने स्क्रीन लेआउट पर पुनर्विचार कर सकते हैं या किसी कंटेनर के टीपीएल में दिए गए सादे HTML के साथ कुछ सेन्चा नियंत्रणों को प्रतिस्थापित कर सकते हैं।

Answer 3

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