अंचल के बिना कोणीय। अधिकतम प्रदर्शन

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

यहां मैं कुछ पहलुओं का पता लगाना चाहूंगा कि नए आइवी कंपाइलर (जो कि कोणीय 9 में दिखाई देते हैं) का उपयोग ज़ोन के उपयोग की अस्वीकृति को बहुत सुविधाजनक बना सकता है।



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

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

आपको ज़ोन के बिना कोणीय का उपयोग करने की आवश्यकता क्यों हो सकती है।

इससे पहले कि हम जारी रखें, चलो एक महत्वपूर्ण प्रश्न पूछें: "क्या यह ज़ोन से छुटकारा पाने के लायक है। यह देखते हुए कि यह पुस्तकालय हमें थोड़े प्रयास के साथ टेम्पलेट्स को फिर से प्रस्तुत करने में मदद करता है?" बेशक, यह पुस्तकालय बहुत उपयोगी है। लेकिन, हमेशा की तरह, आपको हर चीज के लिए भुगतान करना होगा।

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

कोणीय से ज़ोन निकालें

कोणीय क्षेत्र के बिना काम करने के लिए कोणीय आसानी से बनाया जा सकता है। ऐसा करने के लिए, आपको पहले संबंधित आयात कमांड को टिप्पणी या हटाना होगा, जो कि polyfills.ts फ़ाइल में स्थित है।


ज़ोन बाहर टिप्पणी की। आयात आदेश

अगला - आपको निम्नलिखित विकल्पों के साथ रूट मॉड्यूल से लैस करने की आवश्यकता है:

 platformBrowserDynamic()  .bootstrapModule(AppModule, {    ngZone: 'noop'  })  .catch(err => console.error(err)); 

कोणीय आइवी: स्व-पहचान परिवर्तन etdetectChanges और vymarkDirty के साथ

इससे पहले कि हम टाइपस्क्रिप्ट डेकोरेटर बनाना शुरू कर सकें, हमें यह जानने की ज़रूरत है कि आइवी आपको घटक परिवर्तनों का पता लगाने की प्रक्रिया को कैसे लागू करने की अनुमति देता है, जिससे यह गंदा हो जाता है, और ज़ोन और डीआई को दरकिनार कर देता है।

@angular/core से निर्यात किए गए दो अतिरिक्त कार्य अब हमारे लिए उपलब्ध हैं। ये ɵdetectChanges और ɵmarkDirty । ये दो कार्य अभी भी आंतरिक उपयोग के लिए लक्षित हैं और अस्थिर हैं - प्रतीक ɵ उनके नामों की शुरुआत में स्थित है।

आइए देखें कि इन सुविधाओं का उपयोग कैसे किया जाए।

Ɵ ɵmarkDirty फ़ंक्शन

यह फ़ंक्शन आपको एक घटक को चिह्नित करने की अनुमति देता है, जो इसे "गंदा" बनाता है, अर्थात, पुन: प्रतिपादन की आवश्यकता होती है। यदि घटक को "गंदा" नहीं कहा जाता है, तो उसे कॉल करने से पहले, परिवर्तन का पता लगाने की प्रक्रिया शुरू करने की योजना है।

 import { ɵmarkDirty as markDirty } from '@angular/core'; @Component({...}) class MyComponent {  setTitle(title: string) {    this.title = title;    markDirty(this);  } } 

▍ ▍detectChanges फ़ंक्शन

कोणीय आंतरिक प्रलेखन का कहना है कि, प्रदर्शन कारणों से, आपको ɵdetectChanges उपयोग नहीं करना चाहिए। इसके बजाय, यह ɵmarkDirty फ़ंक्शन का उपयोग करने के लिए अनुशंसित है। ɵdetectChanges फ़ंक्शन समकालिक रूप से एक घटक और उसके ɵdetectChanges में परिवर्तनों का पता लगाने की प्रक्रिया को आमंत्रित करता है।

 import { ɵdetectChanges as detectChanges } from '@angular/core'; @Component({...}) class MyComponent {  setTitle(title: string) {    this.title = title;    detectChanges(this);  } } 

टाइपस्क्रिप्ट डेकोरेटर का उपयोग करके स्वचालित रूप से परिवर्तनों का पता लगाएं

यद्यपि, कोणीय द्वारा प्रदान की जाने वाली विशेषताएं DI को घूमने देकर विकास की उपयोगिता को बढ़ाती हैं, फिर भी प्रोग्रामर को इस तथ्य से निराशा हो सकती है कि उसे परिवर्तन का पता लगाने की प्रक्रिया शुरू करने के लिए इन कार्यों को स्वयं आयात करने और कॉल करने की आवश्यकता है।

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

Ervedभारत की शोभा बढ़ाते हुए

परिवर्तनों का पता लगाने के लिए, यथासंभव कम प्रयास करते हुए, हम एक डेकोरेटर बनाएंगे जिसे तीन तरीकों से लागू किया जा सकता है। अर्थात्, यह निम्नलिखित संस्थाओं पर लागू होता है:

• तुल्यकालिक तरीकों के लिए।
• अवलोकनीय वस्तु।
• साधारण वस्तुओं को।

छोटे उदाहरणों पर विचार करें। निम्नलिखित कोड के टुकड़े में, हम state वस्तु और changeTitle विधि के लिए changeTitle @observed डेकोरेटर लागू करते हैं:

 export class Component {    title = '';    @observed() state = {        name: ''    };    @observed()    changeTitle(title: string) {        this.title = title;    }    changeName(name: string) {        this.state.name = name;    } } 

• state ऑब्जेक्ट में परिवर्तनों की जांच करने के लिए, हम एक प्रॉक्सी ऑब्जेक्ट का उपयोग करते हैं जो ऑब्जेक्ट में परिवर्तन को स्वीकार करता है और परिवर्तनों का पता लगाने के लिए प्रक्रिया को कॉल करता है।
• हम एक फ़ंक्शन को लागू करके changeTitle विधि को ओवरराइड करते हैं जो पहले इस विधि को कॉल करता है और फिर परिवर्तन का पता लगाने की प्रक्रिया शुरू करता है।

और यहाँ BehaviorSubject साथ एक उदाहरण दिया गया है:

 export class AppComponent {    @observed() show$ = new BehaviorSubject(true);    toggle() {        this.show$.next(!this.show$.value);    } } 

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

▍ एक डेकोरेटर का निर्माण

यहाँ observed डेकोरेटर हस्ताक्षर है:

 export function observed() {  return function(    target: object,    propertyKey: string,    descriptor?: PropertyDescriptor  ) {} } 

जैसा कि आप देख सकते हैं, descriptor एक वैकल्पिक पैरामीटर है। ऐसा इसलिए है क्योंकि हमें डेकोरेटर को तरीकों और गुणों दोनों पर लागू करने की आवश्यकता है। यदि पैरामीटर मौजूद है, तो इसका मतलब है कि डेकोरेटर विधि पर लागू होता है। इस मामले में, हम यह करते हैं:

• descriptor. गुण सहेजें descriptor. value ।
• हम निम्नानुसार विधि को फिर से परिभाषित करते हैं: परिवर्तन का पता लगाने की प्रक्रिया शुरू करने के लिए मूल फ़ंक्शन को कॉल करें, और फिर markDirty(this) को कॉल करें। यहाँ यह कैसा दिखता है:
  
  

   if (descriptor) {  const original = descriptor.value; //     descriptor.value = function(...args: any[]) {    original.apply(this, args); //       markDirty(this);  }; } else {  //   } 

अगला, आपको यह जांचने की आवश्यकता है कि हम किस प्रकार की संपत्ति के साथ काम कर रहे हैं। यह एक अवलोकनीय वस्तु या एक सामान्य वस्तु हो सकती है। यहां हम एक और आंतरिक कोणीय एपीआई का उपयोग करेंगे। मेरा मानना ​​है कि, नियमित अनुप्रयोगों में उपयोग के लिए अभिप्रेत नहीं है (क्षमा करें!)।

हम ɵcmp संपत्ति के बारे में बात कर रहे हैं, जो परिभाषित होने के बाद कोणीय द्वारा संसाधित गुणों की पहुंच प्रदान करता है। हम onInit और onInit onDestroy की विधियों को ओवरराइड करने के लिए उनका उपयोग कर सकते हैं।

 const getCmp = type => (type).ɵcmp; const cmp = getCmp(target.constructor); const onInit = cmp.onInit || noop; const onDestroy = cmp.onDestroy || noop; 

किसी संपत्ति को चिन्हित करने के लिए, हम ReflectMetadata उपयोग ReflectMetadata और उसके मूल्य को true । परिणामस्वरूप, हम जानेंगे कि घटक के आरम्भ होने पर हमें संपत्ति का निरीक्षण करना होगा:

 Reflect.set(target, propertyKey, true); 

अब onInit हुक को ओवरराइड करने और घटक उदाहरण बनाते समय गुणों की जांच करने का समय है:

 cmp.onInit = function() {  checkComponentProperties(this);  onInit.call(this); }; 

हम checkComponentProperties फ़ंक्शन को परिभाषित करते हैं, जो घटक के गुणों को बायपास करेगा, जो पहले Reflect.set का उपयोग करके निर्धारित मूल्य के अनुसार उन्हें फ़िल्टर करता है:

 const checkComponentProperties = (ctx) => {  const props = Object.getOwnPropertyNames(ctx);  props.map((prop) => {    return Reflect.get(target, prop);  }).filter(Boolean).forEach(() => {    checkProperty.call(ctx, propertyKey);  }); }; 

checkProperty फ़ंक्शन व्यक्तिगत गुणों को सजाने के लिए जिम्मेदार होगा। पहले, हम जांचते हैं कि क्या संपत्ति एक अवलोकन योग्य या नियमित वस्तु है। यदि यह एक अवलोकन योग्य वस्तु है, तो हम इसकी सदस्यता लेते हैं और इसकी आंतरिक जरूरतों के लिए घटक में संग्रहीत सदस्यता की सूची में सदस्यता जोड़ते हैं।

 const checkProperty = function(name: string) {  const ctx = this;  if (ctx[name] instanceof Observable) {    const subscriptions = getSubscriptions(ctx);    subscriptions.add(ctx[name].subscribe(() => {      markDirty(ctx);    }));  } else {    //    } }; 

यदि संपत्ति एक सामान्य वस्तु है, तो हम उसे प्रॉक्सी ऑब्जेक्ट में बदल देंगे और उसके handler फ़ंक्शन में markDirty को कॉल markDirty :

 const handler = {  set(obj, prop, value) {    obj[prop] = value;    ɵmarkDirty(ctx);    return true;  } }; ctx[name] = new Proxy(ctx, handler); 

अंत में, आपको घटक को नष्ट करने के बाद सदस्यता को साफ करने की आवश्यकता है:

 cmp.onDestroy = function() {  const ctx = this;  if (ctx[subscriptionsSymbol]) {    ctx[subscriptionsSymbol].unsubscribe();  }  onDestroy.call(ctx); }; 

इस डेकोरेटर की संभावनाओं को व्यापक नहीं कहा जा सकता है। वे सभी संभावित उपयोगों को कवर नहीं करते हैं जो एक बड़े अनुप्रयोग में दिखाई दे सकते हैं। उदाहरण के लिए, ये टेम्प्लेट फ़ंक्शंस के लिए कॉल होते हैं जो ऑब्ज़र्वेबल ऑब्जेक्ट्स को वापस करते हैं। लेकिन मैं इस पर काम कर रहा हूं।

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

अनुप्रयोग त्वरण परिणामों का विश्लेषण

अब जब हमने आइवी के आंतरिक तंत्रों के बारे में थोड़ी सी बात की है, और इन तंत्रों का उपयोग करके एक डेकोरेटर कैसे बनाया जाए, तो यह परीक्षण करने का समय है कि हमें वास्तविक आवेदन में क्या मिला है।

मैं, कोणीय अनुप्रयोगों के प्रदर्शन पर ज़ोन से छुटकारा पाने के प्रभाव का पता लगाने के लिए, मेरी क्रिप्टोफ़ोलियो शौक परियोजना का इस्तेमाल किया।

मैंने टेम्प्लेट को सभी आवश्यक लिंक टेम्प्लेट और विकलांग ज़ोन में उपयोग किए गए हैं। उदाहरण के लिए, निम्नलिखित घटक पर विचार करें:

 @Component({...}) export class AssetPricerComponent {  @observed() price$: Observable<string>;  @observed() trend$: Observable<Trend>;   // ... } 

टेम्पलेट में दो चर का उपयोग किया जाता है: price (संपत्ति की कीमत यहां स्थित होगी) और trend (यह चर मूल्य परिवर्तन की दिशा का संकेत देते हुए मान up , stale और down ले जा सकता है)। मैंने उन्हें @observed सजाया।

▍ प्रोजेक्ट बंडल आकार

शुरू करने के लिए, आइए ज़रा देखें कि ज़ोन से छुटकारा पाने के दौरान प्रोजेक्ट बंडल का आकार कितना कम हो गया है। नीचे इस क्षेत्र के निर्माण की योजना है।


Zone.js के साथ एक परियोजना के निर्माण का परिणाम

और यहाँ क्षेत्र के बिना विधानसभा है।


बिना ज़ोन के एक परियोजना के निर्माण का परिणाम। जेएस

polyfills-es2015.xxx.js पर ध्यान polyfills-es2015.xxx.js । यदि परियोजना ज़ोन.जेएस का उपयोग करती है, तो इसका आकार लगभग 35 Kb है। लेकिन बिना ज़ोन.जेएस - केवल 130 बाइट्स।

▍Nachalnaya लोड हो रहा है

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

शायद दो आवेदन विकल्पों के मूल्यांकन में अंतर केवल बंडलों के आकार पर निर्भर करता है।

तो, यहाँ एक आवेदन के लिए प्राप्त किया गया परिणाम है।


जोन.js का उपयोग करने वाले अनुप्रयोग के लिए विश्लेषण परिणाम

और यहाँ उस क्षेत्र के अनुप्रयोग का विश्लेषण करने के बाद क्या हुआ है। इसका उपयोग नहीं किया गया है।


विश्लेषण एक आवेदन के लिए परिणाम है जो ज़ोन। जेएस का उपयोग नहीं करता है

▍ प्रदर्शन

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

आवेदन को लोड करने के लिए, मैंने 100 इकाइयाँ बनाईं जो हर 250 एमएस को बदलने वाली कीमतों पर सशर्त डेटा प्रदान करती हैं। यदि कीमत बढ़ती है, तो इसे हरे रंग में प्रदर्शित किया जाता है। अगर कम हो - लाल। यह सब मेरे मैकबुक प्रो को गंभीरता से लोड कर सकता है।

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

यह देखने के लिए कि एप्लिकेशन के विभिन्न संस्करण प्रोसेसर संसाधनों का उपयोग कैसे करते हैं, मैंने क्रोम डेवलपर टूल का उपयोग किया।

यहाँ पर जो एप्लीकेशन है जो Zone.js. का उपयोग करता है वह दिखता है


System.js का उपयोग करने वाले एप्लिकेशन द्वारा बनाया गया सिस्टम लोड

और यहां बताया गया है कि कोई एप्लिकेशन किस क्षेत्र में काम करता है।


किसी एप्लिकेशन द्वारा बनाया गया सिस्टम लोड जो ज़ोन का उपयोग नहीं करता है

हम इन परिणामों का विश्लेषण करते हैं, प्रोसेसर लोड ग्राफ (पीला) पर ध्यान देते हैं:

• जैसा कि आप देख सकते हैं, एक एप्लिकेशन जो ज़ोन का उपयोग करता है। लगातार प्रोसेसर को 70-100% तक लोड करता है! यदि आप सिस्टम पर इस तरह का लोड बनाकर ब्राउज़र टैब को लंबे समय तक खुला रखते हैं, तो इसमें चल रहा एप्लिकेशन अच्छी तरह से विफल हो सकता है।
• और एप्लिकेशन का संस्करण जहां ज़ोन। जेएस का उपयोग नहीं किया जाता है, 30 से 40% की सीमा में प्रोसेसर पर एक स्थिर भार बनाता है। अद्भुत!

कृपया ध्यान दें कि ये परिणाम क्रोम डेवलपर टूल विंडो के साथ खुले थे, जो सिस्टम पर एक दबाव डालता है और एप्लिकेशन को धीमा कर देता है।

▍ भार वृद्धि

मैंने यह सुनिश्चित करने की कोशिश की कि मूल्य को अद्यतन करने के लिए जिम्मेदार प्रत्येक इकाई पहले से ही उत्पादन के अलावा हर पल 4 और अपडेट जारी करेगी।

यहाँ हम उस एप्लिकेशन के बारे में जानने में कामयाब रहे जिसमें ज़ोन का उपयोग नहीं किया गया है:

• यह एप्लिकेशन सामान्य रूप से लोड के साथ आता है, अब लगभग 50% प्रोसेसर संसाधनों का उपयोग कर रहा है।
• वह प्रोसेसर को लोड करने में सफल रहा, जितना कि जोन.जेएस के साथ अनुप्रयोग, तभी जब कीमतों को हर 10 एमएस (नए डेटा, पहले की तरह, 100 संस्थाओं से आए) अपडेट किया गया था।

▍ कोणीय बेंचप्रेस के साथ प्रदर्शन विश्लेषण

मेरे द्वारा ऊपर किए गए प्रदर्शन विश्लेषण को विशेष रूप से वैज्ञानिक नहीं कहा जा सकता है। विभिन्न चौखटे के प्रदर्शन के अधिक गंभीर अध्ययन के लिए, मैं इस बेंचमार्क का उपयोग करने की सलाह दूंगा । अनुसंधान के लिए, कोणीय को इस ढांचे के सामान्य संस्करण और बिना ज़ोन के इसके संस्करण का चयन करना चाहिए।

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

यहाँ परीक्षण किए गए घटक का कोड है:

 @Component({...}) export class AppComponent {  public data = [];  @observed()  run(length: number) {    this.clear();    this.buildData(length);  }  @observed()  append(length: number) {    this.buildData(length);  }  @observed()  removeAll() {    this.clear();  }  @observed()  remove(item) {    for (let i = 0, l = this.data.length; i < l; i++) {      if (this.data[i].id === item.id) {        this.data.splice(i, 1);        break;      }    }  }  trackById(item) {    return item.id;  }  private clear() {    this.data = [];  }  private buildData(length: number) {    const start = this.data.length;    const end = start + length;    for (let n = start; n <= end; n++) {      this.data.push({        id: n,        label: Math.random()      });    }  } } 

मैंने प्रोट्रैक्टर और बेंचप्रेस का उपयोग करके बेंचमार्क का एक छोटा सा सेट लॉन्च किया। संचालन कई बार निर्दिष्ट संख्या में किए गए थे।


कार्रवाई में बेंचमार्क

परिणाम

यहाँ Benchpress का उपयोग करके प्राप्त परिणामों का एक नमूना है।


बेंचमार्क परिणाम

इस तालिका में प्रस्तुत संकेतकों की व्याख्या इस प्रकार है:

• gcAmount : gc ऑपरेशंस वॉल्यूम (कचरा संग्रह), Kb
• gcTime : जीसी ऑपरेशन समय, एमएस।
• majorGcTime : मुख्य संचालन का समय gc, ms।
• pureScriptTime : स्क्रिप्ट निष्पादन समय एमएस में, जीसी संचालन और प्रतिपादन को छोड़कर।
• रेंडर टाइम: रेंडरिंग टाइम, renderTime
• scriptTime : स्क्रिप्ट निष्पादन समय को ध्यान में रखते हुए जीसी संचालन और प्रतिपादन।

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

टेस्ट: 1000 लाइनें बनाना

पहले परीक्षण में, 1000 लाइनें बनाई जाती हैं।


परीक्षण के परिणाम

टेस्ट: 10,000 पंक्तियों का निर्माण

जैसा कि अनुप्रयोगों पर भार बढ़ता है, इसलिए उनके प्रदर्शन में अंतर होता है।


परीक्षण के परिणाम

टेस्ट: 1000 लाइनों में शामिल हों

इस परीक्षण में, 1000 लाइनों को 10,000 लाइनों से जोड़ा जाता है।


परीक्षण के परिणाम

टेस्ट: 10,000 पंक्तियों को हटाना

यहां, 10,000 लाइनें बनाई जाती हैं, जिन्हें तब हटा दिया जाता है।


परीक्षण के परिणाम

टाइपस्क्रिप्ट डेकोरेटर सोर्स कोड

नीचे चर्चा की गई टाइपस्क्रिप्ट डेकोरेटर का स्रोत कोड है। यह कोड भी यहां पाया जा सकता है ।

 // tslint:disable import { Observable, Subscription } from 'rxjs'; import { Type, ɵComponentType as ComponentType, ɵmarkDirty as markDirty } from '@angular/core'; interface ComponentDefinition {  onInit(): void;  onDestroy(): void; } const noop = () => { }; const getCmp = <T>(type: Function) => (type as any).ɵcmp as ComponentDefinition; const subscriptionsSymbol = Symbol('__ng__subscriptions'); export function observed() {  return function(    target: object,    propertyKey: string,    descriptor?: PropertyDescriptor  ) {    if (descriptor) {      const original = descriptor.value;      descriptor.value = function(...args: any[]) {        original.apply(this, args);        markDirty(this);      };    } else {      const cmp = getCmp(target.constructor);      if (!cmp) {        throw new Error(`Property ɵcmp is undefined`);      }      const onInit = cmp.onInit || noop;      const onDestroy = cmp.onDestroy || noop;      const getSubscriptions = (ctx) => {        if (ctx[subscriptionsSymbol]) {          return ctx[subscriptionsSymbol];        }        ctx[subscriptionsSymbol] = new Subscription();        return ctx[subscriptionsSymbol];      };      const checkProperty = function(name: string) {        const ctx = this;        if (ctx[name] instanceof Observable) {          const subscriptions = getSubscriptions(ctx);          subscriptions.add(ctx[name].subscribe(() => markDirty(ctx)));        } else {          const handler = {            set(obj: object, prop: string, value: unknown) {              obj[prop] = value;              markDirty(ctx);              return true;            }          };          ctx[name] = new Proxy(ctx, handler);        }      };      const checkComponentProperties = (ctx) => {        const props = Object.getOwnPropertyNames(ctx);        props.map((prop) => {          return Reflect.get(target, prop);        }).filter(Boolean).forEach(() => {          checkProperty.call(ctx, propertyKey);        });      };      cmp.onInit = function() {        const ctx = this;        onInit.call(ctx);        checkComponentProperties(ctx);      };      cmp.onDestroy = function() {        const ctx = this;        onDestroy.call(ctx);        if (ctx[subscriptionsSymbol]) {          ctx[subscriptionsSymbol].unsubscribe();        }      };      Reflect.set(target, propertyKey, true);    }  }; } 

परिणाम

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

पहले आपको trackBy परिवर्तन का पता लगाने की रणनीति का उपयोग करने, trackBy लागू करने, घटकों को अक्षम करने, ज़ोन के बाहर कोड निष्पादित करने, ज़ोन .js घटनाओं को ब्लैकलिस्ट करने (अनुकूलन विधियों की सूची जारी की जा सकती है) का उपयोग करने की आवश्यकता है। यहां दिखाया गया दृष्टिकोण काफी महंगा है, और मुझे यकीन नहीं है कि हर कोई प्रदर्शन के लिए इतनी अधिक कीमत देने को तैयार होगा।

वास्तव में, ज़ोन के बिना विकास सबसे आकर्षक चीज नहीं हो सकती है। शायद यह केवल उस व्यक्ति के लिए नहीं है जो परियोजना में शामिल है, जो उसके पूर्ण नियंत्रण में है। वह है - यह निर्भरता का स्वामी है और हर चीज को उसके उचित रूप में लाने की क्षमता और समय है।

यदि यह पता चला कि आपने सब कुछ करने की कोशिश की और माना कि आपकी परियोजना की अड़चन ठीक जोन.जेएस है, तो शायद आपको परिवर्तनों का स्वतंत्र रूप से पता लगाकर एंगुलर को गति देने की कोशिश करनी चाहिए।

मुझे उम्मीद है कि इस लेख ने आपको यह देखने की अनुमति दी कि भविष्य में कोणीय क्या उम्मीद करता है, आइवी क्या सक्षम है, और आवेदन की गति को अधिकतम करने के लिए ज़ोन.जेएस के साथ क्या किया जा सकता है।

प्रिय पाठकों! आप अपनी कोणीय परियोजनाओं को कैसे अनुकूलित कर सकते हैं जिन्हें अधिकतम प्रदर्शन की आवश्यकता है?