React
प्रदर्शन

मूल बातें - एचटीएमएल डोम बनाम वर्चुअल डोम

HTML DOM महंगा है

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

दूसरे शब्दों में

HTML DOM, HTML तत्वों को कैसे प्राप्त करें, कैसे बदलें, जोड़ें या हटाएं, इसके लिए एक मानक है।

हालांकि, उन DOM ऑपरेशंस बेहद महंगे हैं ।

वर्चुअल डोम एक सॉल्यूशन है

इसलिए रिएक्ट की टीम HTML DOM को अमूर्त करने के लिए आई थी और अपने आवेदन की वर्तमान स्थिति को दोहराने के लिए हमें HTML DOM पर लागू होने के लिए आवश्यक न्यूनतम संचालन की गणना करने के लिए अपना खुद का Virtual DOM बनाना था।

वर्चुअल DOM अनावश्यक DOM संशोधनों से समय बचाता है।

बिल्कुल कैसे?

प्रत्येक बिंदु पर, रिएक्ट में एक Virtual DOM रूप में प्रतिनिधित्व किया गया राज्य है। जब भी अनुप्रयोग स्थिति में परिवर्तन होता है, ये ऐसे चरण होते हैं जो प्रतिक्रिया का प्रदर्शन करने के लिए प्रतिक्रिया करते हैं

1. एक नया वर्चुअल डोम बनाएं जो हमारे एप्लिकेशन की नई स्थिति का प्रतिनिधित्व करता है

2. पुराने वर्चुअल डोम (जो वर्तमान HTML डोम का प्रतिनिधित्व करता है) बनाम नए वर्चुअल डोम की तुलना करें

3. के आधार पर 2. नए वर्चुअल डोम में पुराने वर्चुअल डोम (जो वर्तमान HTML डोम का प्रतिनिधित्व करता है) को बदलने के लिए संचालन की न्यूनतम संख्या का पता लगाएं

• इसके बारे में अधिक जानने के लिए - रीएक्ट्स डिफ एलगोरिदम पढ़ें

4. उन ऑपरेशनों के पाए जाने के बाद, उन्हें अपने समकक्ष HTML DOM ऑपरेशन में मैप किया जाता है

• याद रखें, वर्चुअल DOM केवल HTML DOM का एक अमूर्त हिस्सा है और उनके बीच एक आइसोमॉर्फिक संबंध है

5. अब उन न्यूनतम संचालन की संख्या जो उनके समकक्ष HTML DOM संचालन में पाई और स्थानांतरित हो गई है, अब सीधे आवेदन के HTML DOM पर लागू होती हैं, जो HTML DOM को अनावश्यक रूप से संशोधित करने से समय बचाता है।

नोट: वर्चुअल DOM पर लागू किए गए ऑपरेशन सस्ते हैं, क्योंकि वर्चुअल DOM एक जावास्क्रिप्ट ऑब्जेक्ट है।

रिएक्ट के अलग एल्गोरिथ्म

एक पेड़ को दूसरे में बदलने के लिए न्यूनतम संख्या में संचालन उत्पन्न करना O (n ^ 3) के क्रम में एक जटिलता है जहां n पेड़ में नोड्स की संख्या है। प्रतिक्रिया एक रैखिक समय में इस समस्या को हल करने के लिए दो मान्यताओं पर निर्भर करती है - O (n)

1. एक ही वर्ग के दो घटक समान पेड़ उत्पन्न करेंगे और विभिन्न वर्गों के दो घटक अलग-अलग पेड़ पैदा करेंगे।

2. ऐसे तत्वों के लिए एक अद्वितीय कुंजी प्रदान करना संभव है जो विभिन्न रेंडरर्स में स्थिर हैं।

यह तय करने के लिए कि क्या दो नोड अलग हैं, रिएक्ट 3 मामलों को अलग करता है

1. दो नोड्स अलग-अलग हैं, अगर उनके पास अलग-अलग प्रकार हैं।

• उदाहरण के लिए, <div>...</div> <span>...</span>

2. जब भी दो नोड्स की अलग-अलग चाबियां होती हैं

• उदाहरण के लिए, <div key="1">...</div> <div key="2">...</div>

इसके अलावा, यदि आप प्रदर्शन का अनुकूलन करना चाहते हैं, तो यह समझना महत्वपूर्ण और अत्यंत महत्वपूर्ण है

यदि वे [दो नोड्स] एक ही प्रकार के नहीं हैं, तो रिएक्ट भी जो वे प्रस्तुत करते हैं उससे मेल खाने की कोशिश नहीं करेंगे। यह डोम से पहले एक को हटाने और दूसरे को सम्मिलित करने के लिए जा रहा है।

यहाँ पर क्यों

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

सलाह & चाल

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

1. यदि आप अपने आप को दो घटक वर्गों के बीच बहुत समान आउटपुट के साथ बारी-बारी से देखते हैं, तो आप इसे उसी कक्षा में बनाना चाहते हैं।

2. उदाहरण के लिए, यदि आप जानते हैं कि यह बदलने वाला नहीं है, तो घटक को रोकने के लिए ,ComComententUpdate का उपयोग करें

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id; 
}

ReactJS के साथ प्रदर्शन माप

आप कुछ ऐसा नहीं कर सकते जिसे आप माप नहीं सकते । रिएक्ट घटकों के प्रदर्शन को बेहतर बनाने के लिए, आपको इसे मापने में सक्षम होना चाहिए। ReactJS प्रदर्शन को मापने के लिए एडऑन टूल प्रदान करता है। प्रदर्शन को मापने के लिए react-addons-perf मॉड्यूल आयात करें

import Perf from 'react-addons-perf' // ES6
var Perf = require('react-addons-perf') // ES5 with npm
var Perf = React.addons.Perf; // ES5 with react-with-addons.js

आप आयातित Perf मॉड्यूल से नीचे के तरीकों का उपयोग कर सकते हैं:

• Perf.printInclusive ()
• Perf.printExclusive ()
• Perf.printWasted ()
• Perf.printOperations ()
• Perf.printDOM ()

सबसे महत्वपूर्ण जो आपको सबसे अधिक समय की आवश्यकता होगी वह है Perf.printWasted() जो आपको अपने व्यक्तिगत घटक के व्यर्थ समय का सारणीबद्ध प्रतिनिधित्व देता है

आप तालिका में व्यर्थ समय कॉलम को नोट कर सकते हैं और ऊपर दिए गए टिप्स एंड ट्रिक्स सेक्शन का उपयोग करके घटक के प्रदर्शन में सुधार कर सकते हैं

रेन्चिंग ऑफिशियल गाइड और उत्कृष्ट लेख का संदर्भ लें । प्रतिक्रिया प्रदर्शन पर