मैं एंगुलरजेएस के साथ कैलेंडर यूआई प्रस्तुत कर रहा हूं और सप्ताहों में फ़्लिप करते समय मैं कुछ बड़े प्रदर्शन मुद्दों में भाग रहा हूं। मुझे समझाने दो।डीओएम मनोरंजन प्रदर्शन समस्याओं नेस्टेड एनजी-दोहराना
यूआई इस तरह दिखता है: दिनों में प्रत्येक व्यक्ति को मैं पाश के लिए
मैं सभी व्यक्तियों से अधिक पाश, तो, और फिर उस दिन के लिए है कि उपयोगकर्ता के लिए कैलेंडर वस्तुओं प्रस्तुत करना। कुछ इस तरह (सरलीकृत):
<div ng-repeat="user in ::ctrl.users track by user.id" class="row">
<div ng-repeat="day in ctrl.days" class="cell">
<div ng-repeat="item in ctrl.items[user.id][day] track by item.id">
<div class="item">
इस पृष्ठ (लगभग 500) पर द्रष्टा के एक पागल राशि नहीं कर रहे हैं, लगभग सब कुछ बाँध-एक बार किया जाता है।
समस्या तब होती है जब उपयोगकर्ता पिछले या अगले सप्ताह लोड करने के लिए पिछला/अगला बटन क्लिक करता है। यह ctrl.days सरणी को नए दिनों के साथ बदलता है, और सभी सही आइटम लोड होते हैं। यह तब तक ठीक प्रदर्शन करता है जब तक आपके पास लोगों और कैलेंडर आइटमों का एक टन न हो। फिर डीओएम तत्वों के सभी नष्ट और पुनर्निर्माण वास्तव में धीमी है।
मैं डॉली तत्वों को कैश करने और पुन: उपयोग करने के लिए है, लेकिन मेरे बाहरी एनजी-दोहराने वाले परिवर्तन (ctrl.days), आंतरिक एनजी-दोहराव (वस्तुओं के साथ) को फिर से बनाया गया है। तो यह वास्तव में काम नहीं करता है।
मैं इस समस्या को कैसे हल कर सकता हूं? अभी बड़े डेटा-सेट वाले सप्ताहों के माध्यम से ब्राउज़ करना लगभग 2 सेकंड लगता है, जो निश्चित रूप से स्वीकार्य नहीं है। उपयोगकर्ताओं और कैलेंडर आइटमों के एक छोटे से सेट के साथ सबकुछ सुपर स्नैपी है।
सभी दिनों के लिए डोम (अर्थात् सभी सप्ताह) पैदा करते हैं और पिछले और अगले सप्ताह बटन एक सूचकांक बदल देते हैं। फिर आप इस सूचकांक का उपयोग दिनों की दृश्यता (या कुछ अन्य सीएसएस वर्ग) को बदलने के लिए करते हैं। उम्मीद है कि समझ में आता है। – potatopeelings
एक कैलेंडर मूल रूप से अनंत है, वास्तव में उन सभी वस्तुओं को सामने लाने का विकल्प नहीं है। यहां तक कि अगर मैं इसे 4 सप्ताह तक सीमित कर दूंगा, तो यह अभी भी हजारों डीओएम तत्व होंगे ... –
यदि आपका दृश्य पोर्ट आकार तय किया जा रहा है। आप डोम अपफ्रंट बना सकते हैं और अकेले मानों को स्वैप कर सकते हैं। कुछ