क्या मेरी परियोजनाओं में शैडो डोम लागू करने से उन्हें रिएक्ट द्वारा उपयोग किए जाने वाले वर्चुअल डोम की तरह तेज हो जाएगा?
जवाबों:
वर्चुअल डोम
Virtual DOM, DOM के अनावश्यक परिवर्तनों से बचने के बारे में है, जो महंगे प्रदर्शन-वार हैं, क्योंकि DOM में परिवर्तन आमतौर पर पृष्ठ के पुन: प्रतिपादन का कारण बनते हैं। वर्चुअल DOM एक बार में लागू होने के लिए कई बदलावों को इकट्ठा करने की अनुमति देता है, इसलिए हर एक परिवर्तन फिर से रेंडर करने का कारण नहीं बनता है, बल्कि DOM के लागू होने के बाद केवल एक बार री-रेंडरिंग होता है।
छाया डोम
छाया डोम ज्यादातर कार्यान्वयन के अंतराल के बारे में है। एक एकल कस्टम तत्व अधिक-या-कम जटिल तर्क को अधिक-या-कम जटिल DOM के साथ जोड़ सकता है। मनमाने ढंग से जटिलता का एक संपूर्ण वेब अनुप्रयोग एक आयात द्वारा एक पृष्ठ में जोड़ा जा सकता है <body><my-app></my-app>लेकिन पुन: प्रयोज्य और सरल घटकों को भी कस्टम तत्वों के रूप में लागू किया जा सकता है जहां आंतरिक प्रतिनिधित्व छाया डोम में छिपा हुआ है <date-picker></date-picker>।
स्टाइल एनकैप्सुलेशन शैडो डोम उन शैलियों को रोकने के बारे में भी है जो गलती से उन तत्वों पर लागू की जा रही हैं जिनका डिज़ाइनर ने इरादा नहीं किया था, उदाहरण के लिए क्योंकि सीएसएस या घटक लाइब्रेरी जिसे आप एक चयनकर्ता बदल रहे हैं जो अब अन्य तत्वों पर लागू होता है जो समान सीएसएस वर्ग नाम का उपयोग करते हैं। कंपोनेंट्स में जोड़े गए स्टाइल्स को उस कंपोनेंट पर स्कॉप किया जाता है और ब्लीडिंग आउट या स्टाइल्स को रोका जाता है।
छाया डोम और प्रदर्शन
हालाँकि, शैडो DOM प्रदर्शन के बारे में नहीं है, लेकिन इसके प्रदर्शन निहितार्थ भी हैं। क्योंकि शैलियों को स्कोप किया गया है, ब्राउज़र पृष्ठ के केवल सीमित क्षेत्र (एक कस्टम तत्व की छाया DOM) को प्रभावित करने के लिए कुछ परिवर्तनों के बारे में धारणा बना सकता है, जो पुन: रेंडरिंग के बजाय इस तरह के घटक के क्षेत्र में फिर से प्रतिपादन को सीमित कर सकता है पूरा पृष्ठ।
यही कारण है कि >>>, /deep/और ::shadowसीएसएस कॉम्बिनेटर, जो छाया डोम सीमाओं पर शैलियों को लागू करने की अनुमति देते थे, पदावनत कर दिए गए थे और जल्द ही क्रोम से हटाए जाने वाले थे (अन्य ब्राउज़रों ने उन्हें कभी नहीं बनाया था)। इन कॉम्बिनेटरों का अस्तित्व केवल पिछले पैराग्राफ में वर्णित अनुकूलन के प्रकार को रोकता है।
Angular2 दोनों दुनिया के फायदे का उपयोग करता है।
यह यूनिडायरेक्शनल डेटा प्रवाह का उपयोग करता है और केवल मॉडल पर परिवर्तन का पता लगाता है। यदि यह पता लगाता है कि यह कारण बनता है डोम अद्यतन करने बाइंडिंग के द्वारा अद्यतन और जैसे संरचनात्मक निर्देशों बनाने जा करने के लिए बदल जाता है *ngFor, *ngIf... डोम अद्यतन करें। इसलिए DOM केवल तभी अपडेट होता है जब मॉडल वास्तव में बदल जाता है।
Angular2 छाया डोम (केवल ViewEncapsulation.Nativeजिसके साथ वर्तमान में डिफ़ॉल्ट नहीं है) का उपयोग ब्राउज़र द्वारा प्रदान की गई शैली एन्कैप्सुलेशन क्षमताओं का उपयोग करने के लिए करता है, या (वर्तमान डिफ़ॉल्ट) बस मूल छाया और डोम और सीएसएस चर तक वर्कअराउंड के रूप में घटकों में जोड़े गए पुनर्लेखन शैलियों द्वारा शैली एनकैप्सुलेशन का अनुकरण करता है। (गतिशील वैश्विक शैली परिवर्तनों के लिए) व्यापक रूप से उपलब्ध हो जाते हैं।
नहीं, शैडो डोम और वर्चुअल DOM असंबंधित हैं, हालांकि कुछ इसी तरह का नाम दिया गया है:
वर्चुअल डोम: विभेदक कारणों से DOM की दो प्रतियां (मूल, और अद्यतन) रखने की अवधारणा। रेंडर करने से पहले, रिएक्ट दो ऑब्जेक्ट्स को यह निर्धारित करने के लिए अलग करता है कि क्या यह वास्तविक डोम ट्री में अपडेट (एस) लागू करना चाहिए। इससे प्रदर्शन में वृद्धि होती है, क्योंकि हम केवल उस दृश्य के हिस्से को अपडेट कर रहे हैं जिसकी आवश्यकता है, न कि पूरी स्क्रीन।
शैडो डोम: W3C द्वारा प्रस्तावित वेब कंपोनेंट्स स्पेक्स का एक हिस्सा , जो मूल रूप से छोटे डोम तत्वों और सीएसएस शैलियों को एक ही डोम तत्व में शामिल करने की अनुमति देता है:
उदाहरण छाया डोम तत्व
<video width="300" height="150" />
हालाँकि, <video>वास्तव में निम्नलिखित तत्वों को इनकैप्सुलेट करता है:
<div>
<input type="button" style="color: blue;">Play
<input type="button" style="color: red;">Pause
<source src="myVideo.mp4">
</div>
इसलिए शैडो डोम का उपयोग करके, हम अपने वेब तत्व के कार्यान्वयन विवरण को छिपाने में सक्षम हैं, और केवल उप-तत्वों (यानी height, width) के लिए आवश्यक जानकारी के साथ गुजरते हैं , जो, संभवतः भ्रामक रूप से, propsघटकों को पारित करने के ReactJS मुहावरे के समान है। ।
के माध्यम से दी गई जानकारी :
<video>) के पीछे जटिल वेब तत्वों के कार्यान्वयन के विवरण छिपा रहे हैं , लेकिन प्रदर्शन लाभ की कोई उम्मीद नहीं है।