🍭 🔮 🀄️ AngularJS में लंबी सूची के लिए प्रदर्शन अनुकूलन 🗨️ 🐫 👩🏾‍🤝‍👨🏼

AnglarJS महान है! लेकिन जब जटिल डेटा संरचनाओं वाली बड़ी सूचियों के साथ काम करना, यह बहुत धीरे-धीरे काम करना शुरू कर सकता है! हमें इस समस्या का सामना करना पड़ा जब हमारे व्यवस्थापक पैनल को AngularJS में पोर्ट किया। लगभग 500 लाइनों को प्रदर्शित करते समय बिना देरी के काम करना चाहिए था। लेकिन पहला प्रदर्शन 7 सेकंड तक चला। बेकार!
हमें अपने कार्यान्वयन में दो अड़चनें मिलीं। एक ng-repeat निर्देश के साथ जुड़ा था, और दूसरा फिल्टर के साथ।
यह आलेख विभिन्न प्रयोगों के साथ हमारे प्रयोगों के परिणामों के बारे में बात करता है, या समस्या को हल करने के लिए अलग-अलग तरीकों से, जो समस्या उत्पन्न हुई। यह आपको विचार और सुझाव देगा कि आप अपनी ताकत कहां रख सकते हैं और किन तरीकों का इस्तेमाल नहीं किया जाना चाहिए।

एनजी-रिपीट निर्देश बड़ी सूचियों के साथ धीरे-धीरे क्यों काम करता है?

ng-repeat निर्देश धीरे-धीरे काम करना शुरू कर देता है यदि 2500 से अधिक तत्वों के साथ दो-तरफा बाध्यकारी को सूचियों के लिए बनाया जाता है। आप मिसको हेवरी द्वारा पोस्ट में इसके बारे में अधिक पढ़ सकते हैं। ऐसा इसलिए है क्योंकि AngularJS "गंदे चेक" विधि का उपयोग करके परिवर्तन को ट्रैक करता है। प्रत्येक परिवर्तन ट्रैकिंग में कुछ समय लगेगा, जो एक जटिल डेटा संरचना के साथ बड़ी सूचियों के लिए आपके आवेदन को धीमा करता है।

प्रदर्शन विश्लेषण के लिए प्रयुक्त पूर्वापेक्षाएँ

निर्देश के काम के घंटे ट्रैक करना:
सूची के प्रदर्शन समय को मापने के लिए, हमने एक सरल निर्देश लिखा जो ng-repeat की अवधि को अपनी $last संपत्ति का उपयोग करके मापता है। आधार तिथि हमारी TimeTracker सेवा में संग्रहीत है, इसलिए परिणाम सर्वर से डेटा डाउनलोड करने पर निर्भर नहीं करता है।

 //       angular.module('siApp.services').directive('postRepeatDirective', ['$timeout', '$log', 'TimeTracker', function($timeout, $log, TimeTracker) { return function(scope, element, attrs) { if (scope.$last){ $timeout(function(){ var timeFinishedLoadingList = TimeTracker.reviewListLoaded(); var ref = new Date(timeFinishedLoadingList); var end = new Date(); $log.debug("## DOM  : " + (end - ref) + " ms"); }); } }; } ]);

HTML में उपयोग:

 <tr ng-repeat="item in items" post-repeat-directive>…</tr>

Chrome में विकास टूल का उपयोग करके ऐतिहासिक ट्रैकिंग की सुविधाएँ
Chrome डेवलपर टूल के कालक्रम टैब (समयरेखा) पर, आप ईवेंट्स देख सकते हैं, प्रति सेकंड ब्राउज़र फ़्रेमों की संख्या (फ्रेम) और मेमोरी (मेमोरी) का आवंटन। मेमोरी लीक का पता लगाने और मेमोरी की मात्रा का निर्धारण करने के लिए मेमोरी टूल उपयोगी है। पृष्ठ फ़्लिकरिंग एक समस्या बन जाती है जब फ़्रेम ताज़ा दर 30 फ्रेम प्रति सेकंड से कम होती है। फ़्रेम टूल पृष्ठ की प्रदर्शन जानकारी प्रदर्शित करता है। इसके अलावा, यह प्रदर्शित करता है कि सीपीयू जावास्क्रिप्ट का कितना समय लेता है।

सूची के आकार को सीमित करने वाली मूल सेटिंग्स

इस समस्या को कम करने का सबसे अच्छा तरीका प्रदर्शित सूची के आकार को सीमित करना है। यह पेजेशन या अंतहीन स्क्रॉलिंग द्वारा किया जा सकता है।

पृष्ठ पर अंक लगाना

हमारा पृष्ठांकन विधि AngularJS limitTo फ़िल्टर (संस्करण 1.1.4 से) और हमारे startFrom फ़िल्टर के संयोजन पर आधारित है। यह दृष्टिकोण प्रदर्शित सूची के आकार को सीमित करके प्रदर्शन समय को कम करता है। यह प्रदर्शन समय को कम करने का सबसे प्रभावी तरीका है।

 //      $scope.currentPage = 0; $scope.pageSize = 75; $scope.setCurrentPage = function(currentPage) { $scope.currentPage = currentPage; } $scope.getNumberAsArray = function (num) { return new Array(num); }; $scope.numberOfPages = function() { return Math.ceil($scope.displayedItemsList.length/ $scope.pageSize); }; //   startFrom angular.module('app').filter('startFrom', function() { return function(input, start) { return input.slice(start); };

HTML में उपयोग।

 <!--     --> <button ng-repeat="i in getNumberAsArray(numberOfPages()) track by $index" ng-click="setCurrentPage($index)">{{$index + 1}}</button <!--   --> <tr ng-repeat="item in displayedItemsList | startFrom: currentPage * pageSize | limitTo:pageSize" /tr>

यदि आप पेजिंग का उपयोग नहीं करना चाहते हैं या नहीं कर सकते हैं , लेकिन आप अभी भी धीमे फिल्टर की समस्या से चिंतित हैं, तो चरण 5 को देखने के लिए बहुत आलसी न हों, और अनावश्यक सूची आइटम ng-hide लिए ng-hide का उपयोग करें।

अंतहीन स्क्रॉलिंग

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

अनुकूलन दिशानिर्देश

1. डेटा बाइंडिंग के बिना एक सूची प्रदर्शित करें

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

2. डेटा प्राप्त करने के लिए अंतर्निहित विधि कॉल का उपयोग न करें

फ़िल्टर किए गए संग्रह को सीधे नियंत्रक में प्राप्त करने के लिए फ़िल्टर किए गए संग्रह को प्राप्त करने के लिए विधि का उपयोग न करें। ng-repeat प्रत्येक $ पच चक्र पर सभी अभिव्यक्तियों का मूल्यांकन करता है, अर्थात्। यह बहुत बार किया जाता है। हमारे उदाहरण में, filteredItems() एक फ़िल्टर्ड संग्रह लौटाता है। यदि यह धीरे-धीरे चलता है, तो यह जल्दी से पूरे एप्लिकेशन को धीमा कर देगा।

 <li ng-repeat="item in filteredItems()"> <!--,      .--> <li ng-repeat="item in items"> <!--     -->

3. दो सूचियों का उपयोग करें (एक दृश्य को प्रदर्शित करने के लिए, दूसरा डेटा स्रोत के रूप में)

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

 /*  */ //   var items = [{name:"John", active:true }, {name:"Adam"}, {name:"Chris"}, {name:"Heather"}]; //    $scope.displayedItems = items; //   var filteredLists['active'] = $filter('filter)(items, {"active" : true}); //   $scope.applyFilter = function(type) { if (filteredLists.hasOwnProperty(type){ //      $scope.displayedItems = filteredLists[type]; } else { /*     */ } } //   $scope.resetFilter = function() { $scope.displayedItems = items; }

देखने में:

 <button ng-click="applyFilter('active')"> </button> <ul><li ng-repeat="item in displayedItems">{{item.name}}<li></ul>

4. पूरक करने के लिए एनजी-शो के बजाय एनजी का उपयोग करें

यदि आप सूची आइटम पर अतिरिक्त जानकारी प्रदर्शित करने के लिए अतिरिक्त निर्देशों या टेम्पलेट्स का उपयोग करते हैं, यदि आप उस पर क्लिक करते हैं, तो एनजी- इफ़ (तब से संस्करण 1.1.2) का उपयोग करें। ng-if प्रदर्शन को निष्क्रिय करता है ( ng-show विपरीत)। इस मामले में, अतिरिक्त तत्व जोड़े जाते हैं, और बाइंडिंग को हल किया जाता है, जब वे आवश्यक होते हैं।

 <li ng-repeat="item in items"> <p> {{ item.title }} </p> <button ng-click="item.showDetails = !item.showDetails">Show details</buttons> <div ng-if="item.showDetails"> {{item.details}} </div> </li>

5. एनगुलरजेएस निर्देशों जैसे एनजी-माउसेंटर, एनजी-मूसलीव, आदि का उपयोग न करें।

हमारी राय में, अंतर्निहित एंगुलरजेएस ng-mouseenter के उपयोग से स्क्रीन झिलमिलाहट का कारण बनी। ब्राउज़र में फ्रेम दर ज्यादातर मामलों में 30 फ्रेम प्रति सेकंड से नीचे था। एनीमेशन प्रभाव और हॉवर प्रभाव बनाने के लिए शुद्ध jQuery का उपयोग इस समस्या को हल करने में मदद करेगा। बाद में DOM में जोड़े गए तत्वों से सूचनाएँ प्राप्त करने के लिए jQuery.live () के साथ केवल माउस ईवेंट को लपेटना याद रखें।

6. फ़िल्टरिंग के लिए गुण सेट करना। एनजी-शो के साथ बहिष्कृत आइटम छिपाएं

लंबी सूचियों के साथ, फ़िल्टर भी अधिक धीमी गति से काम करते हैं, क्योंकि प्रत्येक फ़िल्टर मूल सूची का अपना सबसेट बनाता है। कई मामलों में, जब प्रारंभिक डेटा नहीं बदलता है, तो फ़िल्टर को लागू करने का परिणाम समान रहता है। इसका उपयोग करने के लिए, आप डेटा की सूची को पूर्व फ़िल्टर कर सकते हैं, और फ़िल्टर परिणाम को उस समय लागू कर सकते हैं जब इसकी आवश्यकता होगी, प्रसंस्करण समय पर बचत।
ng-repeat निर्देश के साथ फ़िल्टर लागू करते समय, प्रत्येक फ़िल्टर मूल संग्रह का सबसेट देता है। AngularJS DOM से फ़िल्टर द्वारा बाहर किए गए तत्वों को भी हटाता है, और $destroy घटना $destroy बढ़ाता है, जो उन्हें $scope से भी निकालता है। जब इनपुट संग्रह बदलता है, तो फ़िल्टर के माध्यम से पारित तत्वों का एक सबसेट भी बदल जाता है, जो फिर से उन्हें फिर से लाल या नष्ट कर देता है।
ज्यादातर मामलों में, यह व्यवहार सामान्य है, लेकिन उस स्थिति में जब उपयोगकर्ता अक्सर फ़िल्टरिंग का उपयोग करता है या सूची बहुत बड़ी है, निरंतर लिंकिंग और तत्वों का विनाश प्रदर्शन को बहुत प्रभावित करता है। फ़िल्टरिंग को गति देने के लिए, आप ng-show और ng-hide निर्देशों ng-show उपयोग कर सकते हैं। नियंत्रक में फिल्टर की गणना करें और प्रत्येक तत्व के लिए एक संपत्ति जोड़ें। इस संपत्ति के मूल्य के साथ ng-show उपयोग करें। इसके परिणामस्वरूप ng-hide निर्देश मूल संग्रह, $scope और DOM के सबसेट से तत्वों को हटाने के बजाय केवल एक विशिष्ट वर्ग जोड़ देगा।

ng-show को आमंत्रित करने का पहला तरीका अभिव्यक्ति सिंटैक्स का उपयोग करना है। ng-show अभिव्यक्ति का मूल्यांकन अंतर्निहित फ़िल्टर सिंटैक्स का उपयोग करके किया जाता है।
निम्नलिखित प्लंकर उदाहरण भी देखें ।
```
 <input ng-model="query"></input> <li ng-repeat="item in items" ng-show="([item.name] | filter:query).length">{{item.name}}</li> 
```
एक अन्य तरीका ng-show में एक विशेषता के माध्यम से एक विशिष्ट मूल्य पारित करना है, और एक अलग उप-नियंत्रक में पारित मूल्य के आधार पर आगे की गणना। यह विधि कुछ अधिक जटिल है, लेकिन इसका अनुप्रयोग क्लीनर है, जो बेन नडेल ने अपने ब्लॉग पर एक लेख में पुष्टि की है।

7. फ़िल्टरिंग प्रॉम्प्ट सेट करना: इनपुट डेटा को अग्रेषित करना

क्लॉज 6 में वर्णित विधियों के अलावा, बार-बार फ़िल्टरिंग की समस्या को हल करने का एक और तरीका है, उपयोगकर्ता इनपुट भेजना। उदाहरण के लिए, यदि उपयोगकर्ता किसी खोज स्ट्रिंग में प्रवेश करता है, तो उपयोगकर्ता को प्रवेश करने के बाद फ़िल्टर को सक्रिय करने की आवश्यकता होती है।
इस दृष्टिकोण का उपयोग करने का एक अच्छा उदाहरण निम्नलिखित सेवा है । इसे अपने विचार और नियंत्रक में निम्नानुसार उपयोग करें:

 /* */ //         350 . $scope.$watch('queryInput', function(newValue, oldValue) { if (newValue === oldValue) { return; } $debounce(applyQuery, 350); }); var applyQuery = function() { $scope.filter.query = $scope.query; };

 /* */ <input ng-model="queryInput"/> <li ng-repeat= item in items | filter:filter.query>{{ item.title }} </li>

आगे पढ़ने के लिए

विशाल अनुप्रयोगों के लिए परियोजना संगठन
एंगुलर में डेटा बाइंडिंग प्रदर्शन के बारे में एक सवाल का मिसको हेवरी स्टैकऑवरफ्लो जवाब देता है
एनजी-दोहराने प्रदर्शन को बेहतर बनाने के विभिन्न तरीकों पर लघु लेख
मांग पर बड़ा डेटा डाउनलोड करें
अच्छा स्कोप आर्टिकल
गतिशील टेम्पलेट्स के लिए AngularJS परियोजना
डेटा बाइंडिंग के बिना प्रदर्शित करें

AngularJS में लंबी सूची के लिए प्रदर्शन अनुकूलन