एंगुलरजेएस एप्लिकेशन को कैसे गति दें?

Question

मेरे पास एक एंजुलरजेएस ऐप है जिसमें एक पेजेड ग्रिड (दो नेस्टेड एनजी-दोहराना) है। एक पृष्ठ में लगभग 25x40 इनपुट तत्व हैं। शुरुआत में 1000 बाइंडिंग किए गए, पेजिंग प्रदर्शन स्वीकार्य था।

लेकिन फिर पृष्ठ की जटिलता बढ़ती है: गतिशील वर्ग, अलग-अलग संदर्भ मेनू, ग्रिड के प्रत्येक सेल के लिए सशर्त सामग्री। और अनुमानित 6000 बाइंडिंग (6 प्रति इनपुट तत्व) के साथ पेजिंग को अनुपयोगी धीमा हो गया।

मेरा सवाल है: मैं आमतौर पर AngularJS में प्रदर्शन समस्याओं का उपयोग कैसे करूं? मापने के लिए स्पष्ट पहला कदम है। लेकिन क्रोम प्रोफाइलर के नतीजे मुझे इतना नहीं बताते हैं कि कैसे आगे बढ़ना है।

Self  Total       Function 
----------------------------------------------------------------- 
24 ms 2.79 s angular.js:7997   Scope.$digest 
1 ms  1 ms controllers.js:365  setViewportData 
16 ms  692 ms angular.js:13968  ngRepeatWatch 
8 ms  22 ms angular.js:6439   extend.literal 
9 ms 1.22 s angular.js:14268  ngSwitchWatchAction 
16 ms  45 ms angular.js:12436  ngModelWatch 
0  621 ms angular-ui-4.0.js:264 initDateWidget 
0   13 ms angular.js:12859  ngClassWatchAction 
0   70 ms angular.js:14184  ngStyleWatchAction 
1 ms  5 ms angular-ui-4.0.js:261 getOptions 
0   16 ms angular.js:579   copy 
0   1 ms angular.js:4558   interpolateFnWatchAction 
1 ms  2 ms angular.js:5981   token.fn.extend.assign 
0   37 ms angular.js:8151   Scope.$eval 
1 ms  1 ms angular.js:6137   extend.constant 
14 ms  16 ms angular.js:651   equals 
1 ms  1 ms angular.js:4939   $interpolate.fn 

एक तरफ: वहाँ किसी भी संभावना है कि 'Object.observe()' भविष्य में बातें तेज़ हो जाएगी ('initDateWidget' अनदेखी, कि है स्पष्ट रूप से एक अलग विषय) क्या है?

Answer 1

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

मुझे पता है कि ऐसा करने के लिए यह बदसूरत है, लेकिन कोणीय वास्तव में 3000+ बाइंडिंग स्थापित करने के लिए नहीं है। चूंकि यह एक पाचन करता है और यह एक पर्यवेक्षक पैटर्न नहीं है, यह वास्तव में चीजों को धीमा कर देता है जो कई स्थापित होते हैं।

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

Answer 2

यदि आपने ऐसा नहीं किया है, तो कृपया AngularJS क्रोम प्लगइन, बटरंग स्थापित करें, जो आपको यह निर्धारित करने में मदद करेगा कि आपकी कौन सी बाइंडिंग आपको दुःख दे रही है। https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en

जैसा कि अन्य उत्तर बताता है, जो आप खोज रहे हैं, वह संभवतः आपकी तालिका के लिए एक अनंत-स्क्रॉल सेटअप का एक छोटा मामला है, जहां आप जिस मॉडल को बाध्य करते हैं वह वह सबसेट है जिसे आप ऑनस्क्रीन प्रदर्शित कर रहे हैं।

एनजी-ग्रिड घटक यह लागू करता है और इसे या तो सीधे इसका उपयोग करने या तकनीक चोरी करने के लायक हो सकता है। http://angular-ui.github.com/ng-grid/

Answer 3

थोड़ा देर से लेकिन शायद यह आपके लिए काम करता है:

https://github.com/Pasvaz/bindonce

आप बाध्यकारी तो $ बदलने को पचाने के लिए उन्हें अब और संसाधित नहीं करेंगे नहीं होती हैं कि उन पर इसका इस्तेमाल कर सकते हैं।

Answer 4

संसाधन

This post about angularJS performance on large lists विकल्पों प्रदर्शन ट्यूनिंग के लिए आपके पास का एक अच्छा सिंहावलोकन है।

उत्तर के ऊपर (बटरंग प्लगइन को छोड़कर) का भी उल्लेख किया गया है। यह सिर्फ उस लेख में युक्तियों का एक सिंहावलोकन है।

limitTo (पृष्ठांकन)

अधिक स्पष्ट समाधान में से एक अपने दृश्य में आइटम्स की संख्या को कम करके बाइंडिंग की मात्रा को कम करने के लिए है के साथ कम डेटा।ng-repeat पर limitTo फ़िल्टर के साथ डेटा का अंकन किया जा सकता है।

उदाहरण How to improve performance of ngRepeat over a huge dataset (angular.js)? पर इस आलेख में a jsbin example जुड़ा हुआ है।

यह भी सुनिश्चित करें कि डेटा प्रदान करने के लिए इनलाइन विधि का उपयोग न करें क्योंकि प्रत्येक $ पाचन पर इसका मूल्यांकन किया जाएगा।

<li ng-repeat="item in filteredItems()"> // Bad idea, since very often evaluated. 
<li ng-repeat="item in items"> // Way to go! 

bindonce

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

बाइंडोन समाधान 2 तरीके बाध्यकारी को हटाने से कहीं अधिक है। मूल रूप से यह बाध्यकारी हटा दिए जाने से पहले एक बार बाध्य होने के लिए मूल्य की प्रतीक्षा करता है। अपने लिए सबसे अच्छा पढ़ें। विवरण के लिए the bindonce project देखें।

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

उपयोग एनजी ग्रिड

Ng-grid लाभ यह है कि यह केवल तत्व है कि वर्तमान में दिखाई दे रहे हैं renders है। http://angular-ui.github.io/ng-grid/ पर और पढ़ें।

इसी तरह के ng-if छिपा तत्वों को पूरी तरह से डीओएम पेड़ से हटा देता है जबकि ng-show केवल उन्हें जगह में रखता है लेकिन छुपा रहता है। ध्यान दें कि ng-if फिर से दिखाए जाने पर मूल की मूल प्रतिलिपि (मूल कुंजी है, परिवर्तन नहीं है) तत्व रखेगा।

छानने

लेख भी सूचियों छानने के लिए कुछ महान युक्तियाँ है के लिए युक्तियाँ।

फ़िल्टर किए गए तत्वों को छिपाने के लिए ng-show का उपयोग करने की तरह इस तरह से डेटा के किसी भी उपन्यास को नहीं बनाया जाना चाहिए।

और एक अन्य तकनीक जिसे "उपयोगकर्ता इनपुट को डिबॉन्स" कहा जाता है। उस अंतिम विकल्प को फ़िल्टरिंग के साथ प्रतीक्षा करना है जब तक कि उपयोगकर्ता टाइपिंग बंद नहीं कर देता। a jsfiddle example सहित।

अधिक

लिंक किए गए आलेख में अधिक युक्तियां मिल सकती हैं। वहाँ सूचीबद्ध संसाधन भी हैं ताकि एक अच्छा प्रारंभिक बिंदु होना चाहिए। मुझे विश्वास है कि सबसे स्पष्ट ऑनिस और त्वरित जीत सूचीबद्ध हैं।

एक और अच्छा writeup How does data binding work in AngularJS?

Answer 5

कोणीय 1.3 में है और अधिक आप का उपयोग करने के लिए उपयोग :: कोई जरूरत नहीं द्वारा एक बार बाध्य कर सकते हैं अन्य 3 पार्टी js

<li ng-repeat="item in :: items"> 

यह अच्छा है अगर आइटम नहीं बदलेगा इसलिए आप उन्हें

Answer 6

घड़ियों की संख्या सीमित करना अक्सर एक लंबा रास्ता तय कर सकते हैं।यहाँ है कि, घड़ियां

http://www.syntaxsuccess.com/viewarticle/547a8ba2c26c307c614c715e

Answer 7

मैं प्रदर्शन के मुद्दों का सामना करना पड़ा की संख्या कम करने में जब श्रोता की राशि एक डेटा ग्रिड घटक में 1000 से अधिक exceded लिए प्रभावी रहे हैं तकनीक का सार है।

मैंने प्रतिक्रियाओं का उपयोग करके इस मुद्दे को हल किया, जो प्रतिक्रिया.जेएस का उपयोग करके मेरा विचार बनाता है। निर्देश ने एक अद्यतन फ़ंक्शन का खुलासा किया।

प्रत्येक बार जब डेटा बदलता है (नियंत्रक में), अद्यतन फ़ंक्शन ने निर्देश को ट्रिगर किया, और फिर react.js इंजन ने प्रतिपादन को कुशलतापूर्वक किया।

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

अंत में मैंने angular.js का उपयोग करना बंद कर दिया और प्रतिक्रिया.जेएस + FLUX में स्थानांतरित हो गया। मुझे लगता है कि यह बेहतर है लेकिन मुझे पता है कि कोणीय से बदलाव करना आसान नहीं है, लेकिन इसके लायक है।

Angular directive that uses react.js

Answer 8

मैं बड़े डेटा के साथ एनजी ग्रिड के साथ प्रदर्शन के मुद्दों था, यह Angular Grid इसकी जगह द्वारा हल किया गया था। इसकी वेबसाइट पर डेमो यह 100,000 पंक्तियों को आसानी से प्रबंधित करता है।

Answer 9

मैंने कुछ हफ्तों के लिए इसके साथ कुश्ती की है। मैंने पाया है कि दो चीजों ने काफी अंतर किया है:

(i) एक बार बाइंडिंग: एक बार बाइंडिंग का उपयोग करें जहां आप कर सकते हैं; और (ii) DEBOUNCE: इनपुट के लिए जो मुझे तुरंत प्रचारित करने की आवश्यकता नहीं है, लेकिन 250ms तक प्रतीक्षा कर सकता है, एक डिबॉउशन सेटिंग सेट कर सकता है। इसने मेरी बड़ी एनजी-दोहराने वाली तालिका में एक अविश्वसनीय अंतर बना दिया है। मैं इस बात पर जोर नहीं दे सकता कि एक बहस सेटिंग कितनी प्रभावी है। (यहां देखें: https://docs.angularjs.org/api/ng/directive/ngModelOptions)

Answer 10

bject.observe() ब्राउज़र पर सही डेटा-बाइंडिंग लाने के लिए एक प्रस्तावित तंत्र है। यह वस्तुओं और सरणी में परिवर्तनों को देखने के लिए एक तंत्र का खुलासा करता है, इन वस्तुओं को किए गए उत्परिवर्तनों के बारे में दूसरों को सूचित करता है। https: // stackoverflow

<!DOCTYPE html> 
<html> 
<head> 
<base target="_blank"> 
<title>Object.observe()</title> 

<link rel="stylesheet" href="../css/main.css" /> 

</head> 

<body> 

<div id="container"> 

    <h1><a href="https://shailendrapathakbits.wordpress.com/" title="code_lab_by_shail ">code_lab_by_shail</a> Object.observe()</h1> 

    <p>An object <code>o</code> is created and <code>Object.observe()</code> is called on it.</p> 

    <p>Three changes are made to <code>o</code> and <code>Object.observe()</code> records these changes as shown below.</p> 

    <p>Use the console to find out what happens if you make further changes to <code>o</code>: it's defined in global scope.</p> 

    <p>Call <code>Object.unobserve(o, observer)</code> to stop observing changes.</p> 

    <p id="data" style="font-size: 14px;"></p> 

    <script src="js/main.js"></script> 

    <a href="https://github.com/shailendra9/objectobserver/blob/master/index.html" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a> 

</div> 

<script src="../js/lib/ga.js"></script> 

</body> 
</html> 

Answer 11

तुम भी द्वारा Disabling Debug Data