उच्च प्रदर्शन GWT। भाग 1

यह पोस्ट GWT अनुप्रयोगों के प्रदर्शन के अनुकूलन और सुधार के बारे में लेखों की एक श्रृंखला की शुरुआत है। चूंकि मैंने बहुत सारी सामग्री जमा की है, इसलिए मैंने इसे 2-3 भागों में तोड़ने का फैसला किया।
हम यह वर्णन करने के लिए आगे बढ़ते हैं कि पहले लेख में हमारा क्या इंतजार है।

पूछे जाने वाले प्रश्न

GWT अनुप्रयोगों के अनुकूलन पर लेखों की एक श्रृंखला के पहले भाग में, मैं निम्नलिखित बातों के बारे में बात करूंगा:

• क्लाइंट कोड जुदाई, ऑन-डिमांड डाउनलोड
• क्लाइंट पर भारी वर्गों के उपयोग से छुटकारा पाना
• संसाधन कैशिंग
• GWT RPC प्रदर्शन समस्याएँ REST का उपयोग करना
• आवेदन पर लेआउट के प्रभाव की विशेषताएं
• संचरण अनुकूलन
• शेड्यूलर का उपयोग करना
• सर्वर अनुरोधों को भेजने के लिए डिस्पैचर का उपयोग करना

और अब प्रत्येक उल्लेखित बिंदुओं के बारे में विस्तार से।

क्लाइंट कोड जुदाई, ऑन-डिमांड डाउनलोड

GWT में एक अंतर्निहित तंत्र है जो डेवलपर को एप्लिकेशन को भागों में "कट" करने की अनुमति देता है। यह आवश्यक है, सबसे पहले, निम्नलिखित उद्देश्यों के लिए:

• डाउनलोड किए गए डेटा का प्रारंभिक आकार कम करना
• विलंबित लोडिंग के सिद्धांत का उपयोग करना - आवश्यक डेटा को एप्लिकेशन द्वारा आवश्यक रूप से डाउनलोड किया जाएगा

क्लाइंट कोड को भागों में विभाजित करने के लिए, GWT.runAsync विधि का उपयोग किया जाता है।
RunAsync उदाहरण:

 GWT.runAsync(new RunAsyncCallback() { public void onSuccess() { new MySettingsDialog().show(); } public void onFailure(Throwable ohNoes) { // indicate that something went wrong, // usually a connectivity or server problem } }); 

उसी समय, GWT कंपाइलर न केवल क्लाइंट कोड को विभाजित करने के कार्य को करने की जिम्मेदारी लेता है, बल्कि कोड को कोड करने के तरीके का विश्लेषण भी करता है। यह गारंटी दी जाती है कि अलगाव सही होगा। हालाँकि, अलगाव नहीं हो सकता है। इसका कारण कोड में क्रॉस-रेफरेंस हो सकता है।
Google I / O के साथ GWT कैन डू प्रेजेंटेशन में, आप runAsync का उपयोग करके इसे भागों में काटने से पहले और बाद में एप्लिकेशन डाउनलोड गति की तुलना देख सकते हैं:



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

क्लाइंट पर भारी वर्गों के उपयोग से छुटकारा पाना

Google वेब टूलकिट समूह पृष्ठ पर, आप संकलित GWT अनुप्रयोग के आकार को कम करने के तरीकों के बारे में चर्चा पा सकते हैं। विशेष रूप से, एक दृष्टिकोण नोट किया गया है जिसमें क्लाइंट पक्ष पर "भारी" वर्गों का उपयोग करने से इंकार करना शामिल है, जिससे क्लाइंट पक्ष पर बड़ी मात्रा में कोड को शामिल किया जा सके।
सबसे पहले, हम क्लाइंट पर तुलनित्र का उपयोग करने का एक उदाहरण दे सकते हैं। इसका उपयोग करने से कोड संबंधित कक्षाओं के ~ 10 Kb के ग्राहक भाग में शामिल किए जाने की आवश्यकता होती है।
RequestFactory का उपयोग करने से क्लाइंट में और भी अधिक वृद्धि होती है - ऊपर उल्लिखित चर्चा में, क्लाइंट का हिस्सा 150 Kb तक बढ़ गया।
बाहरी मॉड्यूल का उपयोग करते समय यह भी सावधान रहने के लायक है - यह बहुत संभव है कि परियोजना में उनका समावेश कई अन्य वर्गों के अतिरिक्त होने के कारण ग्राहक के हिस्से में उल्लेखनीय वृद्धि करेगा।

संसाधन कैशिंग

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

• हर बार लोड करने के बजाय आवश्यक संसाधन को लोड किया जाएगा
• संग्रहीत संसाधनों की कुल मात्रा कम होगी

ग्राहक संग्रहण के साथ संसाधन संग्रहण कैसे कम करता है?
वापस GWT कर सकते हैं क्या प्रस्तुति। इसमें हम निम्नलिखित चित्र देख सकते हैं:



इस प्रकार, उसी डेटा को संग्रहीत करने के लिए ओवरहेड को कम किया जाता है।
परिणामस्वरूप संसाधनों को कैसे कम किया जा सकता है?

GWT RPC प्रदर्शन समस्याएँ REST का उपयोग करना

GWT RPC वास्तव में सुविधाजनक उपकरण है। सेवा के लिए क्लाइंट और सर्वर कोड को व्यवस्थित करने के लिए एक इंटरफ़ेस प्रदान करना, आईडीई से समर्थन प्राप्त करना, यह GWT में AJAX अनुप्रयोगों के निर्माण की अद्भुत विशेषताओं में से एक है। हालांकि, यह विचार करने योग्य है कि क्या यह आपको सूट करता है।
GWT RPC का उपयोग करने के मामले में मुख्य नुकसान अनुरोध के बहुत अधिक अनावश्यक डेटा और डीबगिंग की जटिलता के अतिरिक्त हो सकते हैं।
REST के उपयोग को इन समस्याओं के समाधान के रूप में नोट किया जा सकता है। Zack Grossbart के एक लेख में , आप GWT परियोजनाओं के लिए REST का उपयोग करने का एक उदाहरण पा सकते हैं।
उसी समय, उनके लेख में 4 अधिक GWT एंटी-पैटर्न, REST के मुख्य लाभ नोट किए गए हैं:

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

आवेदन पर लेआउट के प्रभाव की विशेषताएं

बहुत बार gwt डेवलपर ऑटो-समायोजित लेआउट का उपयोग करते हैं। इसका एक उदाहरण घटकों में ऊंचाई = "100%" का उपयोग है। यह कहने योग्य है कि contentHeight, ऑफसेटहाइट भारी संचालन हैं। निम्न आईईएच ऑफसेटहाइट रनटाइम आँकड़े Google I / O 2009 से माप में मिलीसेकंड प्रस्तुति में लिया गया है:



न केवल ऑपरेशन के परिणाम की भविष्यवाणी की खराब है; 18 मापों के लिए इसका शिखर मूल्य 85 एमएस के आदेश के मूल्य पर पहुंच गया।
आकार बदलने वाली घटना के पूर्ण प्रसंस्करण में कुछ समय लगता है। अक्सर, मजबूर लेआउट के मामले में आकार बदलने की प्रक्रिया स्टाइल पुनर्गणना की तुलना में कई गुना अधिक समय लेती है।
आप इस समस्या से कैसे छुटकारा पा सकते हैं? आपको CSS का उपयोग करना चाहिए। एक सीएसएस-परिभाषित लेआउट बहुत तेजी से प्रस्तुत करेगा, घटकों के पूरे डोम पदानुक्रम के लिए ऑफसेटहाइट जैसे हेवीवेट तरीकों को लागू करने की आवश्यकता को समाप्त करेगा।
आप एक अद्यतन DockPanel का उपयोग कर सकते हैं जो आकार बदलने के विकल्प के दौरान javaScript का उपयोग नहीं करता है।

नेस्टेड विजेट के बड़े पेड़ों को बनाने और संग्रहीत करने के लिए यह बहुत हतोत्साहित किया जाता है। विजेट में एक अतिरिक्त ओवरहेड होता है जो ग्राहक की उपयोग की जाने वाली मेमोरी और परिणाम (और परिणामस्वरूप गति) को नकारात्मक रूप से प्रभावित करता है। आप समाधान के रूप में HTMLPanel का उपयोग कर सकते हैं। पृष्ठों पर विजेट की संख्या को ट्रैक करने के लिए, एक इंस्पेक्टरविजट टूल है। आप इसके पृष्ठ पर प्लगइन के गुणों के बारे में पता कर सकते हैं।

संचरण अनुकूलन

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

शेड्यूलर का उपयोग करना

GWT में एक लंबित कॉल तंत्र है। पहले DeferredCommand कहा जाता था, यह पदावनत घोषित किया गया था। अब तंत्र को शेड्यूलर कहा जाता है।
शेड्यूलर वास्तव में एसिंक्रोनस रूप से कार्रवाई करने के लिए एक वर्ग प्रदान करता है। यह गारंटी है कि ब्राउज़र के ईवेंट लूप की समाप्ति के बाद कार्रवाई की जाएगी।
फायदे:

• निष्पादन के धागे को अवरुद्ध नहीं करता है
• पहली UI ईवेंट को पूरा करने की अनुमति देता है।

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

सर्वर अनुरोधों को भेजने के लिए डिस्पैचर का उपयोग करना

सर्वर पर प्रत्येक कॉल निष्पादन में एक निश्चित देरी लगाता है। यदि हमें सर्वर पर लगातार कई कॉल करने की आवश्यकता है, तो हम उन्हें कुछ बैच इकाइयों में एकत्रित कर सकते हैं।
संस्करण 2.3 के साथ शुरू, GWT में RequestFactory का उपयोग करने की क्षमता है:

 requestContext.method1().to(new Receiver<T>(){...}); requestContext.method2().to(new Receiver<T>(){...}); requestContext.fire(new Receiver<Void>(){...}); //called only 1 

इस दृष्टिकोण के फायदे स्पष्ट हैं - कॉल की संख्या में काफी कमी आई है, और, परिणामस्वरूप, निष्पादन में देरी।
यदि हम सर्वर प्रतिक्रियाओं को कैश कर सकते हैं, तो हम कैशिंग प्रबंधकों का उपयोग कर सकते हैं। आप लिंक पर क्लिक करके उनके उपयोग के बारे में पता कर सकते हैं।

निष्कर्ष में

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

आपका ध्यान के लिए धन्यवाद!

उपयोगी संसाधन:

1. static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en//events/io/2011/static/presofiles/drfibonacci_devtools_high_performance_gwt.pdf
2. dl.google.com/io/2009/pres/W_1115_GWTCanDoWhat.pdf
3. dl.google.com/io/2009/pres/W_1230_MeasureinMilliseconds-PerformanceTipsforGoogleWebToolkit.pdf
4. turbomanage.wordpress.com/2010/07/12/caching-batching-dispatcher-for-gwt-dispatch
5. www.zackgrossbart.com/hackito/antiptrn-gwt
6. www.zackgrossbart.com/hackito/antiptrn-gwt2
7. www.zackgrossbart.com/hackito/gwt-rest
8. habrahabr.ru/blogs/gwt/99614