DOM (दस्तावेज़ ऑब्जेक्ट मॉडल) HTML टैग की ट्री संरचना का सामान्य नाम है। पेज की गति पर इसका प्रभाव ऐसा है कि पेज रेंडरिंग के दौरान आपकी HTML संरचना जितनी जटिल होगी, आपका पेज उतना ही धीमा होगा।
लाइटहाउस के अनुसार, इसकी जटिलता DOM संरचना को तीन मैट्रिक्स का उपयोग करके मापा जाता हैइन मेट्रिक्स को उनके संदर्भ बिंदुओं के साथ प्रदान करने के लिए:
- टैग की कुल संख्या होनी चाहिए 1500 से कम
- अधिकतम टैग गहराई होनी चाहिए 32 से कम
- चाइल्ड टैग की अधिकतम संख्या होनी चाहिए 60 से कम
उपरोक्त उदाहरण में, टैग की कुल संख्या खराब है, अधिकतम टैग गहराई अच्छी है, लेकिन चाइल्ड टैग की अधिकतम संख्या खराब है।
DOM तत्वों को अनुकूलित करना पूरी तरह से फ्रंटएंड स्टेकहोल्डर की जिम्मेदारी है। जब पेज कोड पहली बार बनाया जाता है तो यादृच्छिक रूप से या मनमाने ढंग से चुने गए प्रत्येक टैग की परियोजना पूरी होने के बाद एक लागत होती है। इसलिए, हम सभी फ्रंटएंड डेवलपर्स को एक पल के लिए मौन रहने और अपनी आँखें खोलने के लिए आमंत्रित करते हैं।
वे बिंदु जहां एक बढ़ा हुआ DOM पृष्ठ के प्रदर्शन को नकारात्मक रूप से प्रभावित करता है, उनमें शामिल हैं:
- बड़ी संख्या में नोड्स (टैग) वाले पेजों पर समस्या आएगी उनके बड़े आकार के कारण नेटवर्क भीड़ और लोडिंग कठिनाई, जिससे TTFB (प्रथम बाइट का समय) बढ़ जाता है।
- लोड किए गए नोड्स को बनाने के लिए रेंडर करना उनकी स्थिति और शैली को समझने में समय लगता है, जिससे FCP (फर्स्ट कंटेंटफुल पेंट) बढ़ जाता है।
- जैसे-जैसे नोड्स की संख्या बढ़ती है, आवश्यक लोड भी बढ़ता जाता है। जावास्क्रिप्ट हेरफेर मेमोरी पर बोझ डालता है, टीएफटी (इंटरैक्टिव समय) में वृद्धि।
DOM अनुकूलन को एक बहुत ही सरल उदाहरण से समझाने के लिए, निम्नलिखित पर विचार करें जहां DOM की संख्या और गहराई दोनों कम हो जाती है:
<div id="nav-element">
<ul>
</ul>
</div>ऐसा करने के बजाय:
<ul id="nav-element">
</ul>
ऐसा करना ज़रूरी है: DOM आकार को कम करने के लिए दो सबसे ज़्यादा सुझाए गए तरीके हैं आलसी लोडिंग और पेजिनेशन। चूँकि लिस्टिंग पेजों पर कार्ड संरचनाओं में बहुत ज़्यादा DOM होता है, इसलिए अनंत स्क्रॉल या पेजिनेशन का सुझाव दिया जाता है। पेजिनेशन में आइटम की संख्या तय करते समय, DOM मापन मानदंड पर निश्चित रूप से विचार किया जाना चाहिए। आमतौर पर इसके लिए समय माना जाता है पृष्ठांकन में उत्पादों की संख्या 15-20 सेकंड है, लेकिन इस भाग की गणना वास्तव में DOM आकार को ध्यान में रखते हुए फ्रंटएंड हितधारक की ओर से की जानी चाहिए।
बहुत ही सरल समाधानों में से एक है तत्वों को न जोड़ना जो HTML पृष्ठ पर दिखाई नहीं देते हैं उन्हें CSS से छिपाए बिनायदि किसी तत्व को प्रदर्शित करने की आवश्यकता है, तो उसे बाद में कॉल करके उपयोगकर्ता को दिखाया जाना चाहिए। आपको पता होना चाहिए कि CSS के साथ तत्वों को छिपाने से DOM बड़ा हो जाता है।
सूत्रों का कहना है:
