DOM हेरफेर संचालन का अनुकूलन
बेहतर प्रदर्शन के लिए एलिमेंट अलग करने, DOM अपडेट को खंडित करने और बदलावों को बैच में करने जैसी तकनीकों से DOM रीफ़्लो और रीपेंट कम करना सीखें।
DOM हेरफेर संचालन का अनुकूलन, CoddyKit पर jQuery Academy का एक निःशुल्क पाठ है। यह 3 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह jQuery Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। jQuery Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
DOM को अनुकूलित क्यों करें?
Document Object Model (DOM) वह तरीका है जिससे ब्राउज़र आपके वेब पृष्ठ को दर्शाता है। जब आप पृष्ठ के तत्वों को बदलते हैं, जैसे नए तत्व जोड़ना या शैलियाँ अपडेट करना, तो ब्राउज़र को उन बदलावों को दिखाने के लिए काम करना पड़ता है।
बार-बार या बिना अनुकूलन के DOM में बदलाव करने से आपकी वेबसाइट धीमी हो सकती है और उपयोगकर्ता का अनुभव सुस्त हो सकता है। आइए इसे तेज़ बनाना सीखें!
रीफ़्लो और रीपेंट
जब भी आप किसी तत्व का लेआउट या शैली बदलते हैं, तो ब्राउज़र को "रीफ़्लो" (पृष्ठ के कुछ हिस्सों के लेआउट की दोबारा गणना) या "रीपेंट" (पिक्सेल को दोबारा बनाना) करना पड़ सकता है।
- रीफ़्लो: तब होता है जब तत्व का आकार, स्थान या सामग्री बदलती है। यह महँगा होता है, क्योंकि इसका प्रभाव अन्य तत्वों पर भी पड़ता है।
- रीपेंट: तब होता है जब केवल किसी तत्व की दृश्यता या रंग बदलता है, उसका लेआउट नहीं। यह रीफ़्लो की तुलना में कम महँगा होता है।
हमारा लक्ष्य इन कार्रवाइयों को न्यूनतम करना है।
अक्षम DOM अपडेट
कल्पना कीजिए कि आप किसी सूची में कई आइटम एक-एक करके जोड़ रहे हैं। हर जोड़ से रीफ़्लो और रीपेंट शुरू हो सकता है, विशेष रूप से तब जब आप शैलियों या आयामों में बदलाव कर रहे हों।
कुछ बदलावों में यह ध्यान देने योग्य नहीं हो सकता, लेकिन सैकड़ों या हज़ारों बदलावों के साथ आपका पृष्ठ बहुत धीमा और प्रतिक्रिया न देने वाला हो सकता है।
अपने बदलावों को एक साथ करना
DOM कार्रवाइयों को अनुकूलित करने का सबसे प्रभावी तरीका अपने बदलावों को "एक साथ करना" है। लाइव DOM में सीधे कई छोटे-छोटे अलग बदलाव करने के बजाय, अपने सभी बदलाव एक ही बार में करने का प्रयास करें।
इसे दीवार पर रंग करने जैसा समझें: कई छोटे धब्बे लगाने के बजाय एक बड़ी परत लगाना बेहतर होता है।
अलग करें, बदलें, फिर जोड़ें
एक शक्तिशाली तकनीक यह है कि किसी तत्व को DOM से अस्थायी रूप से हटाएँ (अलग करें), उसके "ऑफ़लाइन" रहते हुए सभी आवश्यक बदलाव करें और फिर उसे DOM में दोबारा जोड़ दें।
jQuery की .detach() विधि इसके लिए बिल्कुल उपयुक्त है। यह तत्व को हटाती है, लेकिन उसके सभी डेटा और इवेंट हैंडलर सुरक्षित रखती है, जबकि .remove() ऐसा नहीं करती।
Detach का उपयोग
यह उदाहरण दिखाता है कि किसी तत्व को कैसे अलग करें, उसकी सामग्री और शैली को कई बार बदलें और फिर उसे दोबारा जोड़ें। इससे दोबारा जोड़ते समय केवल एक रीफ़्लो होता है।
$(document).ready(function() {
// Assume this HTML exists: <ul id="myList"><li>Item A</li><li>Item B</li></ul>
const $list = $('#myList');
const $firstItem = $list.find('li:first');
// Detach the element
const $tempItem = $firstItem.detach();
// Make multiple changes while detached
$tempItem.text('DETACHED & MODIFIED');
$tempItem.css('background-color', 'yellow');
// Re-attach it to the list
$list.append($tempItem);
});अपडेट को खंडों में करना
कई नए तत्व जोड़ते समय, उन्हें एक-एक करके बनाकर सीधे DOM में जोड़ना अक्षम होता है। इसके बजाय, पहले सभी नए तत्वों को मेमोरी में बनाएँ और फिर उन्हें एक साथ जोड़ें।
आप HTML की एक स्ट्रिंग बनाकर या jQuery ऑब्जेक्ट का एक ऐरे बनाकर और फिर एक ही .append() कॉल का उपयोग करके ऐसा कर सकते हैं।
एक साथ जोड़ने का उदाहरण
यह उदाहरण दिखाता है कि HTML की एक स्ट्रिंग का उपयोग करके कई सूची आइटम कैसे बनाए जाएँ और एक ही DOM कार्रवाई में उन्हें एक साथ कैसे जोड़ा जाए।
$(document).ready(function() {
// Assume this HTML exists: <ul id="batchList"></ul>
const $list = $('#batchList');
let newItemsHtml = ''; // Build HTML string
for (let i = 0; i < 5; i++) {
newItemsHtml += `<li>New Item ${i + 1}</li>`;
}
// Append all new items at once
$list.append(newItemsHtml);
});'लेआउट थ्रैशिंग' से बचें
DOM में बदलाव करने के तुरंत बाद लेआउट के गुण (जैसे .width(), .height(), .offset()) पढ़ते समय सावधान रहें। सही और नवीनतम मान देने के लिए ब्राउज़र को रीफ़्लो करना पड़ सकता है।
लूप में बार-बार DOM में लिखना और फिर लेआउट के गुण पढ़ना "लेआउट थ्रैशिंग" कहलाता है और यह प्रदर्शन को बहुत अधिक प्रभावित करता है। अपने पढ़ने और लिखने के कार्यों को समूहित करें!
अपने कोड को अनुकूलित करें
jQuery में DOM हेरफेर के प्रदर्शन को अनुकूलित करने के लिए निम्नलिखित में से कौन-सी तकनीकें प्रभावी हैं?
पुनरावलोकन: तेज़ DOM
बहुत अच्छा! आपने DOM हेरफेर को अनुकूलित करने की मुख्य रणनीतियाँ सीख ली हैं:
- महँगे रीफ़्लो और रीपेंट को समझें।
- अलग-अलग अपडेट करने के बजाय बदलावों को एक साथ करें।
- तत्वों को ऑफ़लाइन बदलने के लिए
.detach()का उपयोग करें। - कई तत्वों को एक साथ जोड़ें, अक्सर HTML स्ट्रिंग बनाकर।
- DOM को पढ़ने और उसमें लिखने के कार्यों को समूहित करके "लेआउट थ्रैशिंग" से बचें।
इन तकनीकों को लागू करने से आपके jQuery अनुप्रयोग कहीं अधिक तेज़ और प्रतिक्रियाशील बनेंगे!
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 22
- पाठ
- 48
अक्सर पूछे जाने वाले प्रश्न
क्या “DOM हेरफेर संचालन का अनुकूलन” पाठ निःशुल्क है?
हाँ — jQuery Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “DOM हेरफेर संचालन का अनुकूलन” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। jQuery Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
“DOM हेरफेर संचालन का अनुकूलन” में मैं क्या सीखूँगा?
बेहतर प्रदर्शन के लिए एलिमेंट अलग करने, DOM अपडेट को खंडित करने और बदलावों को बैच में करने जैसी तकनीकों से DOM रीफ़्लो और रीपेंट कम करना सीखें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ jQuery Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या jQuery Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर jQuery Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 3 में से 1वाँ पाठ है।
“DOM हेरफेर संचालन का अनुकूलन” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस jQuery Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर jQuery Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- DOM हेरफेर संचालन का अनुकूलन
- कुशल इवेंट प्रबंधन और थ्रॉटलिंग
- कैशिंग और Deferred ऑब्जेक्ट का उपयोग