javascript - AngularJS: विभिन्न ऊंचाइयों के साथ पंक्ति के साथ वर्चुअल दोहराना




ionic angularjs-ng-repeat (4)

क्या आपने समाधान के रूप में React.js पर एक नज़र डाली है? यह वर्चुअल डॉम का उपयोग करता है जो लंबी सूचियों को और अधिक कुशल अद्यतन करता है।

गिटहब पर एक ओपन-सोर्स रेपो है जो एंगुलर और रिएक्ट को मिश्रित करता है, जिसे एनजीआरएक्ट कहा जाता है।

अवलोकन: http://ngreact.github.io/ngReact/

दस्तावेज़: http://ngreact.github.io/ngReact/docs/ngReact.html

रेपो: https://github.com/ngReact/ngReact

उम्मीद है की यह मदद करेगा।

मैं आयनिक और कोणीयजेएस (कोणीय जेएस-सामग्री) का उपयोग कर एक संकर ऐप का निर्माण कर रहा हूं। इस ऐप में नोड.जेएस और सॉकेट.ओओ के साथ निर्मित एक एकीकृत चैट भी है।

मुझे अब समस्या है कि केवल 200 संदेशों के साथ ऐप सभी संदेशों को लोड करने में बहुत धीमा हो जाता है (ब्राउज़र में 200ms -> ऐप में 4sec, क्रॉसवॉक के साथ भी, और message.id द्वारा ट्रैक के साथ) और टेक्स्टरेरा में टाइप करना सम्मिलित करें संदेश धीमा हो गया है।

मेरे पास इसे हल करने के लिए दो समाधान हैं:

  1. आभासी दोहराना (एमडी-वर्चुअल-दोहराना)
  2. अनंत स्क्रॉल (आयन-अनंत-स्क्रॉल)

1) मुझे लगता है कि वर्चुअल दोहराना सबसे अच्छा समाधान होगा (मैंने इसे पहले से ही किसी अन्य पेज पर लागू कर दिया है और यह 1500 आइटमों को एक आकर्षण की तरह स्क्रॉल करता है) लेकिन समस्या यह है कि संदेशों में उनके लंबाई और एमडी वर्चुअल- दोहराने की आवश्यकताएं हैं कि सभी तत्वों के पास काम करने के लिए समान ऊंचाई होनी चाहिए।

2) तो हो सकता है कि हम अनंत स्क्रॉल विधि पर जा सकें लेकिन समस्या अब यह है कि आयन-अनंत-स्क्रॉल निर्देश के साथ ऐसा करना थोड़ा मुश्किल हो जाता है क्योंकि चैट को लोड करने की आवश्यकता होती है अधिक () शीर्ष तक पहुंचने पर और नीचे नहीं ।

तो मेरा सवाल यह है: क्या किसी के पास चैट के अंदर एक चिकनी / तेज़ एनजी-दोहराना या वर्चुअल-दोहराव निर्देश है जो विभिन्न ऊंचाइयों या शीर्ष पर काम करने वाली अनंत स्क्रॉल को संभाल सकता है ?


चीजें जो आप इसे तेज करने की कोशिश कर सकते हैं।

एक को त्वरित-एनजी-दोहराना जैसे कुछ उपयोग करना होगा: कोणीय जेएस एनजी-दोहराने में निर्मित के बजाय https://github.com/allaud/quick-ng-repeat

एक और one time binding का उपयोग करना होगा जहां कोणीय को प्रत्येक पाचन चक्र के दौरान लगातार परिवर्तन की तलाश करने से रोकने के लिए संभव हो: https://docs.angularjs.org/guide/expression#one-time-binding one time binding

और निश्चित रूप से, यदि यह संभव है, तो यह पता लगाने के लिए कि कौन से फ़ंक्शन एप्लिकेशन को धीमा कर रहे हैं, क्रोम के डेवलपर टूल प्रोफ़ाइल विकल्प का उपयोग करने का प्रयास करें; )

पीएस: इस थ्रेड को देखने के लायक हो सकता है कि रिवर्स अनंत स्क्रॉलिंग को कैसे कार्यान्वित किया जा सकता है: AngularJS में ngInfiniteScroll निर्देश का उपयोग कर एक रिवर्स अनंत स्क्रॉल को कार्यान्वित करना


रिवेट्स जैसे अलग बाइंडरों का उपयोग करना एक अच्छा समाधान हो सकता है, इसे एकीकृत करना आसान है और इसके पास आरवी-प्रत्येक लूप है


md-virtual-repeat या collection-repeat जैसी कुशल स्क्रॉल सूचियों को काम करने के लिए प्रत्येक आइटम की ऊंचाई जानने की आवश्यकता है। ऐसा इसलिए है क्योंकि उन्हें स्क्रॉल स्थिति जानने की आवश्यकता है, उदाहरण के लिए स्क्रॉलबार दिखाने या त्वरित स्वाइप-डाउन गति के लिए फ़्रेम को छोड़ने में सक्षम होना। स्क्रॉल स्थिति केवल तभी मिल सकती है जब आप जानते हैं कि कितना स्क्रॉल किया गया है (हमें उपरोक्त तत्वों की ऊंचाई की आवश्यकता है) और स्क्रॉल करने के लिए कितना बचा है (हमें नीचे तत्वों की ऊंचाई की आवश्यकता है)।

आप लूप में इंजेक्शन देने से पहले प्रत्येक तत्व की ऊंचाई की गणना करने के लिए कारखाने का उपयोग कर सकते हैं। यह एक ही कंटेनर को लक्षित कंटेनर (जैसे सीएसएस वर्ग) के रूप में एक ही कंटेनर बनाकर किया जा सकता है, नए लोड किए गए तत्वों को जोड़ना, उनकी ऊंचाई की गणना करना ( element.offsetHeight का उपयोग करके), और कंटेनर को बाद में हटा देना।

ध्यान रखें कि यह काफी भारी है और संभवतः एक छोटी सी अंतराल का कारण बन जाएगा।





angular-material