कोणीयजेएस: विभिन्न ऊंचाइयों के साथ पंक्ति के साथ आभासी दोहराना

Question

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

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

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

1) मुझे लगता है कि:

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

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

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

Answer 1

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

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

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

डॉक्स: http://ngreact.github.io/ngReact/docs/ngReact.html

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

आशा इस मदद करता है।

Answer 2

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

Answer 3

लिए मुझे लगता है कि आयनिक निर्देश collection-repeat हो सकता है आप के लिए क्या देख रहे हैं।

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

Answer 4

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

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

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

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

पुनश्च: Implementing a reverse infinite scroll using ngInfiniteScroll directive in AngularJS

Answer 5

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

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

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

डेमो

Answer 6

देखो: demo

मैं मदों की गणना ऊंचाई के लिए लाइन की लंबाई का उपयोग करें।

यह बहुत अनुमानित विधि है। हमारे ऐप में हम जानते हैं कि फ़ॉन्ट आकार 15 पीएक्स वाले एक अंग्रेजी चरित्र की चौड़ाई लगभग 6.7 पीएक्स होगी (यह ठीक है, अगर आप मोनोस्पेस फ़ॉन्ट का उपयोग करते हैं, लेकिन यह हमारा मामला नहीं है)। साथ ही हम हमेशा एक सेगमेंट लाइन की प्रत्येक सेगमेंट और ऊंचाई की चौड़ाई जानते हैं। itemHeight = commulativeTextLenght/lineWidth + paddingsOfItem; लाइन ब्रेक स्टाइल भी आपकी गणना को प्रभावित कर सकता है। आम तौर पर हमारे पास लगभग 8000 टेक्स्ट पैराग्राफ की ऊंचाई की गणना करने के लिए कोई खराब विधि नहीं थी।