कोणीय आइवी को समझना: वृद्धिशील डोम और वर्चुअल डोम

TestMace एप्लिकेशन लिखने के लिए कोणीय हमारा प्राथमिक उपकरण है। पिछले लेखों में से एक में, हमने आइवी रेंडरर के विषय पर छुआ। यह जानने का समय है कि आइवी पिछले इंजन से कैसे अलग है।

Nrwl में, हम कुछ समय से उन अवसरों का इंतजार कर रहे हैं जो आइवी हमें और हमारे ग्राहकों की पेशकश करेगा। कोणीय आइवी नया एंगुलर रेंडरिंग इंजन है, जो कि लोकप्रिय फ्रेमवर्क की सभी समान तकनीकों से मौलिक रूप से अलग है, जिसमें यह इंक्रीमेंटल डोम का उपयोग करता है।

Incremental DOM क्या है और यह Virtual DOM से कैसे अलग है?

आइए एक तुलनात्मक विश्लेषण करें और पता करें कि इंक्रीमेंटल डोम एंगुलर का सही समाधान क्यों है।

वर्चुअल डोम कैसे काम करता है

रिएक्ट काफी सामान्य ढांचा है जो पहली बार वर्चुअल डोम का इस्तेमाल किया था। मूल विचार इस प्रकार है:
जब भी इसका प्रतिपादन किया जाता है तब प्रत्येक घटक एक नया VDOM ट्री बनाता है। रिएक्ट नए पेड़ की पिछले वाले से तुलना करता है, जिसके बाद वह नए DOM के नए VDOM ट्री के साथ लाने के लिए ब्राउज़र DOM में बदलाव का एक सेट बनाता है।

वर्चुअल डोम के दो मुख्य फायदे हैं:

• घटक के प्रतिपादन समारोह और संकलन की आवश्यकता की कमी को लागू करने के लिए किसी भी प्रोग्रामिंग भाषा का उपयोग करने की क्षमता। रिएक्ट डेवलपर्स ज्यादातर JSX में लिखते हैं, लेकिन नियमित जावास्क्रिप्ट ठीक है।
• घटक प्रतिपादन के परिणामस्वरूप, हमें एक मूल्य मिलता है जो परीक्षण, डिबगिंग, आदि के काम में आ सकता है।

वृद्धिशील डोम

इंक्रीमेंटल डोम का उपयोग Google द्वारा आंतरिक आवश्यकताओं के लिए किया जाता है। उनका मुख्य विचार यह है:

प्रत्येक घटक को निर्देशों के एक सेट में संकलित किया जाता है जो DOM पेड़ बनाते हैं और डेटा में बदलाव होने पर उन्हें सीधे अपडेट करते हैं।
उदाहरण के लिए, यह घटक:

@Component({ selector: 'todos-cmp', template: ` <div *ngFor="let t of todos|async"> {{t.description}} </div> ` }) class TodosComponent { todos: Observable<Todo[]> = this.store.pipe(select('todos')); constructor(private store: Store<AppState>) {} } 

इसे संकलित किया जाएगा:

 var TodosComponent = /** @class */ (function () { function TodosComponent(store) { this.store = store; this.todos = this.store.pipe(select('todos')); } TodosComponent.ngComponentDef = defineComponent({ type: TodosComponent, selectors: [["todos-cmp"]], factory: function TodosComponent_Factory(t) { return new (t || TodosComponent)(directiveInject(Store)); }, consts: 2, vars: 3, template: function TodosComponent_Template(rf, ctx) { if (rf & 1) { // create dom pipe(1, "async"); template(0, TodosComponent_div_Template_0, 2, 1, null, _c0); } if (rf & 2) { // update dom elementProperty(0, "ngForOf", bind(pipeBind1(1, 1, ctx.todos))); } }, encapsulation: 2 }); return TodosComponent; }()); 

टेम्पलेट फ़ंक्शन में DOM रेंडर करने और अपडेट करने के निर्देश हैं। कृपया ध्यान दें कि निर्देशों की व्याख्या फ्रेमवर्क रेंडरिंग इंजन द्वारा नहीं की गई है। वे प्रतिपादन इंजन हैं।

वृद्धिशील डोम के लाभ

Google ने Incremental DOM, और Virtual DOM के लिए चयन करने का निर्णय क्यों लिया?

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

उपरोक्त कार्यों को हल करने के लिए:

• रेंडरिंग इंजन ट्री-शेकेबल होना चाहिए
• रेंडरिंग इंजन को बहुत अधिक मेमोरी का उपभोग नहीं करना चाहिए

वृद्धिशील डोम और पेड़ shakability

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

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

वृद्धिशील डोम और स्मृति की खपत

वर्चुअल डोम हर री-रेंडरिंग से स्क्रैच से एक पूरा पेड़ बनाता है।

वृद्धिशील DOM को DOM में परिवर्तन नहीं करने पर दृश्य को पुन: प्रस्तुत करने के लिए मेमोरी की आवश्यकता नहीं होती है। मेमोरी को केवल तभी आवंटित करना होगा जब DOM नोड्स जोड़े या हटाए जाएँ, और आवंटित मेमोरी की मात्रा DOM के लिए किए गए परिवर्तनों के समानुपाती होगी।

चूँकि अधिकतर कॉल रेंडर / टेम्प्लेट में कोई बदलाव नहीं होता है (या वे बदलाव जो मामूली होते हैं), महत्वपूर्ण मेमोरी सेविंग प्राप्त होते हैं।

वृद्धिशील DOM जीता?

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

आइवी + वृद्धिशील डोम =?

कोणीय हमेशा HTML और टेम्पलेट्स के उपयोग पर बनाया गया है (कुछ साल पहले मैंने एक पोस्ट प्रकाशित किया था जिसमें मैंने इस समाधान के समर्थन में अपने विचारों को रेखांकित किया था और इसकी दीर्घकालिक प्रभावशीलता)। यही कारण है कि मुख्य ट्रम्प कार्ड वर्चुअल डोम कभी भी कोणीय के लिए विजेता नहीं होगा।

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

यदि आपको कोणीय सलाह, प्रशिक्षण या सहायता संबंधी जानकारी की आवश्यकता है, तो आप हमारे ग्राहक सेवा के तरीकों के बारे में यहां पढ़ सकते हैं